Colori HSL CSS
- Pagina precedente Colori HEX CSS
- Pagina successiva Sfondo 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
SATURAZIONE
LUMINOSITÀ
Esempio
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
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
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
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
SATURAZIONE
LUMINOSITÀ
ALPHA
Esempio
- Pagina precedente Colori HEX CSS
- Pagina successiva Sfondo CSS