Rona, saturasi, dan kecerahan

Dalam HSL, kuning dan biru sama-sama memiliki kecerahan 50%, tetapi menurut rumus luminans WCAG, kuning memantulkan cahaya hampir 13 kali lebih banyak daripada biru.

Mengubah kubus menjadi silinder

Angka RGB mudah digunakan oleh layar, tetapi sulit bagi manusia. Jika kamu ingin "biru yang sama, sedikit lebih terang", kamu harus mengubah ketiga kanal sekaligus dengan jumlah berbeda. HSL menata ulang warna sRGB yang sama agar pengaturannya sesuai dengan cara orang membicarakan warna. CSS Color 4 menjelaskannya sebagai model silinder: sudut rona mengelilingi bagian luar, sumbu pusat untuk kecerahan dari hitam sampai putih, dan jari-jari untuk saturasi, yaitu seberapa jauh warna dari abu-abu netral.

Bayangkan kubus RGB bertumpu pada sudut hitamnya, dengan putih tepat di atas. Sumbu abu-abu kini tegak. Jika dilihat dari atas, keenam sudut berwarna pekat, yaitu merah, kuning, hijau, sian, biru, dan magenta, membentuk cincin di sekitar sumbu. Pada HSL, cincin itu dibulatkan dan seluruh bangun direntangkan menjadi silinder. Pada model di atas, kamu bisa melihat hasilnya: cakram mendatar pada kecerahan terpilih dan irisan tegak pada rona terpilih beserta rona yang berlawanan. Klik di mana saja pada salah satu permukaan untuk memilih warnanya.

Rona

Rona adalah sudut dalam derajat. CSS Color 4 menetapkan titik awalnya: 0deg adalah merah sRGB, 120deg adalah hijau, 240deg adalah biru, dan 360deg kembali ke merah. Di tengah antara warna primer terdapat warna sekunder: 60deg kuning, 180deg sian, dan 300deg magenta. Karena berupa sudut, rona berulang setelah satu putaran. Rona 390deg sama dengan 30deg. Menambahkan 180deg pada rona apa pun membawamu ke warna di seberang lingkaran.

Saturasi dan kecerahan

Saturasi dinyatakan sebagai persentase. Pada 100%, warna berada di sisi luar silinder dan sepekat yang dimungkinkan sRGB pada tingkat kecerahan tersebut. Pada 0%, warna berada di sumbu pusat dan berupa abu-abu. Menurut CSS Color 4, rona saat itu tidak berpengaruh sama sekali, sehingga hsl(0deg 0% 50%) dan hsl(180deg 0% 50%) menghasilkan abu-abu yang sama. Kecerahan juga berupa persentase. Nilai 0% menghasilkan hitam untuk setiap rona, 100% menghasilkan putih untuk setiap rona, dan 50% memberikan versi rona yang paling pekat. Jadi, hsl(0deg 100% 50%) adalah merah yang sama dengan #ff0000, sedangkan hsl(120deg 100% 25%) adalah hijau gelap, rgb(0 128 0).

Saat HSL menyesatkan

HSL praktis, dan spesifikasi CSS menjelaskan keterbatasannya secara terbuka. Kecerahannya bukan kecerahan yang dilihat mata. Kuning, hsl(60deg 100% 50%), dan biru, hsl(240deg 100% 50%), memiliki L yang sama, yaitu 50%, tetapi kuning tampak jauh lebih terang. Rumus luminans WCAG menghasilkan 0.9278 untuk kuning itu dan 0.0722 untuk biru itu, dengan perbandingan hampir 13. Sudut rona juga tidak seragam secara visual: menurut spesifikasi, perubahan 30 derajat di antara warna biru tampak kecil, sedangkan perubahan yang sama antara kuning dan hijau tampak besar. Ruang warna CSS yang lebih baru, seperti oklch(), dirancang untuk mengatasinya. Untuk memeriksa keterbacaan teks, jangan mengandalkan kecerahan HSL. Gunakan rasio kontras yang akan kamu hitung pada unit 6.