Warna HTML HSL dan HSLA

HSL adalah singkatan dari Hue, Saturation, dan Lightness.

Nilai warna HSLA merupakan perpanjangan dari HSL dengan saluran Alpha (opacity).

Nilai Warna HSL

Dalam HTML, warna dapat ditentukan menggunakan hue, saturation, dan lightness (HSL) dalam bentuk:

hsl ( rona , saturasi , kecerahan )

Hue adalah derajat pada roda warna dari 0 hingga 360. 0 adalah merah, 120 adalah hijau, dan 240 adalah biru.

Saturasi adalah nilai persentase, 0% berarti bayangan abu-abu, dan 100% adalah warna penuh.

Lightness juga merupakan nilai persentase, 0% hitam, dan 100% putih.

Percobaan dengan mencampur nilai HSL di bawah ini:

Kejenuhan

Saturasi dapat digambarkan sebagai intensitas warna.

100% adalah warna murni, tidak ada nuansa abu-abu

50% adalah 50% abu-abu, tetapi Anda masih dapat melihat warnanya.

0% benar-benar abu-abu, Anda tidak bisa lagi melihat warnanya.

Keringanan

Kecerahan suatu warna dapat digambarkan sebagai seberapa banyak cahaya yang ingin Anda berikan pada warna, di mana 0% berarti tidak ada cahaya (hitam), 50% berarti 50% terang (tidak gelap atau terang) 100% berarti terang penuh (putih).

Bayangan abu-abu

Nuansa abu-abu sering ditentukan dengan mengatur rona dan saturasi ke 0, dan menyesuaikan kecerahan dari 0% hingga 100% untuk mendapatkan rona yang lebih gelap/terang:

Nilai Warna HSLA

Nilai warna HSLA adalah perpanjangan dari nilai warna HSL dengan saluran Alpha - yang menentukan opacity untuk warna.

Nilai warna HSLA ditentukan dengan:

hsla( rona, saturasi , kecerahan, alfa )

Parameter alpha adalah angka antara 0.0 (sepenuhnya transparan) dan 1.0 (tidak transparan sama sekali):

Percobaan dengan mencampur nilai HSLA di bawah ini: