I codici dei colori nel web.

Breve illustrazione del significato dei codici dei colori e come inserirli nelle pagine web anche con la trasparenza.

La rappresentazione dei colori nelle pagine web avviene mediante l'inserimento di codici associati agli stessi colori. Agli albori di internet venivano visualizzati dai browser solo 8 colori che diventarono 16 quando si passò ai 4 bit. Successivamente la Profondità di colore diventò di 8 bit con 256 colori rappresentati che aumentarono a più di 65.000 con 16 bit. La vera conquista si ebbe con il TrueColor a 24 bit che consente di riprodurre i colori in modo molto fedele alla realtà con 16,7 milioni di colori rappresentabili. Si possono creare delle sfumature superiori a quelle che l'occhio umano riesce a percepire. La rappresentazione TrueColor parte da 3 colori primari, il rosso, il verde e il blu ciascuno dei quali è rappresentato da 8 bit per un numero complessivo di 2⁸=256. Il totale è quindi di 256x256x256 che dà appunto il numero di 16.777.216.

L'introduzione dei colori a 32 bit portò alla creazione del cosiddetto Canale Alfa (o Alpha all'inglese) che non è obbligatorio inserire e che descrive il grado di trasparenza o opacità. I formati PNG, TIFF e GIF sono quelli che supportano il Canale Alpha per inserire delle trasparenze nelle immagini.

I codici dei colori possono essere inseriti nell'HTML o più spesso nei CSS. L'inserimento in un testo di un colore si può fare con questo codice <font color="#ff0000">Colore rosso</font> mentre nei CSS ci possono essere vari metodi di inserimento dei colori

color: #FF0000;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: red;
color:#F00;

Nel primo caso si utilizzano i codici esadecimali, nel secondo caso si inseriscono i valori di ciascun colore primario rosso, verde e blu, in inglese Red, Green e Blue da cui l'acronimo RGB. Nella terza rappresentazione invece di usare i numeri per le componenti dei vari colori vengono usate le percentuali. La quarta opzione è la più semplice visto che si può inserire il nome del colore in lingua inglese. Nel quarto caso si usa la rappresentazione esadecimale semplice rispetto a quella doppia della prima riga. La sestina dovrà però essere formata da coppie identiche del tipo #33AA22 = #3A2.

Il codice esadecimale è suddiviso quindi in tre coppie. Per esempio #F06001 va interpretato come F0 che indica la quantità di rosso, 60 la quantità di verde e 01 la quantità di blu rispettivamente presenti. Ciascuno di questi numeri esadecimali si può convertire in decimale e viceversa.

F0 diventa 240 60 diventa 96 01 diventa 1

Ci sono dei tool online che permettono facilmente di passare da una rappresentazione a un'altra e di convertire il codice HEX in RGB e viceversa. Quindi il codice #F06001 è equivalente al codice RGB(240,96,1). Oltre ai colori primari sono particolarmente importanti anche quelli secondari che sono formati da combinazioni di due primari e sono usati tra l'altro dalle stampanti.

rgb(255,255,0) = #FFFF00 = Giallo
rgb(0,255,255) = #00FFFF = Ciano
rgb(255,0,255) = #FF00FF = Magenta

Il grigio ha la particolarità di avere tutti i numeri RGB uguali così come le coppie di esadecimali

rgb(0,0,0) = #000000 = #000 =  Nero
rgb(64,64,64) = #404040 = Grigio scuro
rgb(128,128,128) = #808080 = Grigio
rgb(192,192,192) = #C0C0C0 = Grigio chiaro
rgb(255,255,255) = #FFFFFF = #FFF = Bianco

Attraverso la rappresentazione RGBA si possono inserire anche trasparenza o opacità sfruttando il Canale Alpha. I maggiori browser sono in grado di "leggere" la trasparenza con l'esclusione di Internet Explorer. Il codice da usare per l'opacità ha la seguente sintassi

color: rgba(0,0,255,0.0);
color: rgba(0,0,255,0.2);
color: rgba(0,0,255,0.4);
color: rgba(0,0,255,0.6);
color: rgba(0,0,255,0.8);
color: rgba(0,0,255,1.0);

che porta a questo risultato visibile con Chrome, Firefox, Safari e Opera

0.0

0.2

0.4

0.6

0.8

1.0

Ho scritto altri articoli su questo argomento che potrebbero interessare i lettori

1. Color Picker per conoscere i codici dei colori -
2. EyeDropper per scoprire i colori dei colori dal browser -
3. Tabella interattiva dei codici dei colori in italiano -