Mengapa Format Warna Penting
Warna tampak sederhana di permukaan: Anda melihatnya, Anda memetiknya, Anda menggunakannya. Namun pekerjaan desain profesional selalu mengalami masalah yang membuat frustrasi — warna yang sama memiliki representasi berbeda tergantung di mana Anda menggunakannya, dan memilih format yang salah membuat alur kerja Anda lebih sulit dari yang seharusnya.
HEX: Web Standar
Kode warna heksadesimal seperti#667eeaadalah format paling umum dalam pengembangan web. Mereka mengkodekan nilai merah, hijau, dan biru (0–255) sebagai dua digit angka hex yang digabungkan menjadi string enam karakter. Formatnya ringkas, mudah disalin, dan didukung secara universal dalam CSS, HTML, dan alat desain.
Jika ketiga pasangan angkanya sama, kodenya dapat dipersingkat:#ffffffmenjadi#fff. Singgungan ini berfungsi di semua browser dan praprosesor utama.
RGB: Transparansi dan Kontrol Terprogram
RGB (dan variannya RGBA) menjadi format pilihan saat Anda membutuhkan transparansi atau saat Anda menghitung warna secara terprogram.rgba(102, 126, 234, 0,5)memberikan warna Anda opasitas 50% — tidak mungkin diungkapkan secara langsung dalam HEX (walaupun HEX mendukung bentuk 8 karakter seperti#667eea80yang hanya diketahui oleh sedikit pengembang).
HSL: Senjata Rahasia Pembuat Palet
HSL (Hue, Saturation, Lightness) adalah yang paling banyakdapat dibaca manusiaformat warna. Hue adalah sudut (0–360°) pada roda warna. Saturasi adalah seberapa jelas warnanya. Terang adalah seberapa terang atau gelapnya.
Hal ini membuat pembuatan palet menjadi mudah. Untuk membuat 10 corak warna yang sama untuk desain sistem:
- Jaga agar H dan S tetap sama
- Setel L ke: 10, 20, 30, 40, 50, 60, 70, 80, 90, 95
- Anda sekarang memiliki skala warna 10 langkah yang lengkap
Aksesibilitas: Rasio Kontras
Standar aksesibilitas WCAG 2.1 AA memerlukan rasio kontras 4,5:1 antara teks dan latar belakang untuk teks berukuran normal, dan 3:1 untuk teks besar. Sebelum menyelesaikan kombinasi warna apa pun di UI Anda, uji rasio kontrasnya. Rasio kontras yang gagal adalah salah satu pelanggaran aksesibilitas paling umum dalam desain web.
| Standar | Teks Biasa | Teks Besar (18pt+) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Mengapa warna terlihat berbeda saat dicetak dan di layar?
Layarnya menggunakan model RGB (aditif cahaya). Printer menggunakan CMYK (tinta subtraktif). Warna HEX yang sama dapat terlihat sangat berbeda saat dicetak. Untuk pekerjaan warna yang akurat dalam pencetakan, konversikan ke CMYK dengan alat profesional seperti Adobe Illustrator atau InDesign.
Apa sebenarnya fungsi alat pipet itu?
Eyedropper menggunakan EyeDropper API browser Anda untuk mengambil sampel warna piksel dari mana saja di layar Anda — bukan hanya jendela browser. Ia membaca nilai RGB yang tepat dari piksel mana pun dan mengonversinya ke ketiga format secara instan.