I codici dei colori nell'HTML e nel CSS.

Come si rappresentano i colori nel web e quali codici usare con i modelli HEX, RGB, RGBA nell'HTML e nel CSS.

L'esigenza di rappresentare i colori in modo sistematico si è avuta ben prima dell'avvento dell'informatica. Già l'industria tipografica aveva creato un modello nel 1931 con cui rappresentare tutti i colori. Tale modello fu chiamato RGB (Red, Green, Blue) che partiva da questi tre colori per creare tutti gli altri mischiandoli in proporzioni variabili. Un insieme di colori in grado di riprodurre tutti gli altri è detto di colori primari. Oltre al Rosso, Verde e Blu del modello RGB sono stati proposti i modelli CMYK che è l'acronimo di Cyan, Magenta, Yellow, Key black. Si tratta di Ciano, Magenta, Giallo mentre Key black si riferisce a una particolare tecnologia dei sistemi di stampa che utilizzano questo modello.

Altri sistemi di rappresentazione sono HSB (Hue Saturation Brightness ovvero Tonalità Saturazione Luminosità) e HSI (Hue Saturation Intensity ovvero Tonalità, Saturazione ed Intensità). Per individuare un colore occorre quindi scegliere il modello e indicare il valore ovvero la quantità di colori primari per ciascuno di essi. Agli albori di internet venivano visualizzati dai browser solo 8 colori che diventarono 16 quando si passò ai 4 bit. Successivamente la rappresentazione dei colori utilizzò gli 8 bit con 256 colori riproducibili dai browser che aumentarono a più di 65.000 con i 16 bit.

La prima rivoluzione arrivò con i 24 bit e con i tre colori primari Red, Green e Blue. Ci sono quindi 8 bit per ciascun colore con un numero complessivo di 2⁸=256 possibili valori per il Rosso, Verde e Blu. Le combinazioni totali realizzabili sono quindi 256³= 16.777.216. Con più di 16 milioni di colori si possono creare delle sfumature più di quelle che l'occhio umano  percepisce.

La seconda rivoluzione arrivò con i colori a 32bit. Oltre ai tre colori primari da 8 bit ciascuno fu introdotto anche il cosiddetto Canale Alfa che descrive il grado di trasparenza o opacità. Non è obbligatorio usare il Canale Alfa che esiste solo nei formati di immagine PNG, GIF e TIFF mentre non è presente nelle immagini JPG. I codici dei colori nell'HTML possono essere inseriti con la rappresentazione esadecimale. Facciamo un esempio pratico. Se aprite il tool online Real Time Editor e incollate il codice seguente

<font color="#D2691E">Colore cioccolato</font>

si visualizzerà il testo del colore del cioccolato. La stringa D2691E va interpretata in questo modo. D2 è la quantità di Rosso, 69 la quantità di Verde e 1E la quantità di Blu. Si tratta di numeri esadecimali cioè a cui alle classiche cifre decimali sono state aggiunte anche A, B, C, D, E F. In questo modo vengono individuati 16x16=256 possibili valori per ogni colore primario.

RAPPRESENTAZIONE DEI COLORI CON IL LORO NOME INGLESE

Oltre che con il codice esadecimale un colore si può rappresentare nell'HTML anche con il suo nome inglese. Una Lista di Colori in inglese  e in italiano può essere trovata in Wikipedia. Non tutti i nomi di questi colori sono supportati dal browser. Qualora lo fossero il codice può diventare

<font color="chocolate">Colore cioccolato</font>

Da notare che se si usa il nome al posto del codice non va inserito il simbolo del cancelletto.

Per esempio queste due rappresentazioni sono equivalenti  color:#E218A1; e color:yellow;.
 

CONVERTIRE CODICI DA RGB IN ESADECIMALE E VICEVERSA

Oltre che con la rappresentazione esadecimale o HEX si può usare anche quella RGB. Si tratta sempre di dare un valore ai colori primari. Nell'esempio precedente in D2691E le prime due cifre esadecimali D2 possono essere facilmente convertite in decimali. Si può usare questo tool online o anche fare delle semplici moltiplicazioni. La cifra esadecimale D sta per 13 quindi

D2 = 13x16¹ + 2x16⁰ = 208 + 2 = 210

Analogamente visto che E sta per 14

69 = 6x16¹ + 9x16⁰ = 96 + 9 = 105
1E = 1x16¹ + 14x16⁰ = 16 + 14 = 30

Il codice HEX #D2691E può anche essere rappresentato in RGB in questo modo color: rgb(210,105,30); . Questo codice può essere usato nei CSS con questa modalità

<p style="color: rgb(210,105,30);">Colore Cioccolato</p>

che è una alternativa al codice

<p style="color:#D2691E;">Colore Cioccolato</p>

Ci sono a disposizione diversi tool per la conversione da HEX a RGB e viceversa (Tool per convertire da HEX a RGB e Tool per convertire da RGB a HEX).

COME SCOPRIRE IL CODICE DI UN COLORE

Come certo saprete lo schermo è formato da pixel ognuno dei quali ha un suo colore. Esistono degli strumenti nei programmi di grafica detti Contagocce per trovare il codice di un colore di un singolo pixel cliccandoci sopra. Questi strumenti possono essere utilizzati anche nelle pagine web o anche nello schermo del computer. Qualche giorno fa ho illustrato uno strumento di PicPick utile a questo scopo. Ci sono però anche delle estensioni di Chrome e Firefox quale ColorZilla.

TRASPARENZA E OPACITÀ

La rappresentazione esadecimale non può essere usata per la trasparenza o opacità che come detto è stata introdotta con il Canale Alfa. Si utilizza il modello RGB con una quartina di valori al posto della terzina già vista. Tale modello diventa RGBA con questa 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 rappresenta il colore Blu rispettivamente con opacità dello 0%, del 20%, del 40%, del 60%, dell80% e del 100%. Si può p.e creare una tabella con celle con sfondo di diverse opacità

0.0

0.2

0.4

0.6

0.8

1.0

Concludo consigliandovi di consultare anche la Tabella interattiva dei codici dei colori in italiano.