CSS-HSL-färger

HSL-värden

I CSS kan du använda nyans, saturation och ljushet (HSL) för att specificera färg, i följande format:

hsla(nyans, färgintensitet, ljushet)

Färgton (nyans）är grader från 0 till 360 på färgcirkeln. 0 är röd, 120 är grön, och 240 är blå.

Sättning (färgintensitet）är en procentandel, 0% betyder grå skugga, och 100% är full färg.

Ljushet (ljushet）är också en procentandel, 0% är svart, 50% är inte ljus eller mörk, och 100% är vit.

Prova genom att blanda följande HSL-värden:

　

NYANS

0

FÄRGINTENSITET

100%

LJUSSHET

50%

Exempel

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

Prova själv

Sättning

Sättning kan beskrivas som färgens styrka.

100% är ren färg, utan grå skugga

50% är 50% grått, men du kan fortfarande se färgen.

0% är helt grått, och du kan inte se färgen.

Exempel

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

Prova själv

Ljushet

Färgens ljus- och mörkhet kan beskrivas som hur mycket ljus som tilldelas färgen, där 0% betyder inte ljus (svart), 50% betyder 50% ljus (inte för mörk eller ljus), och 100% betyder full ljus (vit).

Exempel

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

Prova själv

Vanligtvis definieras grå skuggor genom att sätta nyans och saturation till 0, och justera ljusstyrkan från 0% till 100% för att få djupare/ ljusare skuggor:

Exempel

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

Prova själv

HSLA-värden

HSLA-färgvärden är en utökning av HSL-färgvärden med Alpha-kanal - den specificerar färgens opacitet.

HSLA-färgvärden specificeras som:

hsla(nyans, färgintensitet, ljushet, alpha)

alpha Parametrarna är numeriska värden mellan 0.0 (fullt genomskinlig) och 1.0 (inte genomskinlig alls):

Prova genom att blanda följande HSLA-värden:

　

NYANS

0

FÄRGINTENSITET

100%

LJUSSHET

50%

ALPHA

0.5

Exempel

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)

Prova själv