Conversione HEX in RGB: la mappa numerica dietro ogni colore sullo schermo
Quando scrivi #4f46e5 in un foglio di stile CSS, stai usando una notazione compatta a base 16 per dire al browser: rosso = 79, verde = 70, blu = 229. Questa pagina fa esattamente il contrario: prende un codice esadecimale (HEX) e ne estrae i tre numeri interi RGB compresi tra 0 e 255 necessari per ogni display moderno. A differenza di molti convertitori generici, qui la trasformazione è matematica pura – nessun arrotondamento, nessuna approssimazione, nessuna perdita di informazione.
Perché HEX e RGB sono la stessa cosa scritta in due modi diversi
Un colore sullo schermo è definito da tre canali: rosso, verde e blu. Ogni canale può assumere 256 valori (da 0 a 255), perché un byte (8 bit) è il formato standard usato dalle schede grafiche e dai formati immagine. La notazione HEX rappresenta proprio quei tre byte in base 16: una cifra esadecimale può valere da 0 a 15, e due cifre coprono esattamente 256 combinazioni (16×16 = 256). Quindi #4f46e5 non è altro che tre coppie: 4f (rosso), 46 (verde), e5 (blu).
La pagina si distingue perché non si limita a "mostrare il colore": converte la rappresentazione compatta in una espansa, permettendo di usare i tre numeri direttamente in API JavaScript, canvas, o in software che richiedano valori numerici. Altri convertitori online potrebbero offrire conversioni approssimate o includere canali alfa; qui il contratto è preciso: input HEX a 3 o 6 cifre, output RGB intero esatto.
Come funziona la conversione: dalla base 16 alla base 10
Per passare da una coppia esadecimale (es. 4f) al numero decimale si usa la formula standard:
decimale = (prima_cifra × 16) + seconda_cifra
Ogni cifra esadecimale corrisponde a un valore: 0–9 per le cifre, A=10, B=11, C=12, D=13, E=14, F=15. Quindi per 4f:
- 4 → 4
- f → 15
- (4 × 16) + 15 = 64 + 15 = 79
Per il verde 46: (4×16) + 6 = 64 + 6 = 70. Per il blu e5: (14×16) + 5 = 224 + 5 = 229. Il risultato rgb(79, 70, 229) è esatto e reversibile: se riconverti 79 in esadecimale ottieni 4f (79 / 16 = 4 resto 15 → 4f).
La pagina gestisce automaticamente anche la scrittura abbreviata a tre cifre. Un codice come #abc viene espanso duplicando ogni cifra: aabbcc. Questo perché la specifica CSS (W3C) definisce che #RGB equivale a #RRGGBB, dove ogni coppia è la ripetizione della stessa cifra. Quindi #abc diventa #aabbcc e poi si converte: aa=170, bb=187, cc=204 → rgb(170,187,204). Senza questa espansione automatica un utente che scrive #abc vedrebbe un errore o un risultato sbagliato: la pagina lo gestisce correttamente.
Casi limite e regole precise
La pagina accetta input nei formati seguenti:
| Formato | Esempio valido | Conversione |
|---|---|---|
6 cifre con # |
#4f46e5 |
Diretta |
6 cifre senza # |
4f46e5 |
Diretta (il parser ignora il cancelletto) |
3 cifre con # |
#abc |
Espansione a 6 cifre |
3 cifre senza # |
abc |
Espansione a 6 cifre |
Cosa non viene accettato:
- Codici a 8 cifre (con canale alfa, es.
#4f46e580): la pagina è specifica per HEX → RGB senza trasparenza. Il messaggio di errore è chiaro:
"Inserisci un colore hex come #4f46e5 o #abc." - Codici con caratteri non esadecimali (es.
#4g46e5). - Stringhe troppo corte (1–2 cifre) o troppo lunghe (7+ cifre, salvo 8 che viene filtrato).
Nessun arrotondamento: poiché la conversione è una semplice moltiplicazione per potenze di 16, il risultato è sempre un intero compreso tra 0 e 255. Non c’è bisogno di clipping perché la codifica esadecimale a 6 cifre ha lo stesso dominio dei tre byte RGB.
Aggiornamento sincrono: modificando il campo HEX si aggiornano istantaneamente tutti gli altri formati colore (HSL, HSV, CMYK, LAB). Questo è utile per chi lavora in contesti diversi (stampa, interfacce, analisi colore) e vuole vedere subito le corrispondenze.
Chi usa questa conversione e perché
Sviluppatori front-end
In CSS si può scrivere color: #ff6600 o color: rgb(255, 102, 0). I browser trattano entrambi allo stesso modo, ma in JavaScript (es. per manipolare il colore di un canvas) serve spesso la tupla numerica. Avere una conversione immediata evita errori di calcolo manuale.
Designer e grafici
Molti tool di design (Figma, Sketch, Adobe XD) usano HEX per il copia-incolla rapido, ma richiedono slider RGB per regolazioni fini. Poter passare da #1E90FF a rgb(30, 144, 255) in un click accelera il flusso di lavoro.
Chiunque lavori con grafiche per schermi
Sviluppatori di videogiochi, artisti digitali, chi crea shader o generatori di palette: avere i canali RGB come numeri interi permette di calcolare miscele, gradienti e contrasti con formule lineari.
Studenti di colore digitale
Capire la relazione tra esadecimale e decimale è uno dei primi passi per comprendere il modello colore additivo RGB. La pagina fornisce un feedback immediato: scrivi #ff0000 e vedi rosso puro (255,0,0); scrivi #00ff00 e vedi verde puro (0,255,0).
Relazioni tra HEX, RGB e altri formati
Sebbene la pagina sia focalizzata su HEX → RGB, tutti i campi vengono aggiornati. Ad esempio, dato #4f46e5:
| Formato | Valore calcolato |
|---|---|
| RGB (decimale) | rgb(79, 70, 229) |
| HSL | hsl(244°, 75%, 59%) |
| HSV | hsv(244°, 69%, 90%) |
| CMYK | cmyk(65%, 69%, 0%, 10%) |
| LAB | lab(35, 42, -68) |
Nota: i valori LAB sono approssimati perché richiedono un profilo colore di riferimento (sRGB), ma la pagina fornisce una conversione standard. Per la maggior parte degli usi pratici la differenza è trascurabile.
Errori comuni e come evitarli
- Dimenticare che
#abcnon è uguale a#aabbcc? La pagina lo espande automaticamente, ma se stai facendo manualmente il calcolo devi duplicare ogni cifra. - Confondere
#fffcon#ffffff. Sono equivalenti:#fff→#ffffff→rgb(255,255,255). - Usare lettere minuscole vs maiuscole. Non c’è differenza:
#4F46E5e#4f46e5danno lo stesso risultato. - Pensare che HEX a 8 cifre sia RGB con trasparenza. In realtà RGBA si scrive
rgba(R,G,B,A)in CSS; HEX a 8 cifre (es.#4f46e580) esiste in alcune specifiche, ma questa pagina non lo gestisce perché è dedicata solo a RGB puro.
FAQ
Posso incollare un colore con il cancelletto e senza?
Sì, la pagina accetta entrambi i formati. Il cancelletto viene ignorato dal parser.
Cosa succede se scrivo #xyz dove x, y, z non sono esadecimali?
Viene mostrato l’errore: "Inserisci un colore hex come #4f46e5 o #abc." La pagina esegue una validazione lato client.
La conversione è reversibile?
Sì. Se prendi il risultato RGB e lo riconverti in HEX (per esempio usando la funzione Number(channel).toString(16).padStart(2,'0')) ottieni esattamente il codice esadecimale di partenza.
Perché non supporta il canale alpha (RGBA)?
Perché la pagina è specificamente una conversione HEX-TO-RGB. Per valori con trasparenza esiste un'altra pagina del sito dedicata a HEX-TO-RGBA.
Il valore RGB è sempre intero?
Sì. Ogni canale è un intero tra 0 e 255. Nessuna parte decimale.
Posso usare la pagina offline?
Tutte le conversioni avvengono nel browser con JavaScript. Nessun dato viene inviato a server. Funziona anche senza connessione internet, una volta caricata la pagina.
Note tecniche sulla implementazione
La pagina non si basa su librerie esterne per la conversione. Il codice JavaScript esegue:
- Rimozione del carattere
#se presente. - Controllo lunghezza: 3 o 6 caratteri validi (oltre a controllo cifre esadecimali).
- Se lunghezza 3, espansione:
#rgb→#rrggbb. - Suddivisione in tre coppie e conversione con
parseInt(coppia, 16). - Aggiornamento dei campi output e dei formati derivati.
I colori sono rappresentati nello spazio sRGB, lo standard per il web. I valori LAB sono calcolati usando la matrice di trasformazione D65, comune nei software di design.
Questa pagina è pensata per essere veloce e precisa: non arrotonda, non approssima, non aggiunge canali extra. Se hai bisogno di un colore espresso in numeri, è lo strumento giusto.