HEX to RGB Color Converter

Cosa è un Codice di Colore HEX?

Un codice di colore HEX è una stringa alfanumerica a sei caratteri utilizzata nel design web e nelle grafiche digitali per rappresentare un colore specifico. Il formato segue il modello #RRGGBB, dove ogni coppia di caratteri codifica l'intensità di uno dei tre colori primari additivi — rosso (RR), verde (GG) e blu (BB) — utilizzando la notazione esadecimale (base 16). Ogni coppia va da 00 (zero intensità) a FF (massima intensità, equivalente a 255 in decimale).

I codici HEX sono nati dalla necessità di definire i colori in HTML e CSS senza dipendere da parole chiave di colore. Sebbene CSS supporti ora diversi formati di colore, tra cui rgb(), hsl() e oklch(), HEX rimane la notazione più utilizzata in sviluppo front-end, design, linee guida di branding e design. Quasi ogni selettore di colore nei tool come Figma, Sketch, Adobe Photoshop e Canva visualizza un valore HEX di default.

Il numero totale di colori unici rappresentabili con i codici HEX a sei cifre è di 16.777.216 (256 × 256 × 256). Ciò è spesso definito come "Colore vero" o "24-bit", che corrisponde alla profondità di colore delle maggior parte delle moderne display. Ogni canale riceve 8 bit (un byte) e tre canali insieme producono 24 bit di dati di colore.

I codici HEX sono insensibili al caso, quindi #ff8000 e FF8000 si riferiscono allo stesso colore. Alcune linee guida di stile preferiscono l'uppercase per la leggibilità, mentre i minificatori CSS escono spesso in lowercase per risparmiare byte — anche se in pratica la differenza è trascurabile.

Come Convertire HEX in RGB Passo dopo Passo

La conversione di un codice di colore HEX in suo equivalente RGB è semplice. Il processo consiste nel dividere la stringa a sei caratteri in tre coppie e convertire ogni coppia da esadecimale (base 16) a decimale (base 10). Ecco il metodo passo dopo passo:

1. Rimuovi il simbolo di hashtag. Se il codice HEX inizia con #, rimuovilo. Ad esempio, #1A2B3C diventa 1A2B3C.
2. Dividi in tre coppie. Divide la stringa rimanente in tre gruppi di due caratteri: 1A, 2B, 3C.
3. Converti ogni coppia in decimale. Utilizza il sistema di valore esadecimale dove il primo carattere è moltiplicato per 16 e il secondo carattere è aggiunto:
   • Rosso: 1A → (1 × 16) + 10 = 26
   • Verde: 2B → (2 × 16) + 11 = 43
   • Blu: 3C → (3 × 16) + 12 = 60
4. Scrivi il valore RGB. Combinare i tre valori decimali: rgb(26, 43, 60).

I numeri esadecimali e i loro equivalenti in decimale sono: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Memorizzare A attraverso F è l'unica parte che differisce dall'aritmetica decimale standard.

Per la conversione programmatica, la maggior parte dei linguaggi offre funzioni integrate. In JavaScript, parseInt("1A", 16) restituisce 26. In Python, int("1A", 16) fa lo stesso. CSS gestisce entrambi i formati nativamente, quindi la conversione è principalmente utile quando si ha bisogno di manipolare singoli canali di colore in codice — ad esempio, regolare la luminosità, creare gradienti in modo programmatico o mescolare due colori.

3-Digit vs 6-Digit HEX Codes

