CSS HSL värit

HSL-arvot

CSS:ssa voidaan käyttää sävyä, saturaatiota ja kirkkautta (HSL) värien määrittämiseen, muodossa:

hsla(hue, saturation, lightness)

Kuvat (hue）on asteikko 0-360 asteesta väripyörällä. 0 on punainen, 120 on vihreä, ja 240 on sininen.

Saturaatio (saturation）on prosenttiosuus, 0% tarkoittaa harmaata varjoa, ja 100% on täydellinen väri.

Kirkkaus (lightness）on myös prosenttiosuus, 0% on musta, 50% on sekä ei liian tummaa eikä liian valoa, ja 100% on valkoinen.

Kokeile seuraavien HSL-arvojen sekoittamista:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

Esimerkki

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

Kokeile itse

Saturaatio

Saturaatio voidaan kuvata väriä voimakkuutena.

100% on puhdas väri, eikä ole harmaata varjoa

50% on 50% harmaa, mutta väriä näkyy vielä.

0% on täysin harmaa, ettei väriä näy.

Esimerkki

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

Kokeile itse

Kirkkaus

Värien kirkkaus voidaan kuvata siitä, kuinka paljon valoa annetaan väriä varten, joista 0% tarkoittaa harmaata (mustaa), 50% tarkoittaa 50% kirkkautta (ei liian tummaa eikä liian valoa), ja 100% tarkoittaa täyttä valoa (valkoinen).

Esimerkki

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

Kokeile itse

Yleensä harmaa varjostus määritetään sävytyksen ja saturaation asettamisella 0, ja varjojen syvyyden tai keveyden säätämällä 0%:sta 100%:iin:

Esimerkki

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

Kokeile itse

HSLA arvot

HSLA väriarvo on HSL väriarvon laajennus, jossa on Alpha-kanava - se määrittää väriä läpinäkyvyydessä.

HSLA väriarvo määritetään:

hsla(hue, saturation, lightness, alpha)

alpha Parametrit ovat lukuja, jotka ovat välillä 0.0 (täysin läpinäkyvä) ja 1.0 (ei läpinäkyvyyttä):

Kokeile seuraavien HSLA-arvojen yhdistelmää:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

Esimerkki

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)

Kokeile itse