I colori in Esadecimale

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.

Articoli correlati

Inizia a scrivere il termine ricerca qua sopra e premi invio per iniziare la ricerca. Premi ESC per annullare.

Torna in alto

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi