Tra i webmaster è ormai assodato che il modo per indicare i colori all’interno di pagine HTML o fogli di stile CSS o derivati, è quello di utilizzare il formato dei colori in esadecimale, cioè basati sul sistema numerico esadecimale. Tale sistema è basato su 16 cifre, a differenza da quello che usiamo tutti i giorni che invece è basato sui numeri 0…9 (sistema decimale).
Per chiarire le idee, ecco una tabella di corrispondenza tra numeri in base 2 (binario), in base 10 e in base 16.
| Decimale: | Binario: | Esadecimale: |
|---|---|---|
| 0 | 0 | 0 |
| 1 | 1 | 1 |
| 2 | 10 | 2 |
| 3 | 11 | 3 |
| 4 | 100 | 4 |
| 5 | 101 | 5 |
| 6 | 110 | 6 |
| 7 | 111 | 7 |
| 8 | 1000 | 8 |
| 9 | 1001 | 9 |
| 10 | 1010 | A |
| 11 | 1011 | B |
| 12 | 1100 | C |
| 13 | 1101 | D |
| 14 | 1110 | E |
| 15 | 1111 | F |
Come si può vedere, in un sistema decimale il valore 15 è rappresentato da 2 cifre (1 e 5), mentre il valore 15 nel sistema esadecimale è rappresentata dalla singola lettera F. Per quanto strano o incomprensibile possa sembrare, i nostri computer riescono a interpretare queste informazioni e a trasformarle nel sistema binario (a centro).
Per rappresentare il numero 15 o il numero F, sono necessari, come si vede in tabella, 4 bit. Con 8 bit invece si riescono a rappresentare 256 numeri diversi. Come sappiamo 8 bit rappresentano un byte che assieme ai suoi multipli (mega, giga, tera, ec…) è diventata l’unità di riferimento per la dimensione dei file. Il motivo per cui si utilizzano 8 bit risale all’avvento dei Word processor poichè per rappresentare un itero alfabeto di caratteri maiuscoli e minuscoli più i caratteri speciali, si scelse il set ASCII a 7 bit (pari a 128 caratteri diversi). La più piccola potenza in grado di rappresentare tutti questi caratteri è 8, motivo per cui si scelsero 8 bit. Ma torniamo a noi.
I colori web sono definiti con un codice composto da sei caratteri esadecimali preceduto dal cancelletto “#“, che indica il sistema numerico di riferimento. Ogni coppia di colore rappresenta uno dei colori primari della scala RGB (dai un’occhiata qui: Teoria del colore: sistemi di rappresentazione del colore). I primi due caratteri rappresentano il rosso, il terzo e il quarto rappresentano il verde e gli ultimi due rappresentano il blu. Ogni colore può essere rappresentato da un valore che va da 00 a FF, cioè 256 sfumature possibili di quel colore. Ad esempio 00 rappresenta la sfumatura più scura (nero), mentre FF rappresenta la sfumatura più chiara (bianco). Più alti sono i numeri, più luminoso è ogni colore primario. Nell’esempio sopra, il colore rosso sovrasta gli altri due.
Attraverso la combinazione di queste 3 coppie di caratteri (R-G-B) si riescono a rappresentare milioni di caratteri, più esattamente: 256 * 256 * 256 = 16.777.216. Pertanto, sono necessari 24 bit per specificare un colore Web all’interno della gamma sRGB e 16.777.216 colori ovvero più colori di quanti l’occhio umano possa effettivamente distinguere.
Colori additivi e sottrattivi
Facciamo attenzione a un piccolo particolare. Il sistema RGB è un sistema di colori additivi, che a differenza di quello sottrattivo non utilizza i classici ciano, magenta e giallo come colori primari, ma utilizza rosso, verde e blu. Di conseguenza, per calcolare i primari additivi, partiamo dal colore nero #000000 e aggiungiamo, uno alla volta, una coppia di FF. Avremo in questo caso:
Possiamo basarci su questi per trovare colori additivi e sottrattivi. Iniziando con il nero, cambia ogni coppia in ff:
- #FF0000 sta per il rosso
- #00FF00 sta per il verde
- #0000FF sta per il blu
Per “calcolare” i colori sottrattivi invece inizieremo dal bianco, cioè #FFFFFF e in questi casi “sottrarremo” il colore per trovare il primario. In questo caso avremo:
- #00FFFF sta per il ciano
- #FF00FF sta per il magenta
- #FFFF00 sta per il giallo
| Colore | Decimale (Red, Green, Blue) |
Esadecimale (#RRGGBB) |
| Black | (0, 0, 0) | #000000 |
| White | (255, 255, 255) | #FFFFFF |
| Red | (255, 0, 0) | #FF0000 |
| Green | (0, 255, 0) | #00FF00 |
| Blue | (0, 0, 255) | #0000FF |
| Yellow | (255, 255, 0) | #FFFF00 |
| Cyan | (0, 255, 255) | #00FFFF |
| Magenta | (255, 0, 255) | #FF00FF |
Le nuove tecnologie spesso “astraggono” sia il valore binario che quello esadecimale utilizzando un nome di colore basato su tali valori, ad esempio, nei fogli di stile a cascata per universalizzare temi e stili sul Web.
Scorciatorie
A volte è utile utilizzare una forma abbreviata del codice esadecimale di sole tre cifre (esadecimali). Espandere il formato contratto di 3 cifre al formato a sei cifre è semplice: basta raddoppiare ogni cifra: #09C diventa #0099CC come presentato nel seguente esempio CSS:
.trecifre { color: #09C; }
.seicifre { color: #0099CC; }
La forma abbreviata riduce la tavolozza a 4.096 colori, riducendo anche il numero di bit necessari a rappresentarlo: 12 bit rispetto al formato full da 24. La forma abbreviata è comunque sufficiente per molti documenti basati su HTML e riduce di qualche byte i fogli di stile.
