Tentang warna HSL

Warna HSL adalah model warna yang merepresentasikan warna dengan hue, saturation, dan lightness. Berbeda dari RGB yang langsung menentukan kekuatan cahaya merah, hijau, dan biru, HSL memisahkan corak warna, vividness, dan kecerahan, sehingga berguna untuk penyesuaian warna dan desain CSS.

Misalnya, warna utama seperti merah dapat ditampilkan sebagai berikut.

Untuk menyertakan transparansi, tambahkan nilai alfa. Misalnya, merah semi-transparan dapat ditulis sebagai hsl(0deg 100% 50% / 0.5).

Sebagai input, Anda dapat menggunakan notasi yang dipisahkan spasi hsl(0deg 100% 50%) serta notasi lama yang dipisahkan koma hsl(0deg, 100%, 50%).

Penanganan hue, saturation, dan lightness

Hue diperlakukan sebagai sudut, dan nilai lebih dari 360deg atau nilai negatif dinormalisasi ke rentang 0deg hingga 360deg. Misalnya, hsl(360deg 100% 50%) diperlakukan sebagai warna yang sama dengan hsl(0deg 100% 50%), dan hsl(-120deg 100% 50%) sebagai warna yang sama dengan hsl(240deg 100% 50%).

Saturation dan lightness diproses dalam rentang 0% hingga 100%. Jika saturation 0%, warna menjadi abu-abu akromatik tanpa bergantung pada hue. Jika lightness 0%, warna menjadi hitam; jika 100%, menjadi putih.

Perbedaan antara HSL dan RGB

RGB langsung menentukan komponen merah, hijau, dan biru, sehingga dekat dengan tampilan layar dan data gambar. HSL memisahkan hue, saturation, dan lightness, sehingga operasi seperti “membuat lebih terang dengan hue yang sama” atau “menurunkan hanya saturation” menjadi lebih mudah.

Namun, HSL bukan ruang warna yang sepenuhnya seragam secara persepsi. Jika ingin menangani kecerahan visual atau perbedaan warna dengan lebih mudah, ruang warna seperti Lab, LCH, Oklab, dan Oklch dapat digunakan.