Come convertire il codice dei colori da Hex in RGB e viceversa.

Come convertire i codici HEX in RGB e RGB in HEX e aggiungere la trasparenza o opacità.

Non è mia intenzione riprendere in toto il post sui codici dei colori che è tuttora valido ma solo presentare dei tool che possono essere utili per modificare per esempio i colori di un widget che si sia scaricato da internet. In alcuni commenti ho potuto constatare che mentre il concetto di codice HEX sia stato sostanzialmente assimilato quello RGB non lo è ancora del tutto tanto che alcuni non riescono neppure a capire di che colore si tratti.

CODICI DEI COLORI

La rappresentazione True Color dei colori del web ha introdotto tre colori primari che sono Rosso, Verde e Blu. Da questi tre colori possiamo crearne molti altri mischiandoli in determinate proporzioni. Visto che possono essere usati 8 bit per definire la quantità di ciascun colore si hanno 2⁸=256 possibilità di calibrare ciascun colore primario da un minimo di 0 a un massimo di 255.  Dato che i colori primari sono tre si hann0 quindi 256x256x256 possibili colori cioè ben 16.777.216 superiori al numero di quelli che possono essere apprezzati dall'occhio umano.

CODICE RGB

La rappresentazione dei colori più ovvia è quindi la cosiddetta RGB che è formata da una terna ordinata di numeri naturali da 0 a 255.  Ciascun numero rappresenta la quantità di quel colore primario da mischiare agli altri due. Nell'HTML questa rappresentazione ha la forma

color: rgb(255,0,0); /* Rosso */
color: rgb(0,255,0); /* Verde */
color: rgb(0,0,255); /* Blu */
color: rgb(20,20,20); /* Grigio */
color: rgb(0,0,0); /* Nero */
color: rgb(255,255,255); /* Bianco */

Quando i tre numeri sono uguali si avrà il grigio e le varie tonalità dipenderanno dal numero comune; a numeri piccoli corrisponderanno grigi più scuri e a numeri più grandi grigi più chiari.

CODICE HEX

Una rappresentazione alternativa è data dal codice HEX che nell'HTML si utilizza in questo modo

color:#E218A1;
color:yellow;

con la seconda opzione che ci consente di indicare il nome preciso del colore però in lingua inglese. La prima è invece una sestina di numeri esadecimali cioè di numeri che oltre a quelli decimali che vanno da 0 a 9 vengono aggiunte anche le cifre A, B, C, D, E, F. Una coppia di numeri esadecimali possono portare a 16x16=256 combinazioni. Ecco quindi che si può passare da un codice RGB a uno HEX suddividendo la sestina di quest'ultimo in tre parti. Per esempio in E218A1; E2 indica la quantità di rosso, 18 la quantità di verde e A1 la quantità di blu.

Si può convertire un esadecimale in un decimale usando dei semplici calcoli aritmetici. Ricordiamoci che A=10, B=11, C=12, D=13, E=14, F=15. Quindi le tre coppie ordinate possono essere così convertite:

E2= Ex16¹ + 2x16⁰ = 14x16 + 2x1 = 224 + 2 = 226
18= 1x16¹ + 8x16⁰ = 1x16 + 8x1 = 24
A1 = Ax16¹ + 1x16⁰ = 10x16 + 1x1 = 161

In definitiva il codice HEX #E218A1 è equivalente a RGB(226,24,161). Con un calcolo inverso possiamo passare da una terna RGB a una sestina HEX. Bisogna infatti considerare che i numeri della terna RGB sono decimali e quindi non resta altro che convertirli nei corrispettivi esadecimali. Facciamo un altro esempio con un RGB(224,187,99). I calcoli per trovare gli esadecimali sono questi:

224:16= 14 = E con resto 0 cioè in esadecimali E0
187:16=11 = B con resto 11=B cioè in esadecimali BB
99:16= 6 con resto 3 cioè in esadecimali 63

quindi il codice RGB(224,187,99) può essere convertito in #E0BB63.

CONVERSIONE DA HEX A RGB E DA RGB A HEX

Per fortuna non è che per ogni codice di colore di dobbiamo mettere a fare i calcoli per la conversione. Ci sono online un sacco di tool in grado di farlo. Ci si potrebbe creare anche uno strumento da soli con il javascript ma mi sembra una scelta eccessiva.

TOOL PER CONVERTIRE HEX IN RGB

Si incolla il codice senza cancelletto quindi si clicca su Convert to RGB 



Il risultato sarà la terna ordinata che corrisponde al codice esadecimale.

TOOL PER CONVERTIRE RGB IN HEX

Con questo strumento si incollano i tre valori di RGB e si va su Convert to HEX



Si otterrà la sestina del codice HEX corrispondente.

TRASPARENZA E OPACITÀ

In genere è più usata la rappresentazione HEX della RGB che però è da preferire quando si vuole inserire la trasparenza (o opacità) in un colore. Il codice RGB con il grado di trasparenza invece che da una terna viene rappresentato nell'HTML con una quaterna RGBA in questo modo

color: rgba(18,24,255,0.0);
color: rgba(18,24,255,0.2);
color: rgba(18,24,255,0.4);
color: rgba(18,24,255,0.6);
color: rgba(18,24,255,0.8);
color: rgba(18,24,255,1.0);
dove il quarto numero indica il grado di opacità da 0% a 100% con questo risultato pratico

0.0

0.2

0.4

0.6

0.8

1.0