Warna HSL CSS

Nilai HSL

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

hsla(hue, saturation, lightness)

Warna (hue）adalah derajat dari 0 hingga 360 derajat di alat pengejar warna. 0 adalah merah, 120 adalah hijau, 240 adalah biru.

Kepadatan (saturation）adalah nilai persen, di mana 0% menyatakan bayangan abu-abu, dan 100% adalah warna penuh.

Kecerahan (lightness）juga dalam bentuk persen, 0% adalah hitam, 50% adalah yang tak cerah dan tak 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%)

Cuba 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%)

Cuba Sendiri

Kecerahan

Kecerahan warna dapat dijelaskan sebagai berapa banyak cahaya yang akan diberikan warna, di mana 0% menyatakan yang gelap (hitam), 50% menyatakan 50% cerah (tidak kotor dan tak terang), 100% menyatakan yang penuh cahaya (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%)

Cuba Sendiri

Biasanya, warna abu-abu dapat ditentukan dengan menetapkan warna dan kepadatan menjadi 0, dan mengatur kecerahan dari 0% hingga 100% untuk mendapatkan bayangan yang lebih mendalam/lebih cerah:

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%)

Cuba Sendiri

Nilai HSLA

Nilai warna HSLA adalah ekstensi warna HSL yang mempunyai channel Alpha - ia menentukan kecerahan warna.

Nilai warna HSLA ditetapkan:

hsla(hue, saturation, lightness, alpha)

alpha Parameter adalah nombor antara 0.0 (sangat transparen) dan 1.0 (tidak transparen):

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)

Cuba Sendiri