Codici dei colori HEX e RGB in italiano

Tabella e Lista di Colori per risalire dal nome in italiano ai codici HEX, RGB, CMYK, HSV

Che codice HEX, RGB, CMYK o HSV ha il colore albicocca? La questione non interessa un utente medio di internet ma può essere motivo di grattacapi per un blogger dilettante, o anche per un creatore professionista di layout, se il cliente gli ha chiesto uno sfondo proprio di quel colore per un elemento di una pagina web.

Ricordo che i codici dei colori sono una rappresentazione univoca di tutti i colori del visibile. Possono essere riprodotti tutti a partire da dei colori di base, mischiandoli in tutti i modi. Un insieme di tre o quattro colori che è in grado di riprodurre tutti gli altri è detto insieme di colori primari.

Sono stati proposti vari insiemi di colori primari e, ciascuno di essi, ha dato modo di creare un modello di rappresentazione. Quello più conosciuto è il RGB (Red, Green, Blue ovvero Rosso, Verde e Blu) ma c'è anche il CMYK (Cyan, Magenta, Yellow, Key black ovvero Ciano, Magenta, Giallo e Key Black per sistemi di stampa particolari). Per individuare un colore, occorre quindi scegliere il modello e il numero di colori che si vogliono rappresentare.

Al momento la rappresentazione dei colori più comune utilizza 24bit, cioè 8bit 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 più sfumature di quelle che l'occhio umano riesce a  percepire. Con una rappresentazione di colori a 32bit vengono aggiunti altri 8bit per la trasparenza che ci ha permesso di aggiungere il Canale Alfa.

Con la rappresentazione dei colori con il modello RGB, il colore albicocca può essere individuato dal codice RGB(251,206,177) dove i numeri della terna individuano rispettivamente la quantità di colori primari rosso, verde e blu che dobbiamo mischiare.  Per mostrare un testo con tale colore, si può usare questo codice

<p style="color:RGB(251,206,177);">Colore albicocca</p>

Ce ne si può rendere conto incollando tale codice in un Editor HTML online. Al posto di tale notazione, si può usare anche quella esadecimale o HEX che deriva però sempre dal modello RGB. Si può cambiare notazione utilizzando un convertitore online. Credo però nella utilità euristica di mostrare il procedimento.

Il colore albicocca può essere infatti essere denotato con il codice HEX #FBCEB1. Infatti con questo codice

<p style="color:#FBCEB1;">Colore albicocca</p>

si ottiene lo stesso risultato del precedente. Le cifre di #FBCEB1 sono esadecimali cioè formate dai numeri che vanno da 0 a 9 con l'aggiunta di A, B, C, D, E, F. A sta per 10, B sta per 11, C sta per 12, D sta per 13, E sta per 14 e F sta per 15 per un totale di 16 cifre, da cui il nome. Nel caso preso in esame, abbiamo quindi:

FB = 15x16¹ + 11x16⁰ = 251, CE = 12x16¹ + 14x16⁰ = 206 e B1 = 11x16¹ + 1x16⁰ = 177.

Al posto dei codici si possono usare anche i nomi dei colori ma solo in inglese. Per esempio

<p style="color:red;">Colore rosso</p>

Per convertire un codice RGB in HEX si fa l'operazione inversa. Si prende il primo numero della terna RGB e si divide per 16. Nel caso preso in esame abbiamo 251:16 = 15 con il resto di 11. Come sappiamo però al numero 15 corrisponde la lettera F e al numero 11 la lettera B. Quindi il primo numero della terna 251 si convertirà nella coppia di cifre esadecimali FB. Per il secondo numero della terna abbiamo 206:16 = 12 con il resto di 14. La seconda coppia di cifre esadecimali sarà quindi CE essendo C il numero 12 ed E il numero 14. Infine 177:16 = 11 con il resto di 1 che porterà alla coppia B1. Il codice HEX complessivo sarà quindi #FBCEB1.

Come procedere quando di un colore si conosce solo l'espressione italiana?

Non sempre l'espressione del colore tradotta in inglese funziona. Albicocca in inglese si traduce come apricot ma se si incolla in un Editor HTML questo codice

<p style="color:apricot;">Colore albicocca</p>

si visualizzerà solo il colore nero di default. Questo perché non tutti i colori sono supportati e alcuni non esistono proprio. Per risolvere occorre quindi consultare una tabella di colori in italiano.

LISTA COLORI IN ITALIANO DI WIKIPEDIA

La prima scelta è quella di rivolgersi a Wikipedia che ha una Lista dei colori in italiano molto ricca

I colori sono elencati in ordine alfabetico e, accanto a ciascuno di essi, viene mostrata una striscia di esempio. Sulla destra ci sono 4 colonne da cui ricavare i codici dei colori Esadecimali (HEX), RGB, CMYK e HSV. I modelli HSV (Hue Saturation Brightness Value ovvero Tonalità Saturazione Luminosità) e HSI (Hue Saturation Intensity ovvero Tonalità, Saturazione ed Intensità) sono usati in grafica più che nell'HTML.

TABELLA INTERATTIVA DEI COLORI

Una alternativa alla Lista dei colori di Wikipedia è la Tabella Interattiva dei colori. 

Si clicca sul nome in italiano del colore per conoscerne il codice esadecimale. Contestualmente anche tutta la pagina prenderà il colore su cui si è cliccato, nello screenshot Giallo Acido o Zolfo. Usando queste tabelle, sarà facile passare da un nome di un colore in italiano al corrispondente codice HEX o RGB, per poterlo poi usare nelle pagine web. La trasparenza non può essere inserita con la notazione in esadecimale ma solo con quella RGB.

<p style="color: RGBA(41,49,51,0.8);">Colore antracite con trasparenza al 80%</p>

Il codice precedente serve per mostrare il testo del colore antracite con trasparenza dell'ottanta per cento. Da notare che al posto di RGB si usa la stringa RGBA, dove A sta per Canale Alfa.