05 gennaio 2013

I codici dei colori nel web.

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 28=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 -



1 commento :

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.