CSS hsl () Notazione


Esempio

HSL sta per tonalità ("che colore"), saturazione ("quanto colore") e leggerezza ("quanto bianco").

La tonalità è rappresentata da un angolo compreso tra 0 ° e 360 ​​° (senza unità), mentre la saturazione e la luminosità sono rappresentate come percentuali.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

La ruota dei colori HSL

Sintassi

color: hsl(<hue>, <saturation>%, <lightness>%);
Valore Descrizione
<hue> specificato in gradi attorno alla ruota dei colori (senza unità), dove 0 ° è rosso, 60 ° è giallo, 120 ° è verde, 180 ° è ciano, 240 ° è blu, 300 ° è magenta e 360 ​​° è rosso
<saturation> specificato in percentuale dove lo 0% è completamente desaturato (scala di grigi) e il 100% è completamente saturo (colori vividi)
<lightness> specificato in percentuale dove 0% è completamente nero e 100% è completamente bianco

Gli appunti

  • Una saturazione dello 0% produce sempre un colore in scala di grigi; cambiare la tonalità non ha alcun effetto.

  • Una luminosità dello 0% produce sempre il nero e il 100% produce sempre il bianco; cambiare la tonalità o la saturazione non ha alcun effetto.