kursplan

CSS reference manual

CSS egenskap

Elective course

Course recommendation:

CodeW3C.com's Urklapp

CSS hsl() function

Föregående sida CSS grayscale() funktion
Nästa sida CSS hue-rotate() funktion
Åter till föregående nivå CSS function reference manual

Definition and usage

CSS hsl() The function uses the hue-saturation-lightness model (HSL) to specify color. An optional alpha component (representing the color's opacity) can also be added.

Tip:HSL represents hue (Hue), saturation (Saturation) and lightness (Lightness), which is the cylindrical coordinate representation of color.

Note:hsla() The function is hsl() Alias of the function. It is recommended to use hsl() Function.

Instance

Example 1

Define different HSL(A) colors:

#p1 {background-color:hsl(120 100% 50%);} /* green */
#p2 {background-color:hsl(120 100% 75%);} /* light green */
#p3 {background-color:hsl(120 100% 25%);} /* dark green */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* transparent dark green */
#p5 {background-color:hsl(120 60% 70%);} /* soft green */
#p6 {background-color:hsl(290 100% 50%);} /* purple */
#p7 {background-color:hsl(290 60% 70%);} /* soft purple */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* transparent soft purple */

Prova själv

Exempel 2

Använd gamla grammatiken med komma-separerade värden:

#p1 {background-color:hsl(120, 100%, 50%);} /* En grön */
#p2 {background-color:hsl(120, 100%, 75%);} /* En ljusgrön */
#p3 {background-color:hsl(120, 100%, 25%);} /* En mörkgrön */
#p4 {background-color:hsl(120, 60%, 70%);} /* En mjuk grön */
#p5 {background-color:hsl(290, 100%, 50%);} /* En lila */
#p6 {background-color:hsl(290, 60%, 70%);} /* En mjuk lila */

Prova själv

CSS-syntax

Absolut värdesyntax

hsl(nyans saturation ljushet / A)

Värde	Beskrivning
nyans	Obligatoriskt. Definierar graden på färgcirkeln (från 0 till 360) - 0 (eller 360) är röd, 120 är grön, 240 är blå.
saturation	Obligatoriskt. Definierar färgens saturation; 0% är grå, 100% är färgad (full saturation). Man kan också använda None (som är lika med 0%).
ljushet	Obligatoriskt. Definierar ljushet; 0% är svart, 50% är normalt, 100% är vitt. Man kan också använda None (som är lika med 0%).
/ A	Valfritt. Representerar alpha-kanalvärdet för färgen (från 0% (eller 0) - helt genomskinlig till 100% (eller 100) - helt opåverkad). Man kan också använda None (som betyder att det inte finns någon alpha-kanal). Standardvärdet är 100%.

Relativ värdesyntax

hsl(from färg nyans saturation ljushet / A)

Värde	Beskrivning
from färg	Med nyckelordet from börjar, följt av en färgvärde som representerar den ursprungliga färgen. Detta är den ursprungliga färgen som relativa färger är baserade på.
nyans	Obligatoriskt. Definierar graden på färgcirkeln (från 0 till 360) - 0 (eller 360) är röd, 120 är grön, 240 är blå.
saturation	Obligatoriskt. Definierar färgens saturation; 0% är grå, 100% är färgad (full saturation). Man kan också använda None (som är lika med 0%).
ljushet	Obligatoriskt. Definierar ljushet; 0% är svart, 50% är normalt, 100% är vitt. Man kan också använda None (som är lika med 0%).
/ A	Valfritt. Representerar alpha-kanalvärdet för färgen (från 0% (eller 0) - helt genomskinlig till 100% (eller 100) - helt opåverkad). Man kan också använda None (som betyder att det inte finns någon alpha-kanal). Standardvärdet är 100%.