Colore RGBa

Da sempre, nei CSS, è possibile definire un colore con una notazione RGB, impostando cioè un valore per ciascun componente della tripletta di colori che è alla base di questo modello: Rosso (Red), Verde (Green), Blue (Blue).

I valori possono essere espressi in percentuale:

body {background-color: rgb(100%, 100%, 100%)}

oppure usando una scala che va da 0 a 255:

body {background-color: rgb(255, 255, 255)}

Le due regole sono equivalenti, in entrambi i casi lo sfondo della pagina sarà bianco.

L'uso della sintassi RGB si affianca, per la definizione dei colori, ai metodi basati sul codice esadecimale e sulle parole chiave. Rimandiamo alla lezione sul colore della guida CSS di base per l'approfondimento.

RGBa

Partendo da questa base, i CSS3 introducono una novità di sicuro interesse. Si tratta della definizione del colore attraverso una notazione RGBa: Rosso (Red), Verde (Green), Blue (Blue) e Alfa. 'Alfa' fa riferimento ad un'informazione extra, quella relativa al cosiddetto 'canale alfa', tramite il quale possiamo impostare la trasparenza del colore definito in RGB.

Sintatticamente, i valori RGB si esprimono allo stesso modo visto in precedenza; il valore a (alfa) si imposta usando una scala compresa tra 0.0 (completamente trasparente) e 1.0 (completamente opaco), in maniera simile a quanto visto per la proprietà opacity:

body {background-color: rgba(255, 255, 255, 0.5)}

Esempi

Iniziamo con una versione rivista e corretta dell'esempio visto nella lezione precedente. Nella demo abbiamo un box con sfondo bianco così definito nel CSS:

#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
background-color: rgb(255,255,255);
}

Ora usiamo la notazione RGBa per rendere lo sfondo semi-trasparente:

#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
background-color: rgba(255, 255, 255, 0.5);
}

Ecco il risultato.

Usando 0.0 come valore alfa si ottiene un colore completamente trasparente (esempio); usando 1.0 il colore è completamente opaco, il che equivale a non usare il canale alfa, che ha come default il valore 1.0 (esempio).

Qualcuno potrebbe a questo punto chiedersi: ma usando RGBa non si ottengono gli stessi risultati di opacity? La risposta è no.

Per capire è sufficiente inserire del testo all'interno del box, come abbiamo fatto in questo esempio. Si noti la differenza rispetto all'analogo esempio basato sull'uso di opacity.

Nel caso di opacity, la trasparenza viene applicata non solo al colore di sfondo del div, ma anche a tutti gli elementi suoi discendenti, compreso il testo, che infatti risulta anch'esso semi-trasparente. Usando la notazione RGBa per definire il colore di sfondo del div, applichiamo la trasparenza solo su di esso, solo sul colore: gli elementi interni non sono toccati.

Il consiglio, dunque, è quello di valutare bene lo scenario e i risultati desiderati prima di decidere se ottenere la trasparenza facendo ricorso a opacity o alla notazione RGBa.

Tabella del supporto sui browser

Colore
RGBa	9.0+	3.0+	3.1+	1.0+	10.0+