Pemilih Warna

Format-format warna, dan kapan masing-masing tepat

Hex dan rgb() adalah hal yang sama dengan penulisan berbeda: tiga nilai kanal sebagaimana layar menampilkannya. Keduanya tepat dan dipahami di mana-mana, tetapi tidak memberi tahu apa pun tentang bagaimana sebuah warna terlihat di samping warna lain.

hsl() menyusun ulang informasi yang sama menjadi hue, saturasi, dan lightness, yang lebih mudah dinalar - putar hue-nya, pertahankan sisanya - dan itulah sebabnya format ini menjadi cara bawaan membangun palet di CSS. hsv() adalah saudaranya yang dipakai pemilih warna di sebagian besar aplikasi grafis.

oklch() adalah yang layak dipelajari jika Anda belum mengenalnya. cmyk() disertakan sebagai referensi dan sebaiknya dianggap perkiraan, karena konversi sebenarnya bergantung pada tinta, kertas, dan profil output; nilai di sini memakai rumus aritmetika standar, berguna untuk gambaran kasar, bukan untuk dikirim ke percetakan.

Mengapa OKLCH berbeda

Lightness pada HSL adalah rata-rata geometris dari kanal-kanalnya, bukan ukuran seberapa terang warna itu terlihat. Kuning murni dan biru murni sama-sama bernilai lightness 50% di HSL, padahal di mata yang satu hampir putih dan yang lain hampir hitam. Karena itu setiap palet yang dibuat dengan lightness HSL tetap selalu hasilnya tidak rata, lalu dikoreksi manual satu per satu sampai terlihat pas.

OKLCH dibangun di atas ruang warna perseptual Oklab, tempat langkah numerik yang sama kira-kira sesuai dengan perbedaan yang terlihat sama. Pertahankan lightness yang sama di berbagai hue dan warnanya benar-benar tampak sama terang; ubah secara merata dan Anda mendapatkan skala yang rata. Inilah yang membuatnya berguna untuk membuat tint dan shade, menyusun pasangan warna yang aksesibel, dan menginterpolasi dua warna tanpa abu-abu keruh yang muncul di tengah campuran RGB.

Satu catatan: OKLCH bisa menyatakan warna di luar gamut sRGB, dan warna itu akan dipotong saat ditampilkan di layar biasa. Ini muncul pada chroma tinggi di lightness ekstrem, dan akibatnya dua nilai OKLCH yang berbeda tampil persis sama.

Membaca rasio kontras

Kontras dihitung dengan rumus WCAG 2: luminans relatif setiap warna dengan kanal sRGB yang dilinearkan, lalu warna yang lebih terang ditambah 0,05 dibagi warna yang lebih gelap ditambah 0,05. Hasilnya berkisar dari 1:1 untuk dua warna yang sama hingga 21:1 untuk hitam di atas putih.

Ambang batasnya adalah 4,5:1 untuk teks isi biasa di level AA; 3:1 untuk teks besar - sekitar 24px, atau 19px tebal - serta komponen antarmuka dan grafik yang bermakna; dan 7:1 untuk AAA. Rasio terhadap putih dan hitam sama-sama ditampilkan karena yang Anda perlukan bergantung pada latar tempat warna itu berada, dan warna yang gagal di atas putih sering kali lolos dengan mudah di atas hitam.

Rumus ini punya kelemahan yang sudah diketahui, jadi sebaiknya jangan anggap angkanya sebagai jawaban lengkap. Rumus ini secara sistematis melebih-lebihkan kontras teks terang di latar gelap, itulah sebabnya ada tema gelap yang lolos di atas kertas tetapi melelahkan dibaca, dan tidak memperhitungkan ketebalan atau ukuran huruf selain satu ambang teks besar, sehingga huruf yang sangat tipis tetapi lolos masih bisa sulit dibaca. Metrik penerusnya, APCA, mengatasi keduanya tetapi belum diwajibkan pedoman. Penuhi rasionya, lalu lihat sendiri hasilnya.

Alpha, dan hex delapan digit

Hex bisa membawa alpha sebagai kanal keempat: #RRGGBBAA dalam bentuk lengkap, atau #RGBA dalam bentuk singkat. Keduanya didukung semua browser saat ini, dan keduanya diterima di sini.

Ada dua hal yang sering salah. Pertama, urutan kanal - beberapa platform, termasuk Android, menulis alpha di depan sebagai #AARRGGBB, sehingga nilai yang disalin dari alat seperti itu lalu ditempel ke CSS menghasilkan warna yang salah tanpa pesan error. Kedua, alpha ditulis dalam heksadesimal, jadi opasitas 50% adalah 80, bukan 50; sintaks modern rgb(0 0 0 / 50%) menghindari hitungan itu sepenuhnya dan lebih mudah dibaca enam bulan kemudian.

Apa yang sebenarnya dijelaskan sebuah nilai warna

Triplet heksadesimal bukan warna, melainkan instruksi untuk layar. #CC0000 berarti nyalakan kanal merah pada 80% dari maksimumnya dan kanal lain nol, dan apa yang dilihat orang bergantung pada panelnya, kalibrasinya, cahaya sekitar, serta ruang warna tempat angka itu ditafsirkan.

Ruang warna itu adalah sRGB kecuali dinyatakan lain. sRGB distandarkan pada 1996 untuk menggambarkan monitor CRT pada masa itu, dan bertahan karena web memerlukan satu asumsi yang bisa dipakai semua orang. Layar ponsel dan laptop modern mencakup rentang yang lebih luas daripada sRGB, itulah sebabnya gambar bertanda Display P3 tampak lebih jenuh daripada angka yang sama yang ditafsirkan sebagai sRGB.

