Warna CSS HSL
HSL adalah singkatan dari Hue, Saturation, dan Lightness.
Nilai HSL
Di CSS, 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.
Terang juga persentase, 0% hitam, 50% tidak terang atau gelap, 100% putih
Percobaan dengan mencampur nilai HSL di bawah ini:
hsl(0, 100%, 50%)
WARNA
KEJENUHAN
KERINGANAN
Contoh
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.
Contoh
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).
Contoh
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:
Contoh
Nilai HSLA
Nilai warna HSLA adalah perpanjangan dari nilai warna HSL dengan saluran alfa - yang menentukan opasitas 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:
hsla (0, 100%, 50%, 0,5)
WARNA
KEJENUHAN
KERINGANAN
ALFA