CSS HSL farver

HSL værdi

I CSS kan du bruge farvetone, farvesaturation og lysstyrke (HSL) til at specificere farve, formatet er som følger:

hsla(nyans, mål, ligthed)

Farvetone (nyans)er grader fra 0 til 360 på farverhjulet. 0 er rød, 120 er grøn, og 240 er blå.

Farvesaturation (mål)er en procentsats, 0% betyder grå skygger, mens 100% er fuldfarve.

Lysstyrke (ligthed)er også en procentsats, 0% er sort, 50% er ikke mørk eller lys, og 100% er hvid.

Prøv følgende HSL-værdier til eksperimentering:

 

NYANS

0

MÅL

100%

LIGHED

50%

Eksempel

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

Prøv det selv

Farvesaturation

Farvesaturation kan beskrives som farvens styrke.

100% er ren farve, uden grå skygger

50% er 50% grå, men du kan stadig se farve.

0% er fuldstændig grå, og du kan ikke se farve.

Eksempel

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

Prøv det selv

Lysstyrke

Farvens lysstyrke kan beskrives som hvor meget lys der gives til farven, hvor 0% betyder ikke lys (sort), 50% betyder 50% lys (ikke mørk eller lys), og 100% betyder fuld lys (hvid).

Eksempel

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

Prøv det selv

Normalt defineres grå skygger ved at sætte farvetone og farvesaturation til 0, og justere lysstyrke fra 0% til 100% for at få dybere/længere skygger:

Eksempel

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

Prøv det selv

HSLA værdi

HSLA farveværdi er en udvidelse af HSL-farveværdi med Alpha-kanal - den specificerer farvens uigennemsigtighed.

HSLA farveværdi specificeret som:

hsla(nyans, mål, ligthed, alpha)

alpha Parametrene er tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (ikke gennemsigtig):

Prøv følgende HSLA-værdier for eksperimentering:

 

NYANS

0

MÅL

100%

LIGHED

50%

ALPHA

0.5

Eksempel

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)

Prøv det selv