RGB saja tidak cukup: notasi warna HSL, CMYK, dan OKLCH

Di artikel sebelumnya, Bagaimana Komputer Membuat Warna: RGB, HEX, dan Bilangan Biner, kita melihat bahwa warna hanyalah tiga angka — merah, hijau, biru, masing-masing 0–255. Layar berjalan dengan angka-angka itu dengan baik. Tapi begitu manusia mulai bekerja dengan warna, RGB terasa tidak praktis dengan cepat.

RGB Mudah Digunakan, tapi Tidak Intuitif

“Buat merah yang sedikit lebih terang.” Bagaimana caranya dengan RGB? Ketiga kanal harus dinaikkan sedikit secara bersamaan. “Saya hanya ingin menurunkan saturasi sedikit” — dari RGB saja tidak jelas kanal mana yang harus dikurangi. “Cetak warna ini persis di atas kertas” — dengan RGB, itu tidak mungkin sama sekali.

Format warna lain muncul untuk menyelesaikan masalah-masalah ini.

HSL — Cara Manusia Berpikir tentang Warna

HSL membagi warna menjadi tiga komponen: rona · saturasi · kecerahan. hsl(14, 100%, 60%) adalah warna yang sama dengan #FF5733, tetapi asal-usul setiap nilainya jauh lebih jelas.

Jika RGB adalah bahasa komputer — maka HSL adalah bahasa desainer. Warna yang sama dapat ditangani dari sudut pandang apa yang ingin diubah.

Hue — Rona adalah Lingkaran 360°

Rona berputar seperti jarum jam, mulai dari 0° hingga 360°. 0° dan 360° adalah merah yang sama.

Saturation — Saturasi adalah Kekuatan Warna

Meski rona sama, menurunkan saturasi membuat warna semakin mendekati abu-abu.

Lightness — Kecerahan dari Hitam ke Putih

L 0% selalu hitam, 100% selalu putih. 50% adalah kecerahan “asli” dari warna tersebut.

Kegunaan Nyata HSL — Membuat Palet

Dengan mempertahankan Hue yang sama dan hanya mengubah L, kita mendapatkan sekumpulan warna yang serasi secara alami. Dengan RGB, setiap 9 slot harus dihitung secara manual, tetapi dengan HSL cukup mengubah L dari 12% ke 92% secara bertahap.

Kedua palet di atas bisa dibuat hanya dengan satu baris perubahan.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... cukup ubah L dengan kelipatan 10 */
}

Inilah titik di mana HSL paling bersinar saat membangun design system.

CMYK — Bahasa Tinta

Untuk memberi warna pada kertas, bukan layar, dibutuhkan sistem yang sama sekali berbeda. CMYK adalah rasio empat tinta yang digunakan percetakan.

Mengapa hitam disebut “K” bukan “B”? Karena B mudah tertukar dengan Blue. Selain itu, istilah ini berasal dari “Key plate” dalam terminologi percetakan — yaitu pelat acuan yang menyelaraskan tinta-tinta lainnya.

Cahaya Semakin Terang Saat Ditambahkan, Tinta Semakin Gelap

Perbedaan terbesar antara RGB dan CMYK adalah cara pencampurannya.

Tinta merah terlihat merah karena ia menyerap cahaya lain dan hanya memantulkan merah. Tinta berfungsi mengurangi cahaya. Itulah mengapa semakin banyak tinta dicampur, semakin gelap warnanya. Secara teori, mencampur ketiganya (CMY) seharusnya menghasilkan hitam, namun kenyataannya menghasilkan cokelat kusam. Itulah alasan tinta hitam murni (K) disediakan secara terpisah.

Di Mana CMYK Digunakan?

Jika bekerja pada desain layar, hampir tidak perlu menyentuh CMYK. Format ini hanya muncul saat mencetak ke kertas.

• Saat mengirim file ke percetakan — kartu nama, poster, buku, kemasan. Percetakan akan mengonversi file RGB ke CMYK.
• Saat mengerjakan proyek cetak di Photoshop / Illustrator — mode warna diatur ke CMYK sejak awal.
• Brand guide — nilai HEX untuk layar dan nilai CMYK untuk cetak dicantumkan bersama, agar warna brand tampak serupa di kedua media.

Mengapa Warna Layar Berbeda dari Warna Cetak — Gamut

Rentang warna yang bisa ditampilkan layar (RGB gamut) dan yang bisa dihasilkan tinta (CMYK gamut) berbeda. Pink fluoresen yang mencolok di layar tidak akan keluar sama di cetakan — karena warna itu tidak bisa dibuat dengan tinta.

Itulah mengapa desainer cetak hanya menggunakan warna yang berada dalam rentang CMYK sebelum memulai pekerjaan. Desain yang dikerjakan dalam RGB dan langsung dicetak sering kali menghasilkan warna yang tampak pudar.

Cara Menulis Nilai CMYK

Nilai menunjukkan berapa persen setiap tinta yang disemprotkan. 0% berarti tidak ada, 100% berarti penuh.

Menggunakan hanya K 100% untuk hitam pekat menghasilkan hitam kusam yang mendekati abu-abu. Itulah mengapa percetakan menambahkan CMY untuk menciptakan hitam yang lebih dalam.

OKLCH — Koordinat Manusia

Model warna yang mulai dikenal luas di era 2020-an. Kata kuncinya satu — “alami di mata manusia.”

