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 (hue, saturation, lightness)
Hue adalah derajat pada roda warna dari 0 hingga 360. 0 berwarna merah, 120 berwarna hijau, dan 240 berwarna biru.
Saturation adalah nilai persentase, 0% berarti warna abu-abu, dan 100% adalah warna penuh.
Lightness juga merupakan nilai persentase, 0% hitam, dan 100% putih.
Contoh:
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1> <h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1> <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1> <h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1> <h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1> </body> </html>
Saturation
Saturasi dapat digambarkan sebagai intensitas dari suatu warna.
100% adalah warna murni, tidak ada corak abu-abu
50% adalah 50% abu-abu, tetapi masih bisa melihat warnanya.
0% benar-benar berwarna abu-abu, dan tidak dapat lagi melihat warnanya.
Contoh:
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1> <h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1> <h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1> <h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1> <h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1> <p>Dengan menggunakan warna HSL, lebih kecil saturasi berarti lebih sedikit warna dan 0% akan berwarnna abu-abu.</p> </body> </html>
Lightness
Terangnya suatu warna dapat digambarkan sebagai seberapa banyak cahaya yang ingin diberikan pada warna, di mana 0% berarti tidak ada terang (hitam), 50% berarti 50% terang (bukan gelap atau terang) 100% berarti terang penuh (putih).
Contoh:
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1> <h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1> <h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1> <h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1> <p>Dengan warna HSL, 0% lightness berarti hitam, dan 100 lightness berarti putih.</p> </body> </html>
Shades of Gray
Bayangan abu-abu sering kali ditentukan dengan mengatur hue dan saturation ke 0, dan menyesuaikan lightness dari 0% hingga 100% untuk mendapatkan bayangan yang lebih gelap / terang.
Contoh:
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1> <h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1> <h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1> <h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1> <h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1> <h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1> </body> </html>
Nilai Warna HSLA
Nilai warna HSLA merupakan perpanjangan dari nilai warna HSL dengan saluran Alpha – yang menentukan opasitas suatu warna.
Nilai warna HSLA ditentukan dengan:
hsla (hue, saturation, lightness, alpha)
Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali).
Contoh:
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1> </body> </html>
