HEX in RGB: La Guida Completa alla Conversione

Ogni colore che vedi su uno schermo è fondamentalmente tre numeri: rosso, verde e blu. La domanda è solo come quei numeri vengono scritti. La notazione HEX li comprime in una stringa di sei caratteri familiare a designer e sviluppatori. La notazione RGB li espande in tre valori espliciti usati nelle funzioni CSS, nei design token e nei pipeline di dati.

Questa guida copre il quadro completo: la matematica dietro la codifica esadecimale, il modello RGB, una conversione manuale passo dopo passo e le regole pratiche per scegliere tra HEX e RGB nei flussi di lavoro reali di CSS e design.

Come funziona la codifica esadecimale

Il sistema esadecimale è in base 16, usa le cifre 0–9 e le lettere A–F, dove A=10, B=11, C=12, D=13, E=14, F=15. Una coppia di due caratteri hex può rappresentare valori da 00 (0 in decimale) a FF (255 in decimale). Questo è esattamente l'intervallo necessario per un singolo canale colore. Quindi un codice HEX di sei caratteri come #3A7BD5 è tre coppie: 3A (rosso), 7B (verde), D5 (blu). Il prefisso # è una convenzione CSS, non parte del valore numerico. I codici abbreviati come #FFF si espandono in #FFFFFF — ogni cifra viene raddoppiata.

Il modello di colore RGB

RGB sta per Rosso, Verde, Blu — i tre canali primari della miscelazione additiva del colore usata da ogni display digitale. Ogni canale va da 0 (nessuno) a 255 (massimo). rgb(0, 0, 0) è nero puro; rgb(255, 255, 255) è bianco puro. Il modello è additivo: mescolare il rosso e il verde massimi produce il giallo (rgb(255, 255, 0)). Questo è l'opposto della miscelazione sottrattiva usata nella pittura o nella stampa. CSS accetta anche la sintassi moderna senza virgole: color: rgb(58 123 213).

Conversione manuale passo dopo passo

Per convertire #3A7BD5 in RGB: dividi nelle coppie 3A, 7B, D5. Converti ogni coppia da hex a decimale. Per 3A: 3 × 16 + 10 = 58. Per 7B: 7 × 16 + 11 = 123. Per D5: 13 × 16 + 5 = 213. Risultato: rgb(58, 123, 213). Per l'operazione inversa, dividi ogni valore decimale per 16, prendi il quoziente come prima cifra hex e il resto come seconda.

#3A7BD5

R = 3A → 3×16 + 10 = 58
G = 7B → 7×16 + 11 = 123
B = D5 → 13×16 + 5 = 213

Risultato: rgb(58, 123, 213)

HEX vs RGB in CSS: quando usare ciascuno

HEX è compatto e supportato universalmente. Usalo per valori di colore statici in CSS, sistemi di design e ovunque la brevità sia importante. RGB è preferibile quando è necessario manipolare il colore in JavaScript o con calc() in CSS. Le proprietà personalizzate CSS funzionano ugualmente bene con entrambi: --brand: #3A7BD5 oppure --brand: rgb(58 123 213).

Canale alpha: HEX8 vs rgba()

La trasparenza viene aggiunta diversamente in ciascun formato. In HEX, aggiungi due cifre hex per l'alpha: #3A7BD5FF è completamente opaco, #3A7BD580 è al 50% trasparente. In CSS, rgba() è l'approccio tradizionale: rgba(58, 123, 213, 0.5). Il CSS moderno consente anche a rgb() di accettare un alpha opzionale: rgb(58 123 213 / 0.5). HEX8 è supportato in tutti i browser moderni ma può essere meno leggibile.

Casi d'uso pratici

I design token tipicamente memorizzano i colori in HEX per la portabilità tra strumenti (Figma, Storybook, Style Dictionary). Le variabili CSS possono contenere entrambi i formati. Quando si passano i colori alla Canvas API o agli shader WebGL, sono necessari i valori RGB — la stringa HEX deve essere analizzata prima con parseInt("3A", 16). Per le animazioni CSS con color-mix() o transizioni @property, il formato rgb() o hsl() offre ai browser maggiore flessibilità di interpolazione.

Domande Frequenti