Tiga koordinatnya terlihat mirip dengan HSL:

• L — Lightness (kecerahan, 0–1)
• C — Chroma (intensitas, 0–sekitar 0.4)
• H — Hue (rona, 0–360°)

Namun ada masalah tersembunyi dalam HSL. Meski nilai L = 50% sama, kecerahan yang dirasakan berbeda-beda tergantung warnanya. Mari bandingkan langsung.

Ringkasnya — RGB dan HSL adalah koordinat mesin. OKLCH adalah koordinat manusia.

Peran Masing-Masing: L · C · H

Mari lihat apa yang terjadi ketika hanya satu koordinat yang diubah dari warna yang sama.

Digunakan di Mana?

• Palet dengan kecerahan seragam — saat ingin menyamakan kecerahan 8 warna kategori
• Konversi otomatis dark/light mode — cukup balikkan nilai L untuk mendapatkan dark theme yang alami
• Aksesibilitas — perbedaan kecerahan antara teks dan latar belakang dapat diprediksi secara akurat
• Gradasi — aliran yang mulus tanpa “pita abu-abu” di tengah

Diadopsi secara resmi sejak CSS Color Level 4, dan dapat digunakan langsung di browser terbaru.

.btn { background: oklch(67% 0.18 30); }       /* oranye */
.btn:hover { background: oklch(60% 0.18 30); } /* turunkan L 7 → semakin gelap tepat sebanyak itu */

Apa yang Digunakan Kapan?

Untuk sebagian besar pekerjaan digital, RGB/HEX sudah cukup. HSL berguna saat membuat palet, dan OKLCH sangat membantu dalam desain dark/light mode.

Cara Mengelola Warna di fns

Setelah mengetahui bahwa warna adalah angka, langkah berikutnya adalah menempatkan warna yang sering digunakan tepat di ujung jari. fns menyatukan alur mengambil, menyimpan, dan menggunakan kembali warna ke dalam satu tombol.

Eyedropper untuk Mengambil Warna dari Mana Saja — ⌘+Shift+K

Eyedropper adalah alat yang menangkap warna tepat dari piksel mana pun di layar. Ini seperti membawa color picker yang biasanya hanya tersedia di dalam Figma/Photoshop ke seluruh sistem.

Tekan ⌘+Shift+K dan Eyedropper fns muncul dari mana saja di layar. Satu piksel dari mockup desain, area tertentu dari foto, warna latar belakang aplikasi lain — arahkan mouse dan klik untuk menangkap warna tersebut dengan tepat.

• Setiap klik otomatis tersimpan ke clipboard. Tidak perlu tindakan “salin” terpisah.
• Di widget Eyedropper, Anda dapat memilih format yang akan disimpan ke clipboard: RGB / HEX / HSL / CMYK / OKLCH.
• Menampilkan pratinjau visual warna yang diambil beserta warna sistem yang paling mendekati.

Eyedropper → penyimpanan clipboard otomatis → ambil kembali dari clipboard picker — alurnya tidak terputus. Tidak perlu membuka aplikasi terpisah seperti Digital Color Meter bawaan Mac, dan tidak perlu menekan pintasan salin setiap kali.

Clipboard Mengenali Warna Secara Otomatis

Riwayat clipboard fns mendeteksi secara otomatis apakah teks yang disalin adalah kode warna, terlepas dari formatnya.

Ketika mengambil kembali warna yang disalin dari riwayat, sulit mengingat warna mana itu hanya dari teks. fns menampilkan chip warna kecil di samping setiap entri sehingga langsung terlihat.

Melihat Hanya Warna

Dengan satu tombol, Anda dapat memfilter hanya kode warna dari riwayat clipboard. Saat ingin melihat warna yang baru-baru ini digunakan saat mengerjakan desain, tidak perlu mencari di antara teks, URL, dan kode.

• Dari picker yang sama, gunakan kata kunci filter seperti color: → hanya entri warna yang muncul
• Cari berdasarkan nama warna — ketik “blue”, “red” untuk menyaring warna dalam rentang tersebut
• Warna serupa dikelompokkan dan diurutkan secara visual

Mengonversi Warna ke Format Lain

Warna yang sama dapat diambil dalam format notasi yang berbeda. Setelah menyalin #FF5733 dari Figma dan ingin menempelkan dalam format rgb(...) di CSS, pilih entri tersebut di clipboard picker fns dan tekan satu pintasan — konversi otomatis.

Tidak perlu membuka konverter setiap kali berpindah antara Figma (HSB) dan CSS (HSL/HEX/OKLCH).

Text Expansion dan Pengelompokan

Warna brand yang sering digunakan dapat didaftarkan sebagai pintasan teks.

Pintasan yang sama bekerja di mana saja — kolom input warna di CSS, Figma, pesan Slack, atau code editor. Waktu yang dihabiskan untuk mencari dan menyalin warna dari brand guide setiap kali pun hilang.

Coba kurangi waktu yang selama ini dihabiskan untuk membuka konverter dan mengubah kode warna ke format berbeda — dengan fns.

Ingin tahu dari mana angka-angka ini berasal — dasar tiga kanal RGB, bilangan biner, dan notasi HEX? Mulailah dengan Bagaimana Komputer Membuat Warna: RGB, HEX, dan Bilangan Biner.