Home » HTML » [Duplikat]Warna HSL dan HSLA di HTML

[Duplikat]Warna HSL dan HSLA di HTML

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Nilai warna 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(warna), saturation(kejenuhan), dan lightness(kecerahan) (HSL) dalam bentuk:

hsl (hue, saturation, lightness)

Corak warna adalah derajat pada roda warna dari 0 hingga 360. Jika dijabarkan jadi seperti ini, 0 berwarna merah, 120 berwarna hijau, dan 240 berwarna biru.

Saturasi adalah nilai persentase, yang jika dijabarkan jadi seperti berikut, 0% berarti warna abu-abu, dan 100% adalah warna penuh.

Lightness juga merupakan nilai persentase, yang jika dijabarkan jadi seperti berikut, 0% hitam, dan 100% putih.

Berikut ini merupakan contoh campuran warna HSL :

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>

Kejenuhan(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 bisa 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% berarti benar-benar abu-abu</p>

</body>
</html>

Kecerahan(Lightness)

Terangnya suatu warna dapat digambarkan sebagai seberapa banyak cahaya yang ingin kita berikan pada warna tersebut, 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>

Bayangan Abu-Abu/Shades of Gray

Warna 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%, 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 adalah 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):

Berikut ini merupakan contoh campuran warna HSLA :

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>

You may also like