Nilai HSL
Dalam CSS, 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 persentase, 0% hitam, 50% bukan terang atau gelap, 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> <p> Dalam HTML, Kita bisa menentukan warna menggunakan nilai HSL. </p> </body> </html>
Saturation
Saturasi dapat digambarkan sebagai intensitas suatu warna.
100% adalah warna murni, tidak ada corak abu-abu
50% adalah 50% abu-abu, tetapi kita masih bisa melihat warnanya.
0% benar-benar abu-abu, kita 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 warna HSL, lebih sedikit saturasi berarti lebih sedikit warna. 0% benar-benar abu-abu. </p> </body> </html>
Lightness
Terangnya suatu warna dapat digambarkan sebagai seberapa banyak cahaya yang ingin kita berikan 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>
Nuansa abu-abu sering kali ditentukan dengan menyetel corak dan saturasi ke 0, dan menyesuaikan kecerahan dari 0% hingga 100% untuk mendapatkan bayangan yang lebih gelap / terang:
Contoh :
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1> <h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1> <h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1> <h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1> <h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1> <h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1> <p> Dengan warna HSL, bayangan abu-abu dibuat dengan menyetel saturasi ke 0%, dan menyesuaikan kecerahan sesuai dengan seberapa gelap / terang warna abu-abu seharusnya. </p> </body> </html>
Nilai HSLA
Nilai warna HSLA merupakan perpanjangan dari nilai warna HSL dengan saluran alfa – 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> <p> membuat warna transparan dengan menggunakan nilai warna HSLA. </p> </body> </html>