CSS supporta un formato a 3 cifre HEX (#RGB) come una comodità quando ogni delle tre coppie consiste di cifre identiche. In questo formato a 3 cifre, ogni singola cifra viene espansa duplicandola. Ad esempio:

• #F80 si espande in #FF8800 → rgb(255, 136, 0)
• #FFF si espande in #FFFFFF → rgb(255, 255, 255)
• #000 si espande in #000000 → rgb(0, 0, 0)
• #09C si espande in #0099CC → rgb(0, 153, 204)
• #A3F si espande in #AA33FF → rgb(170, 51, 255)

La notazione a 3 cifre riduce il numero di colori disponibili da 16,7 milioni a solo 4.096 (16 × 16 × 16), quindi non può rappresentare ogni colore. È comunemente utilizzato per colori semplici o noti nei file CSS dove la concisione è apprezzata.

CSS supporta anche codici HEX a 4 cifre (#RGBA) e a 8 cifre (#RRGGBBAA) che includono un canale alpha (trasparenza). Il valore alpha segue la stessa logica di base: FF è completamente opaco e 00 è completamente trasparente. Ad esempio, #FF880080 rappresenta il colore rgb(255, 136, 0) con 50% di opacità. Il nostro convertitore si concentra sui formati standard a 3 e 6 cifre; se si inserisce un codice con un canale alpha, elaborerà solo la parte RGB.

Tavola di riferimento HEX a RGB

Di seguito è riportata una tavola di riferimento dei colori HEX più comuni e i loro equivalenti RGB. Questa tavola copre i colori più utilizzati nella progettazione web, i colori definiti da CSS e le scelte di palette dei marchi più popolari.

CSS definisce 147 colori nominati in totale, ognuno con un valore HEX corrispondente. Sebbene i colori nominati siano comodi per la prototipazione, i progetti professionali si affidano di solito ai valori HEX o RGB per la precisione e la coerenza tra i browser e gli strumenti di progettazione.

Colori dei marchi popolari – HEX e valori RGB

I sviluppatori e i designer hanno spesso bisogno dei valori esatti HEX e RGB dei colori dei marchi più popolari per le mockup, le integrazioni e le guide di stile. Di seguito è riportato un riferimento rapido per alcuni dei colori dei marchi richiesti più spesso:

Le linee guida dei marchi spesso specificano i colori in diversi formati (HEX, RGB, CMYK, Pantone). Quando si implementano i colori dei marchi in CSS, è sempre consigliabile confermare i valori contro la pagina di risorse ufficiale del marchio per garantire l'accuratezza. I colori possono variare leggermente tra le schermate, quindi la coerenza nel codice è essenziale.

Modelli di colore confrontati: HEX, RGB, HSL e CMYK

Capire quando utilizzare ogni modello di colore aiuta a lavorare in modo più efficiente in diversi strumenti e media:

HEX e RGB sono identici matematicamente — rappresentano lo stesso spazio di colore utilizzando notazioni diverse. La conversione tra di loro è una semplice traduzione da base-16 a base-10 con nessuna perdita di precisione o differenze di gamma. HSL, invece, è una trasformazione di RGB in un sistema di coordinate cilindriche che rende più facile ragionare sulla tonalità, saturazione e luminosità indipendentemente. CMYK è un modello di colore sottrattivo utilizzato nella stampa e non può rappresentare tutti i colori RGB (e viceversa), quindi le conversioni tra RGB e CMYK sono approssimative.

In CSS moderno (Livello 4), la funzione color() e nuovi spazi di colore come oklch() e display-p3 stanno guadagnando adozione, soprattutto per display a grande gamma. Tuttavia, HEX e RGB rimangono il baseline per la compatibilità web e sono supportati da ogni browser in uso oggi.

Utilizzo di HEX e RGB in CSS e JavaScript

Entrambi i valori HEX e RGB sono validi in CSS e producono risultati identici. Ecco esempi pratici di come ogni formato viene utilizzato:

Dichiarazioni CSS:

/* Notazione HEX */
body { background-color: #1A2B3C; }

/* Notazione RGB */
body { background-color: rgb(26, 43, 60); }

/* RGB con alpha (trasparenza) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* CSS moderno — sintassi a spaziata */
.card { color: rgb(26 43 60 / 80%); }

Funzioni di conversione JavaScript:

// HEX a RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB a HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Quando si lavora con l'API Canvas HTML, i colori devono spesso essere impostati come stringhe. Entrambi "#FF8000" e "rgb(255, 128, 0)" funzionano per fillStyle e strokeStyle. Tuttavia, il metodo getImageData() restituisce i dati dei pixel come un array di interi da 0 a 255 (RGBA), rendendo RGB il formato naturale per la manipolazione dei pixel.

In CSS le proprietà personalizzate (variabili), i valori HEX sono comuni per la loro semplicità:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* per utilizzo con rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Questo schema di archiviazione dei valori RGB come variabili CSS è una tecnica popolare che consente di applicare l'opacità dinamicamente senza convertire tra formati in esecuzione.

Accessibilità e Contrasto di Colore

La conversione da HEX a RGB è spesso il primo passo per calcolare i rapporti di contrasto per la conformità all'accessibilità. I Web Content Accessibility Guidelines (WCAG) richiedono un rapporto di contrasto minimo di 4,5:1 per il testo normale e 3:1 per il testo grande (18px+ grassetto o 24px+ regolare).

La formula del rapporto di contrasto richiede la luminanza relativa di ogni colore, che viene calcolata dai valori RGB lineari. I passaggi sono:

1. Converti da HEX a RGB (0–255 per canale).
2. Normalizza ogni canale a 0–1 dividendo per 255.
3. Applica la formula di linearizzazione sRGB: se il valore è ≤ 0,04045, divide per 12,92; altrimenti calcola ((valore + 0,055) / 1,055) ^ 2,4.
4. Calcola la luminanza: L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
5. Calcola il rapporto di contrasto tra due colori: (L1 + 0,05) / (L2 + 0,05), dove L1 è il colore più chiaro.

Come si può vedere, i valori RGB sono l'input essenziale per ogni calcolo di contrasto di accessibilità. Strumenti come il WebAIM Contrast Checker, il picker di colori di Chrome DevTools e lo scanner di accessibilità axe eseguono questa conversione internamente.

Per i designer, una regola del pollice veloce: testo scuro su sfondo chiaro (o viceversa) con una differenza di luminanza di almeno 125 e una differenza di colore di almeno 500 (utilizzando la somma delle differenze assolute nei canali R, G, B) passerà generalmente ai requisiti WCAG AA.