Colori HTML HSL e HSLA
HSL sta per tonalità, saturazione e luminosità.
I valori di colore HSLA sono un'estensione di HSL con un canale alfa (opacità).
Valori colore HSL
In HTML, un colore può essere specificato utilizzando tonalità, saturazione e luminosità (HSL) nella forma:
hsl( tonalità , saturazione , luminosità )
La tonalità è un grado sulla ruota dei colori da 0 a 360. 0 è rosso, 120 è verde e 240 è blu.
La saturazione è un valore percentuale, 0% indica una sfumatura di grigio e 100% è il colore pieno.
Anche la luminosità è un valore percentuale, 0% è nero e 100% è bianco.
Sperimenta mescolando i valori HSL di seguito:
hsl(0, 100%, 50%)
TINTA
SATURAZIONE
LEGGEREZZA
Esempio
Saturazione
La saturazione può essere descritta come l'intensità di un colore.
100% è colore puro, senza sfumature di grigio
Il 50% è grigio al 50%, ma puoi ancora vedere il colore.
0% è completamente grigio, non puoi più vedere il colore.
Esempio
Leggerezza
La luminosità di un colore può essere descritta come quanta luce vuoi dare al colore, dove 0% significa nessuna luce (nero), 50% significa 50% luce (né scuro né chiaro) 100% significa piena luminosità (bianco).
Esempio
Sfumature di grigio
Le sfumature di grigio sono spesso definite impostando la tonalità e la saturazione su 0 e regolando la luminosità da 0% a 100% per ottenere sfumature più scure/più chiare:
Esempio
Valori colore HSLA
I valori di colore HSLA sono un'estensione dei valori di colore HSL con un canale alfa, che specifica l'opacità di un colore.
Un valore di colore HSLA è specificato con:
hsla( tonalità, saturazione , luminosità, alfa )
Il parametro alfa è un numero compreso tra 0,0 (completamente trasparente) e 1,0 (per niente trasparente):
Sperimenta mescolando i valori HSLA di seguito:
hsla (0, 100%, 50%, 0,5)
TINTA
SATURAZIONE
LEGGEREZZA
ALFA