Colori HSL CSS

Valore HSL

In CSS, è possibile specificare i colori utilizzando tono, saturazione e luminosità (HSL), nel formato seguente:

hsla(tono, saturazione, luminosità)

Tono (tono）è l'angolo in gradi da 0 a 360 sul cerchio delle colori. 0 è rosso, 120 è verde, 240 è blu.

Saturazione (saturazione）è un valore percentuale, 0% rappresenta l'ombra grigia, mentre 100% è il colore pieno.

Luminosità (luminosità）è anche un valore percentuale, 0% è nero, 50% è né chiaro né scuro, e 100% è bianco.

Prova a mescolare i seguenti valori HSL:

　

TONO

0

SATURAZIONE

100%

LUMINOSITÀ

50%

Esempio

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 da solo

Saturazione

La saturazione può essere descritta come l'intensità del colore.

100% è colore puro, senza ombra grigia

50% è 50% di grigio, ma si può ancora vedere il colore.

0% è completamente grigio, non si può vedere più il colore.

Esempio

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 da solo

Luminosità

La luminosità del colore può essere descritta come quanto luce si desidera dare al colore, dove 0% rappresenta non luminoso (nero), 50% rappresenta 50% di luminosità (né scuro né chiaro), e 100% rappresenta luminoso (bianco).

Esempio

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 da solo

Di solito, impostando il tono e la saturazione a 0 per definire l'ombra grigia e regolando la luminosità da 0% a 100% per ottenere ombre più profonde o più chiare:

Esempio

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 da solo

Valore HSLA

Il valore della colore HSLA è un'estensione del valore della colore HSL con canale alpha - specifica l'opacità del colore.

Il valore della colore HSLA è specificato come:

hsla(tono, saturazione, luminosità, alfa)

alfa I parametri sono numeri tra 0.0 (completamente trasparente) e 1.0 (completamente opaco):

Esegui esperimenti attraverso la mescolanza dei seguenti valori HSLA:

　

TONO

0

SATURAZIONE

100%

LUMINOSITÀ

50%

ALPHA

0.5

Esempio

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 da solo