Ada satu kehalusan lagi yang tersembunyi di dalam angkanya: sRGB tidak linear. Nilai 128 bukan setengah terang dari 255, karena encoding-nya memiliki kurva gamma yang memberi lebih banyak presisi pada nada gelap, tempat penglihatan manusia lebih peka. Inilah sebabnya merata-ratakan dua nilai heksadesimal per kanal menghasilkan warna yang lebih keruh daripada mencampur warna yang sama di ruang linear, dan mengapa rumus kontras melinearkan kanal sebelum melakukan perhitungan apa pun.

Membangun palet yang berguna dari satu warna

Sebagian besar palet antarmuka terdiri dari beberapa hue yang masing-masing dinyatakan dalam beberapa tingkat lightness: latar, permukaan halus, garis tepi, warna teks yang redup, warna merek yang pekat, serta satu atau dua nada lebih gelap untuk keadaan hover dan aktif. Sembilan sampai sebelas tingkat per hue adalah pilihan yang umum karena satu definisi bisa mencakup tema terang dan gelap sekaligus.

Metode yang berhasil adalah menetapkan lightness perseptual tiap tingkat agar sama di semua hue, lalu membiarkan chroma yang berubah. Tingkat 500 dari biru, hijau, dan merah harus terasa sama beratnya di halaman; jika salah satunya menonjol, skalanya akan terlihat timpang di mana pun dipakai. Melakukannya di OKLCH berarti angkanya yang bekerja; melakukannya di HSL berarti mengoreksi setiap warna dengan mata.

Chroma biasanya harus dikurangi di kedua ujung. Warna yang sangat terang dan sangat gelap tidak bisa menahan saturasi tinggi di dalam gamut sRGB, sehingga skala dengan chroma tetap akan terpotong di kedua ujungnya dan dua tingkat yang bersebelahan tampil identik.

Warna bukan satu-satunya saluran

Sekitar satu dari dua belas pria dan satu dari dua ratus wanita mengalami suatu bentuk defisiensi penglihatan warna, yang paling umum berupa kesulitan membedakan merah dari hijau. Sistem status yang dibangun hanya dengan merah dan hijau tidak terlihat oleh mereka, begitu pula grafik yang serinya hanya dibedakan oleh hue.

Solusinya adalah redundansi, bukan menghindari warna: padukan warna dengan bentuk, ikon, label, atau posisi. Pesan merah dengan ikon tanda seru dan kata Error berfungsi untuk semua orang; merah saja hanya berfungsi untuk sebagian besar orang. Untuk grafik, label langsung lebih baik daripada legenda, dan memvariasikan lightness selain hue menjaga seri tetap bisa dibedakan saat halaman dicetak hitam putih.

Rasio kontras juga berperan di sini, dan memeriksanya murah. Teks pada 4,5:1 dan elemen antarmuka pada 3:1 adalah ambang yang dipakai sebagian besar aturan pengadaan perangkat lunak dan audit aksesibilitas.

Tema gelap bukan sekadar pembalikan

Membalik semua warna menghasilkan tema gelap yang terasa salah, dengan alasan yang sebagian besar bersifat perseptual. Teks terang di latar gelap tampak melebar dan terbaca lebih berat, sehingga ketebalan yang sama terlihat lebih tebal; warna jenuh bergetar di atas permukaan gelap; dan hitam pekat dengan teks putih pekat menimbulkan efek halo yang melelahkan saat membaca teks panjang.

Penyesuaian yang lazim adalah memakai abu-abu sangat gelap alih-alih hitam, menurunkan saturasi warna aksen, mengandalkan permukaan yang lebih terang daripada bayangan untuk menunjukkan ketinggian karena bayangan tidak terlihat di atas hitam, dan sedikit menurunkan ketebalan huruf alih-alih menyamakannya persis dengan tema terang.

Kedua tema perlu diperiksa secara terpisah. Warna yang lolos kontras di atas putih sering kali gagal di atas permukaan gelap, dan sebaliknya, itulah sebabnya rasio di sini ditampilkan terhadap keduanya sekaligus.

Warna di CSS, dan cara menatanya

CSS modern menerima semua format ini secara langsung, termasuk oklch() dan sintaks berpemisah spasi dengan garis miring untuk alpha: rgb(0 0 0 / 50%). Sintaks itu layak dipakai karena terbaca tanpa ambiguitas dan karena alpha-nya berupa persentase, bukan pasangan heksadesimal yang tidak bisa dihitung siapa pun di kepala.

Cara menata warna yang tahan lama adalah dua lapis custom property. Lapis pertama menamai palet secara harfiah - --blue-500, --grey-900 - dan lapis kedua menamai perannya: --color-text, --color-surface, --color-border, --color-accent. Komponen hanya merujuk peran, sehingga tema gelap menjadi pendefinisian ulang lapisan peran, bukan penyuntingan setiap komponen.

Dua fitur yang lebih baru mengubah apa yang mungkin dilakukan. color-mix() mencampur dua warna dengan rasio dan ruang warna yang dinyatakan, sehingga keadaan hover bisa diturunkan dari warna dasar alih-alih dipilih manual. Dan sintaks warna relatif memungkinkan Anda membangun varian dari nilai yang sudah ada dengan menyesuaikan satu kanal, sehingga skalanya tetap selaras dengan warna asalnya. Keduanya didukung browser saat ini, dan keduanya jauh lebih mudah dinalar di OKLCH daripada di HSL.