Warna HSL CSS

Nilai HSL

Dalam CSS, warna dapat ditentukan menggunakan nuansa, kepadatan, dan kecerahan (HSL) dengan format seperti berikut:

hsla(hue, saturation, lightness)

Nuansa (hue）adalah derajat dari 0 hingga 360 derajat di roda warna. 0 adalah merah, 120 adalah hijau, 240 adalah biru.

Kepadatan (saturation）adalah nilai persen, 0% berarti bayangan abu-abu, sementara 100% adalah warna penuh.

Kecerahan (lightness）juga berupa persen, 0% adalah hitam, 50% adalah keduanya tidak terang dan gelap, 100% adalah putih.

Silakan lakukan eksperimen dengan menggabungkan nilai HSL berikut:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

Contoh

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

Coba Sendiri

Kepadatan

Kepadatan dapat dijelaskan sebagai kekuatan warna.

100% adalah warna asli, tanpa bayangan abu-abu

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

0% adalah abu-abu penuh, Anda tidak dapat melihat warna lagi.

Contoh

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Coba Sendiri

Kecerahan

Kecerahan warna dapat dijelaskan sebagai berapa banyak cahaya yang akan diberikan warna, di mana 0% berarti tidak terang (hitam), 50% berarti 50% terang (tidak keduanya gelap atau terang), 100% berarti penuh terang (putih).

Contoh

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

Coba Sendiri

Biasanya dengan menetapkan nuansa dan kepadatan 0 untuk mendefinisikan bayangan abu-abu, dan mengatur kecerahan dari 0% hingga 100% untuk mendapatkan bayangan yang lebih mendalam / lebih terang:

Contoh

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

Coba Sendiri

Nilai HSLA

Nilai warna HSLA adalah ekspansi nilai warna HSL dengan jalur Alpha - ia menentukan kepadatan warna.

Nilai warna HSLA ditentukan adalah:

hsla(hue, saturation, lightness, alpha)

alpha Parameter adalah angka yang berada di antara 0.0 (sangat transparan) dan 1.0 (sangat tak transparan):

Silakan lakukan eksperimen dengan nilai HSLA berikut:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

Contoh

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

Coba Sendiri