Hex, RGB, HSL dan CMYK: kode warna dijelaskan sebagaimana mestinya

Kenapa HSL yang layak dipelajari

RGB menjelaskan warna sebagaimana layar menghasilkannya — tiga cahaya pada tiga tingkat kekuatan — yang merupakan gambaran perangkat kerasnya, bukan gambaran apa yang Anda lihat. Ia nyaris tak berguna untuk keputusan desain. Minta versi yang sedikit lebih gelap dari #3B82F6 dan RGB tidak memberi jawaban yang gamblang. Tanyakan mana dari dua warna yang lebih jenuh, dan Anda harus berpikir dulu.

HSL menjelaskan warna sebagaimana orang membicarakannya. Rona adalah posisi pada roda warna dari 0 sampai 360 derajat: merah di 0, hijau di 120, biru di 240. Kejenuhan berjalan dari 0% (abu-abu) sampai 100% (pekat). Terang berjalan dari 0% (hitam) melalui 50% (warna murninya) sampai 100% (putih). Masing-masing adalah tombol tersendiri, dan tiap tombol mengerjakan tepat satu hal.

• Corak lebih gelap dari warna yang sama. Pertahankan rona dan kejenuhan, turunkan terangnya. hsl(217, 91%, 60%) menjadi hsl(217, 91%, 45%) — sebuah keadaan tunjuk, selesai.
• Versi lembut untuk latar. Pertahankan rona dan terang, turunkan kejenuhan ke 15%. Warnanya tetap terbaca sebagai bagian dari keluarga yang sama.
• Aksen pelengkap. Tambahkan 180 pada ronanya. Tambahkan 30 untuk tetangga yang menyelaraskan alih-alih mengontraskan.
• Tangga corak lengkap untuk sistem desain. Satu rona, satu kejenuhan, terang pada 95, 90, 80, 65, 50, 40, 30, 20. Itu delapan tingkat dari satu keputusan saja.
• Palet yang menyatu. Pilih tiga atau empat rona berjarak sama di roda warna dan jaga kejenuhan serta terangnya tetap. Warna yang dipilih begini otomatis cocok satu sama lain.

Tidak satu pun dari itu tersedia dalam hex atau RGB tanpa pengubahan, dan itulah alasan praktis untuk melewatkan warna merek Anda sekali lewat pengubah RGB ke HSL lalu berpikir dalam ruang itu. Pembangkit palet menerapkan logika rotasi rona yang sama — dalam ruang warna perseptual, sehingga terangnya benar-benar tetap sama — bila Anda lebih suka mulai dari hasil daripada dari hitungannya.

CMYK adalah jenis pengubahan yang berbeda

Tiga notasi pertama adalah gambaran yang saling menggantikan atas hal yang sama. CMYK bukan, dan di sinilah warna benar-benar hilang alih-alih sekadar dituliskan ulang. RGB bersifat menjumlah: layar memancarkan cahaya merah, hijau dan biru, dan ketiganya pada kekuatan penuh menghasilkan putih. CMYK bersifat mengurangi: tinta sian, magenta, kuning dan hitam menyerap cahaya dari kertas putih, dan makin banyak tinta makin gelap.

Akibatnya, himpunan warna yang bisa dihasilkan tinta lebih kecil daripada yang bisa dipancarkan layar, dan celahnya paling lebar persis di tempat para perancang gemar bekerja. Biru pekat, hijau menyala, oranye membara dan segala yang neon ada di layar dan tak punya padanan dalam tinta. Sebuah pengubahan harus menggantinya dengan warna tercetak terdekat, dan di atas kertas itu terlihat lebih datar daripada yang Anda setujui di monitor.

Dari situ lahir dua kebiasaan praktis. Periksa warna merek utama Anda di pengubah RGB ke CMYK sebelum memutuskannya untuk apa pun yang akan dicetak, supaya masalah gamut ketahuan di tahap desain dan bukan di tahap contoh cetak. Dan untuk bidang hitam yang luas, jangan pakai hitam pelat tunggal: hitam kaya yang mencampurkan sedikit sian, magenta dan kuning menghindari abu-abu pucat yang dihasilkan hitam tunggal pada bidang besar.

Mengambil warna dari sebuah gambar

Sering kali warna yang Anda inginkan sudah ada di dalam sebuah foto, tangkapan layar situs pesaing, atau logo yang dikirim seseorang sebagai PNG tanpa panduan merek apa pun. Pembangkit palet punya pipet yang membaca nilai persis piksel mana pun pada gambar yang Anda buka; tempelkan kode itu ke pengambil warna untuk mendapatkan keempat notasi sekaligus.

Dua peringatan saat mengambil dari foto. Kompresi JPEG mengubah warna secara halus, terutama di tepian dan bidang rata, jadi piksel yang Anda ambil bisa jadi artefak kompresi alih-alih warna sesungguhnya — ambillah dari tengah bidang rata yang luas, bukan dekat sebuah batas. Dan sebuah foto membawa pencahayaan saat ia diambil, sehingga merah merek yang difoto di bawah lampu dalam ruang yang hangat terambil sebagai oranye. Untuk logo, mintalah berkas vektornya atau kode hex yang sebenarnya; pengambilan warna dipakai bila tidak ada yang lebih baik.

Kontras, dan angka-angka yang penting

Notasi apa pun yang Anda pakai, pilihan warna dibatasi oleh keterbacaan. Panduan aksesibilitas menyatakannya sebagai rasio kontras antara teks dan latarnya: setidaknya 4,5:1 untuk teks tubuh biasa, dan 3:1 untuk teks besar — kira-kira 24 px, atau 19 px bila tebal — serta untuk batas tampak kendali seperti tombol dan bidang isian.

Di sini HSL hanya membantu sebagai panduan kasar, karena perhitungannya didasarkan pada luminans relatif — seberapa terang sebuah warna benar-benar tampak — bukan pada terang HSL. Pada terang HSL yang sama, kuning jauh lebih terang daripada biru: #FFFF00 di atas #0000FF sekitar 8:1. Dan dua warna jenuh penuh pada terang yang sama — merah murni dan hijau murni pada 50% — tampak sangat berbeda tetapi hanya mencapai sekitar 2,9:1, yang gagal bahkan untuk batas minimum 3:1 dan lebih sulit lagi bagi orang dengan buta warna merah-hijau. Kegagalan tunggal itu menjelaskan sebagian besar antarmuka yang tidak dapat diakses; memeriksa rasio sebenarnya alih-alih memercayai perbedaan rona mencegahnya.