Colori CSS
CSS supporta oltre 140 nomi di colori, valori HEX, valori RGB , valori RGBA, valori HSL, valori HSLA e opacità.
Colori RGBA
I valori di colore RGBA sono un'estensione dei valori di colore RGB con un canale alfa, che specifica l'opacità di un colore.
Un valore di colore RGBA è specificato con: rgba(rosso, verde, blu, alfa). Il parametro alfa è un numero compreso tra 0,0 (completamente trasparente) e 1,0 (completamente opaco).
L'esempio seguente definisce diversi colori RGBA:
Esempio
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
Colori HSL
HSL sta per Tonalità, Saturazione e Leggerezza.
Un valore di colore HSL viene specificato con: hsl(tonalità, saturazione, luminosità).
- La tonalità è un grado sulla ruota dei colori (da 0 a 360):
- 0 (o 360) è rosso
- 120 è verde
- 240 è blu
- La saturazione è un valore percentuale: 100% è il colore pieno.
- Anche la leggerezza è una percentuale; 0% è scuro (nero) e 100% è bianco.
L'esempio seguente definisce diversi colori HSL:
Esempio
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Colori 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 viene specificato con: hsla(hue, saturation, lightness, alpha), dove il parametro alpha definisce l'opacità. Il parametro alfa è un numero compreso tra 0,0 (completamente trasparente) e 1,0 (completamente opaco).
L'esempio seguente definisce diversi colori HSLA:
Esempio
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
Opacità
La proprietà CSS opacity
imposta l'opacità per l'intero elemento (sia il colore di sfondo che il testo saranno opachi/trasparenti).
Il opacity
valore della proprietà deve essere un numero compreso tra 0,0 (completamente trasparente) e 1,0 (completamente opaco).
Nota che anche il testo sopra sarà trasparente/opaco!
L'esempio seguente mostra diversi elementi con opacità:
Esempio
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */