Colori CSS

Supporto CSS Più di 140 nomi di colorie anche i valori esadecimali, i valori RGB, i valori RGBA, i valori HSL, i valori HSLA e l'opacità.

Il colore RGBA

Il valore del colore RGBA è un'estensione del valore del colore RGB, con un canale alpha - questo canale determina l'opacità del colore.

Il valore del colore RGBA è definito in questo modo: rgba(red, green, blue, alpha) alpha Il parametro è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Esempi seguenti definiscono diversi colori RGBA:

Esempio

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

Prova da solo

Il colore HSL

HSL sta per tonalità, saturazione e luminosità (Hue, Saturation e Lightness).

Il valore del colore HSL è definito in questo modo: hsl(hue, saturation, lightness).

La tonalità è l'angolo sul cerchio dei colori (da 0 a 360):

  • 0 (o 360) è il rosso
  • 120 è il verde
  • 240 è il blu

La saturazione è un valore percentuale: il 100% è il colore pieno.

La luminosità è anche un valore percentuale: 0% è il colore scuro (nero), mentre il 100% è bianco.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Esempi di definizione di colori HSL diversi:

Esempio

#p1 {background-color: hsl(120, 100%, 50%);}  /* Tinta verde */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Tinta verde chiara */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Tinta verde scura */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Tinta verde pallida */

Prova da solo

Colore HSLA

Il valore del colore HSLA è un'estensione del valore del colore HSL con canale alpha - esso definisce l'opacità del colore.

Il valore del colore HSLA è determinato dai seguenti parametri: hsla(hue, saturation, lightness, alpha), dove il parametro alpha definisce l'opacità. Il parametro alpha è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Esempi di definizione di colori HSLA diversi:

Esempio

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

Prova da solo

Opacità

CSS opacity L'attributo imposta l'opacità dell'intero elemento (sia il colore di sfondo che il testo saranno opachi/trasparenti).

opacity Il valore dell'attributo deve essere un numero compreso tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

Attenzione, il testo sopra sarà anche trasparente/opaco!

Esempio seguente mostra diversi elementi con opacità:

Esempio

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Rosso opaco */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Verde opaco */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Blu opaco */

Prova da solo