CSS hsl() funktion

Definition og brug

CSS' hsl() Funktionen bruger farvetone-saturation-lysstyrke-modellen (HSL) til at specificere farve. Der kan også tilføjes en valgfri alpha-komponent (der repræsenterer farvens gennemskinnelighed).

Tip:HSL repræsenterer farvetone (Hue), saturation (Saturation) og lysstyrke (Lightness), og det er en cirkulær koordinatsystemrepræsentation af farve.

Bemærk:hsla() Funktionen er hsl() Funktionens alias. Anbefales at bruge hsl() Funktion.

Eksempel

Eksempel 1

Definere forskellige HSL(A) farver:

#p1 {background-color:hsl(120 100% 50%);} /* 绿色 */
#p2 {background-color:hsl(120 100% 75%);} /* 浅绿色 */
#p3 {background-color:hsl(120 100% 25%);} /* 深绿色 */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* 半透明的深绿色 */
#p5 {background-color:hsl(120 60% 70%);} /* 柔和的绿色 */
#p6 {background-color:hsl(290 100% 50%);} /* 紫色 */
#p7 {background-color:hsl(290 60% 70%);} /* 柔和的紫色 */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* 半透明的柔和紫色 */

Prøv det selv

Eksempel 2

Brug af kommaadskilte værdier i den gamle syntaks:

#p1 {background-color:hsl(120, 100%, 50%);} /* Grøn */
#p2 {background-color:hsl(120, 100%, 75%);} /* Lys grøn */
#p3 {background-color:hsl(120, 100%, 25%);} /* Mørke grøn */
#p4 {background-color:hsl(120, 60%, 70%);} /* Blød grøn */
#p5 {background-color:hsl(290, 100%, 50%);} /* Lilla */
#p6 {background-color:hsl(290, 60%, 70%);} /* Blød lilla */

Prøv det selv

CSS-sprog

Absolut værdisprog

hsl(hue saturation lightness / A)
Værdi Beskrivelse
hue Obligatorisk. Definerer graden på farvereden (fra 0 til 360) - 0 (eller 360) er rød, 120 er grøn, 240 er blå.
saturation

Obligatorisk. Definerer farvens farvetone; 0% er grå, 100% er fuldfarvet (fuld farvetone).

Man kan også bruge None (som er det samme som 0%).
lightness

Obligatorisk. Definerer farvens lysstyrke; 0% er sort, 50% er normal, 100% er hvid.

Man kan også bruge None (som er det samme som 0%).
/ A

Valgfri. Angiver farvens alpha-kanalværdi (fra 0% (eller 0) - fuldstændig gennemsigtig til 100% (eller 100) - fuldstændig uigennemsigtig).

Man kan også bruge None (som betyder ingen alpha-kanal).

Standardværdien er 100%.

Relativ værdisprog

hsl(from color hue saturation lightness / A)
Værdi Beskrivelse
from color

Begynder med nøglen from, efterfulgt af en farveværdi, der repræsenterer den oprindelige farve.

Dette er den oprindelige farve, der er baseret på den relative farve.
hue Obligatorisk. Definerer graden på farvereden (fra 0 til 360) - 0 (eller 360) er rød, 120 er grøn, 240 er blå.
saturation

Obligatorisk. Definerer farvens farvetone; 0% er grå, 100% er fuldfarvet (fuld farvetone).

Man kan også bruge None (som er det samme som 0%).
lightness

Obligatorisk. Definerer farvens lysstyrke; 0% er sort, 50% er normal, 100% er hvid.

Man kan også bruge None (som er det samme som 0%).
/ A

Valgfri. Angiver farvens alpha-kanalværdi (fra 0% (eller 0) - fuldstændig gennemsigtig til 100% (eller 100) - fuldstændig uigennemsigtig).

Man kan også bruge None (som betyder ingen alpha-kanal).

Standardværdien er 100%.

Tekniske detaljer

Version: CSS3

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter funktionen.

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
med alpha Parametrens hsl()
65 79 52 12.1 52
Mellemrum adskilte parametre
65 79 52 12.1 52

Relaterede sider

Tilvejebringses guide:CSS HSL farve

Reference:CSS farver

Reference:CSS hwb() funktion

Reference:CSS lab() funktion

Reference:CSS lch() funktion

Reference:CSS oklab() funktion

Reference:CSS oklch() funktion