I CSS supportano 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.

L'esempio seguente definisce diversi colori RGBA:

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* rosso con opacità */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* verde con opacità */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blu con opacità */

Visualizza esempio

Colori HSL

HSL sta per Tonalità, Saturazione e Luminosità.

Un valore di colore HSL viene specificato con: hsl(tonalità, saturazione, luminosità).

1. La tonalità è un grado sulla ruota dei colori (da 0 a 360):
   - 0 (o 360) è rosso
   - 120 è verde
   - 240 è blu
2. La saturazione è un valore percentuale: 100% è il colore completo.
3. Anche la leggerezza è una percentuale; Lo 0% è scuro (nero) e il 100% è bianco.

L'esempio seguente definisce diversi colori HSL:

#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 pastello */

Visualizza esempio

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(tonalità, saturazione, luminosità, alfa), dove il parametro alfa 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:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* verde con opacità */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* verde chiaro con opacità */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* verde scuro con opacità */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* verde pastello con opacità */

Visualizza esempio

Opacità

La proprietà opacity CSS imposta l'opacità per l'intero elemento (sia il colore di sfondo che il testo saranno opachi/trasparenti).

Il valore della proprietà opacity deve essere un numero compreso tra 0,0 (completamente trasparente) e 1,0 (completamente opaco).

Notare che anche il testo sopra sarà trasparente/opaco!

L'esempio seguente mostra diversi elementi con opacità:

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* rosso con opacità */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* verde con opacità */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blu con opacità */