Convertitore HEX in RGB

Come funziona la conversione HEX in RGB

I colori HEX usano una stringa esadecimale a sei cifre (#RRGGBB) in cui ogni coppia rappresenta i canali rosso, verde e blu. I valori vanno da 00 (0) a FF (255).

L'RGB usa tre numeri decimali (0–255) per ciascun canale. Ad esempio, #2b7190 si decompone in R:43, G:111, B:142.

Domande frequenti

Come converto HEX in RGB manualmente?

Dividi il codice HEX a 6 cifre in 3 coppie (es. #FF8800 → FF, 88, 00), quindi converti ogni coppia da base 16 a base 10: FF=255, 88=136, 00=0. Il risultato è rgb(255, 136, 0).

E i codici HEX a 3 cifre?

L'HEX a 3 cifre è un'abbreviazione in cui ogni cifra viene raddoppiata: #F80 = #FF8800. Questo convertitore gestisce automaticamente entrambi i formati.

Quando usare HEX o RGB?

L'HEX è più compatto e popolare in CSS. RGB è preferibile quando devi manipolare i singoli canali via codice o usare rgba() per la trasparenza.

Cos'è davvero la notazione esadecimale

Un colore esadecimale è una rappresentazione in base 16 di un colore RGB a 24 bit. Sei cifre dopo il #, tre coppie: rosso, verde, blu. Ogni coppia è un numero da 00 a ff: un byte (8 bit) per canale, tre canali, 24 bit in totale. È esattamente quanto basta a codificare uno qualsiasi di 2²⁴ = 16.777.216 colori distinti. L'intervallo «true colour» / «milioni di colori» che è stato lo standard di base dei display di consumo dalla fine degli anni '90.

Il segno cancelletto non fa parte del valore, è un prefisso sintattico che dice al parser CSS «ciò che segue è un colore esadecimale, non il nome di una variabile.» Senza di esso, una stringa come ff0000 potrebbe essere ambigua per il lexer. Le cifre 0-9 mantengono il loro significato decimale; le lettere A-F (senza distinzione tra maiuscole e minuscole in CSS) rappresentano i decimali 10-15. Quindi f è 15, ff è 15 × 16 + 15 = 255.

La matematica, con esempi svolti

Ogni coppia esadecimale di due cifre corrisponde a un decimale 0-255 con la formula (high_digit × 16) + low_digit, dove ogni cifra è interpretata come 0-15 (da A=10 fino a F=15):

• FF → (15 × 16) + 15 = 255
• 88 → (8 × 16) + 8 = 136
• 00 → 0
• 2B → (2 × 16) + 11 = 43 (il canale rosso del campione predefinito #2b7190 qui sopra)
• 71 → (7 × 16) + 1 = 113
• 90 → (9 × 16) + 0 = 144

In JavaScript l'intera analisi entra in due righe. const n = parseInt(hex.slice(1), 16); seguito da const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];: questo è essenzialmente il codice sostanziale di ogni convertitore da esadecimale a RGB sul web. La direzione inversa è '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').

Abbreviazioni a 3, 4 e 8 cifre

Il CSS consente forme abbreviate quando i canali sono simmetrici:

• A 3 cifre (#RGB), ogni cifra viene duplicata per formare il codice equivalente a 6 cifre. #F00 → #FF0000; #FFF → #FFFFFF; #369 → #336699. La forma è comoda per i colori «tondi» amichevoli per i designer ma può esprimere solo 4.096 valori unici, non 16,7 milioni, non c'è un'abbreviazione per #778899 perché le coppie differiscono.
• A 8 cifre (#RRGGBBAA)) come a 6 cifre più una coppia alfa. 00 = completamente trasparente, FF = completamente opaco, 80 ≈ 50% di opacità. Funzionalmente identico a rgba(255, 0, 0, 0.5) ma più compatto.
• A 4 cifre (#RGBA), abbreviazione per duplicazione della forma a 8 cifre. #F00A → #FF0000AA.

L'abbreviazione a 3 cifre esisteva in CSS Level 1 (1996). Le forme alfa a 4 e 8 cifre arrivarono molto più tardi nel CSS Color Module Level 4, con ampia disponibilità multi-browser da circa metà 2015.

I colori con nome e la storia di rebeccapurple

Prima che l'esadecimale diventasse l'idioma predefinito del web, i colori con nome erano la norma. HTML 4.01 (dicembre 1999) specificava 16 colori con nome, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua: basati sui 16 colori standard della palette VGA di Windows. CSS 2.1 aggiunse orange come diciassettesimo. Il CSS Color Module Level 3 adottò poi formalmente circa 130 nomi aggiuntivi dal file rgb.txt di X11 (che Mosaic e i primi Netscape ereditarono dalle loro radici nell'X Window System), portando il totale a circa 147-148 a seconda di come conti gli alias come cyan/aqua e gray/grey.

Il CSS Color Module Level 4 ne aggiunse un altro, con una storia annessa. Rebecca Meyer era la figlia di sei anni di Eric A. Meyer, una delle prime autorità del CSS e partecipante al W3C. Morì di cancro al cervello il 7 giugno 2014, il giorno del suo sesto compleanno. Eric scrisse sul suo blog la stessa settimana: «Ce l'ha fatta ad arrivare a sei. Per quasi dodici ore, ha avuto sei anni.» Un membro della comunità propose di aggiungere il suo colore preferito, un viola melanzana intenso, esadecimale #663399: come beccapurple; Eric accettò con una sola condizione: doveva essere rebeccapurple, non beccapurple, perché Rebecca stessa aveva da poco annunciato di essere ormai troppo grande per il nome da bambina. Il CSS Working Group approvò la modifica il 22 giugno 2014, due settimane dopo la sua morte. WebKit e altri motori di browser distribuirono il supporto nel giro di giorni. È l'unico colore CSS che prende il nome da una persona, un silenzioso memoriale in ogni browser moderno.

sRGB: lo spazio colore implicito di ogni codice esadecimale

Quando scrivi #FF5733 in CSS, non stai solo specificando un numero, lo stai specificando nello spazio colore sRGB. Questo è implicito; il browser interpreterà il tuo valore esadecimale come sRGB a meno che tu non usi una delle più recenti funzioni color() per specificare diversamente.

sRGB fu proposto congiuntamente da Hewlett-Packard e Microsoft nel 1996 e adottato come IEC 61966-2-1:1999, un singolo spazio colore indipendente dal dispositivo progettato attorno alla curva di risposta del tipico monitor CRT dell'epoca. Condivide le sue cromaticità primarie con ITU-R BT.709 (lo standard HDTV) al punto di bianco D65 (6500 K). Il W3C definì esplicitamente sRGB come lo spazio colore predefinito per il web; tutti i codici esadecimali, tutti i valori rgb(), tutte le immagini JPEG classiche e PNG senza tag sono interpretati come sRGB.

Limitazione onesta: sRGB copre all'incirca il 35,9% del diagramma dei colori visibili CIE 1931. Ci sono colori che esistono in natura, possono essere mostrati dai moderni schermi per telefono OLED, ma non possono essere specificati in notazione esadecimale, verdi smeraldo saturi, vivaci tonalità rosso-arancio del tramonto, vernici fluorescenti. Il CSS Color Module Level 4 ha introdotto nuovi spazi per essi, accessibili tramite la funzione color(): Display P3 (usato dai display Apple a partire dall'iPhone 7 e dall'iMac di fine 2015, circa il 25% più ampio di sRGB) e Rec. 2020 (lo standard 4K/8K per la trasmissione, circa il 75% del CIE 1931). Sui dispositivi più vecchi solo-sRGB il browser ripiega in modo elegante.

Alternative moderne: HSL, HWB, OKLCH

L'esadecimale è compatto ma non amichevole per l'uomo, non puoi guardare #3DE7C9 e indovinare la tinta. Il CSS ha progressivamente aggiunto notazioni funzionali che corrispondono al modo in cui gli umani pensano al colore:

• HSL: tinta, saturazione, luminosità. La tinta è un angolo 0-360°. Introdotta nel CSS Color Module Level 3 (2011). Cursori intuitivi, ma la luminosità non è percettivamente uniforme, il giallo a L=50% appare molto più luminoso del blu alla stessa luminosità.
• HWB: tinta, bianchezza, nerezza. Più facile per il modello mentale di un pittore («un blu con un po' di bianco e un tocco di nero»). Stessa gamma di HSL.
• LCH / Lab: percettivamente uniforme; cambiamenti numerici uguali corrispondono a cambiamenti percepiti uguali. Supporta l'ampia gamma P3+.
• OKLCH: l'ultimo arrivato, introdotto da Björn Ottosson nel dicembre 2020. Risolve i problemi di distorsione della tinta e di gradiente dei colori scuri di CIELAB. Numeri di luminosità uguali appaiono ugualmente luminosi in tutte le tinte. L'interpolazione lineare in OKLCH produce gradienti visivamente fluidi senza i punti intermedi grigio fangoso che ottieni da linear-gradient(red, green) in sRGB. Tailwind CSS v4.0 (gennaio 2025) ha spostato la sua intera palette di colori predefinita da rgb() a oklch(). Il supporto dei browser è ampio da circa il 2023.

OKLCH è la direzione a lungo termine per il colore CSS, ma i codici esadecimali rimarranno la lingua franca degli strumenti di design, delle specifiche dei marchi e degli snippet copiati e incollati, sono brevi, sicuri da copiare e incollare attraverso qualsiasi mezzo testuale, e universalmente compresi.

L'origine del 1861 dell'RGB additivo

Il modello RGB risale alla teoria tricromatica della visione di Young-Helmholtz (inizio XIX secolo), che proponeva che l'occhio umano abbia tre tipi di recettori del colore corrispondenti al rosso, al verde e al blu. James Clerk Maxwell lo dimostrò sperimentalmente il 17 maggio 1861 alla Royal Institution di Londra. Proiettò tre fotografie in bianco e nero di un nastro tartan (una scattata attraverso un filtro rosso, una verde, una blu) attraverso tre proiettori dotati degli stessi filtri colorati; l'immagine ricombinata sullo schermo mostrava il nastro a colori in modo approssimativamente completo. Questa è generalmente accreditata come la prima fotografia a colori. Lo stesso principio dell'RGB additivo guida ogni display CRT, LCD, OLED e plasma mai realizzato: ogni pixel è una triade di subpixel rosso, verde e blu di luminosità variabile in modo indipendente, e la tua retina li mescola in un colore percepito.

Altre domande

L'esadecimale distingue tra maiuscole e minuscole?

No. #abcdef e #ABCDEF sono identici per il parser. La specifica CSS è esplicita: i valori di colore esadecimali non distinguono tra maiuscole e minuscole. Anche un misto come #FfAa00 è legale, sebbene poco comune nel codice di produzione. (Da non confondere con i frammenti di URL, dove il cancelletto iniziale è un concetto sintattico del tutto diverso.)

Perché fare la media di due codici esadecimali produce un grigio fangoso?

Perché i valori esadecimali sono codificati in gamma (viene applicata la funzione di trasferimento sRGB), e fare la media nello spazio gamma non è lo stesso che farla nella luce lineare. L'esempio classico è linear-gradient(red, green) che produce un punto intermedio verde oliva fangoso, la matematica è corretta nello spazio codificato in gamma ma visivamente sbagliata. Le moderne funzioni di colore come OKLCH risolvono questo interpolando in uno spazio percettivamente uniforme, ed è per questo che producono gradienti più fluidi.

Perché non esiste un codice esadecimale per i colori «neon» o «fluorescenti»?

Perché la notazione esadecimale è implicitamente sRGB, e sRGB copre solo circa il 36% dei colori che l'occhio umano può vedere. Molti colori vivaci (verdi smeraldo saturi, rosso-aranci brillanti, vernici fluorescenti) esistono in natura e possono essere mostrati su moderni schermi a gamma ampia ma cadono fuori dal cubo sRGB. Per raggiungerli hai bisogno di color(display-p3 …), color(rec2020 …) o oklch() con valori di croma elevati. Quei colori non hanno un equivalente esadecimale.

Cos'era la «palette web-safe»?

Alla fine degli anni '90, quando molti monitor erano limitati a 256 colori, i designer si attenevano a una palette di 216, l'intersezione delle palette di sistema di Windows e Mac OS. I 216 derivavano da un cubo 6×6×6: ognuno di R, G e B assumeva solo i valori 00, 33, 66, 99, CC, FF. Lynda Weinman la rese popolare nel suo libro del 1996 Designing Web Graphics. Divenne obsoleta intorno al 2000 quando il colore a 24 bit arrivò sull'hardware di consumo. Oggi è pura curiosità storica, occasionalmente ancora visibile in codici esadecimali d'epoca come #CC0033 o #993366.

Viene inviato qualcosa a un server?

No. Da esadecimale a RGB sono due righe di aritmetica JavaScript a funzione pura. La conversione viene eseguita localmente; nulla del colore che inserisci viene caricato da nessuna parte; la pagina funziona offline una volta caricata.

Strumenti correlati