scheda-delle-lezioni

Manuale di riferimento CSS

proprietà-CSS

Corso a scelta

Corso raccomandato:

CodeW3C.com Cassetta dei mestieri

Funzione CSS hsl()

Pagina precedente Funzione grayscale() CSS
Pagina successiva Funzione hue-rotate() CSS
Torna alla pagina precedente Manuale di riferimento delle funzioni CSS

Definizione e uso

CSS hsl() La funzione utilizza il modello di colore tono-saturazione-luminosità (HSL) per specificare il colore. Può anche aggiungere un componente alpha opzionale (che rappresenta la trasparenza del colore).

Suggerimento:HSL rappresenta il tono (Hue), la saturazione (Saturation) e la luminosità (Lightness), è una rappresentazione cilindrica del colore.

Attenzione:hsla() La funzione è hsl() Alias della funzione. Si consiglia di utilizzare hsl() Funzione.

Esempio

Esempio 1

Definire diversi colori HSL(A):

#p1 {background-color:hsl(120 100% 50%);} /* Un colore verde */
#p2 {background-color:hsl(120 100% 75%);} /* Un colore verde chiaro */
#p3 {background-color:hsl(120 100% 25%);} /* Un colore verde scuro */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Un colore verde scuro con trasparenza */
#p5 {background-color:hsl(120 60% 70%);} /* Un colore verde sfumato */
#p6 {background-color:hsl(290 100% 50%);} /* Un colore viola */
#p7 {background-color:hsl(290 60% 70%);} /* Un colore viola sfumato */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Un colore viola sfumato con trasparenza */

Prova personalmente

Esempio 2

Vecchia sintassi con valori separati da virgola:

#p1 {background-color:hsl(120, 100%, 50%);} /* Verde */
#p2 {background-color:hsl(120, 100%, 75%);} /* Verde chiaro */
#p3 {background-color:hsl(120, 100%, 25%);} /* Verde scuro */
#p4 {background-color:hsl(120, 60%, 70%);} /* Verde tenero */
#p5 {background-color:hsl(290, 100%, 50%);} /* Viola */
#p6 {background-color:hsl(290, 60%, 70%);} /* Puro viola */

Prova personalmente

Sintassi CSS

Sintassi dei valori assoluti

hsl(tonalità saturazione luminosità / A)

Valore	Descrizione
tonalità	Obbligatorio. Definisce l'angolo sul cerchio delle colori (da 0 a 360) - 0 (o 360) è rosso, 120 è verde, 240 è blu.
saturazione	Obbligatorio. Definisce la saturazione del colore; 0% è grigio, 100% è pieno colore (saturazione completa). Può anche essere utilizzato None (uguale a 0%).
luminosità	Obbligatorio. Definisce la luminosità del colore; 0% è nero, 50% è normale, 100% è bianco. Può anche essere utilizzato None (uguale a 0%).
/ A	Opzionale. Rappresenta il valore del canale alpha del colore (da 0% (o 0) - completamente trasparente a 100% (o 100) - completamente opaco). Può anche essere utilizzato None (che rappresenta la mancanza di canale alpha). Il valore predefinito è 100%.

Sintassi dei valori relativi

hsl(from colore tonalità saturazione luminosità / A)

Valore	Descrizione
from colore	Con iniziale from, seguita da un valore di colore che rappresenta il colore originale. Questo è il colore originale su cui si basano i colori relativi.
tonalità	Obbligatorio. Definisce l'angolo sul cerchio delle colori (da 0 a 360) - 0 (o 360) è rosso, 120 è verde, 240 è blu.
saturazione	Obbligatorio. Definisce la saturazione del colore; 0% è grigio, 100% è pieno colore (saturazione completa). Può anche essere utilizzato None (uguale a 0%).
luminosità	Obbligatorio. Definisce la luminosità del colore; 0% è nero, 50% è normale, 100% è bianco. Può anche essere utilizzato None (uguale a 0%).
/ A	Opzionale. Rappresenta il valore del canale alpha del colore (da 0% (o 0) - completamente trasparente a 100% (o 100) - completamente opaco). Può anche essere utilizzato None (che rappresenta la mancanza di canale alpha). Il valore predefinito è 100%.