Pemilih Warna

Setiap warna di halaman ini berada dalam sRGB, ruang warna bawaan web sejak browser mengadopsinya di akhir tahun 1990-an. Layar mencampur cahaya merah, hijau, dan biru, dan setiap kanal memiliki 256 tingkat (0–255), sehingga menghasilkan 16.777.216 kemungkinan warna. RGB menuliskan ketiga angka itu secara langsung; HEX menuliskan tiga angka yang sama dalam basis 16, masing-masing dua digit, jadi #FF6600 berarti merah 255, hijau 102, biru 0. Singkatan tiga digit menggandakan setiap digit: #F60 sama dengan #FF6600.

HSL dan HSB (juga disebut HSV) menggambarkan warna yang sama dengan cara yang lebih mudah disesuaikan secara manual. Hue adalah sudut pada roda warna: 0° merah, 120° hijau, 240° biru. Perbedaannya ada pada angka terakhir. Pada HSL, kecerahan (lightness) 100% selalu putih dan 50% adalah versi hue yang paling murni; pada HSB, brightness 100% adalah hue murni dan putih memerlukan saturasi 0%. Aplikasi desain seperti Photoshop dan Figma memakai HSB pada pemilih warnanya, sedangkan CSS memahami hsl() secara bawaan, itulah sebabnya keduanya tercantum di atas.

Layar menambahkan cahaya; printer menguranginya dengan tinta cyan, magenta, kuning, dan hitam. Kedua sistem mencakup rentang warna yang berbeda, yang disebut gamut. Warna layar yang sangat jenuh, seperti hijau RGB yang terang, biru elektrik, atau oranye neon, berada di luar jangkauan tinta proses, sehingga hasil cetaknya lebih kusam daripada yang terlihat di monitor.

Angka CMYK di sini memakai konversi matematis sederhana tanpa profil ICC, yang berguna untuk arahan kasar tetapi tidak untuk cetak produksi. Percetakan mengonversi dengan profil untuk kertas dan mesin cetaknya, seperti FOGRA39 di Eropa atau GRACoL di Amerika Serikat, dan warna RGB yang sama bisa menghasilkan persentase tinta yang berbeda pada masing-masing profil. Untuk pekerjaan cetak, kirimkan nilai RGB atau HEX bersama profil yang diminta percetakan Anda.

WCAG 2.1 membandingkan luminans relatif dua warna: warna yang lebih terang ditambah 0,05, dibagi warna yang lebih gelap ditambah 0,05. Hasilnya berkisar dari 1:1 (warna identik) hingga 21:1 (hitam di atas putih). Level AA mensyaratkan minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar, yaitu 18 poin atau 14 poin tebal; level AAA menaikkannya menjadi 7:1 dan 4,5:1. Bagian antarmuka seperti garis tepi kolom input dan ikon memerlukan 3:1 terhadap sekelilingnya menurut kriteria keberhasilan 1.4.11.

Luminans memberi bobot jauh lebih besar pada hijau daripada biru, karena mata paling peka terhadap hijau. Itulah sebabnya teks kuning di atas putih gagal telak, sedangkan biru tua di atas putih lolos dengan mudah, meskipun kedua warna tampak sama-sama jenuh. Logo dan teks yang murni dekoratif dikecualikan dari aturan ini.

Palet gambar membaca file Anda dengan canvas browser, memperkecilnya menjadi paling banyak 200 piksel pada sisi terpanjang, lalu mengelompokkan piksel yang mirip dengan metode median-cut yang dijelaskan Paul Heckbert pada 1982: rentang warna dibagi berulang kali di sepanjang kanalnya yang paling lebar hingga tersisa enam kelompok, dan rata-rata setiap kelompok menjadi satu swatch. Piksel transparan diabaikan, jadi logo dengan latar belakang transparan menghasilkan warna logonya saja.

Setelah Anda mendapatkan warnanya, logo datar sering kali lebih baik dijadikan vektor. Konverter gambar ke SVG menelusurinya menjadi bentuk-bentuk yang mempertahankan warna persis ini, dan jika Anda sedang mendesain header kanal, pengubah ukuran banner YouTube menyesuaikan karya Anda ke 2560 × 1440 dengan memperhatikan area aman.