# Da HEX a RGB: convertire i codici colore a mano o con il codice

[Canonical HTML page](https://gradiently.design/it/guide/hex-to-rgb)

Un codice HEX sono solo tre numeri scritti in base 16. Una volta che vedi le coppie, convertire a mano richiede pochi secondi, e la versione in codice sono quattro righe.

## The short version

- Per convertire da HEX a RGB, dividi il codice di sei cifre in tre coppie e converti ogni coppia dalla base 16 a un numero tra 0 e 255.
- Ogni coppia si calcola come la prima cifra per 16, più la seconda, dove le lettere da a a f valgono da 10 a 15.
- Il codice HEX #7c3aed è rgb(124 58 237): 7c è 124, 3a è 58 ed è 237.
- Un codice HEX di tre cifre è una forma abbreviata in cui ogni cifra viene raddoppiata, quindi #f60 è lo stesso colore di #ff6600.
- HEX e RGB descrivono esattamente gli stessi colori sRGB, quindi convertire dall’uno all’altro non cambia mai l’aspetto di un colore.

Per convertire **da HEX a RGB**, dividi il codice in tre coppie di caratteri, una per il rosso, una per il verde e una per il blu, e trasforma ogni coppia dalla base 16 in un normale numero tra 0 e 255. Per `#7c3aed` le coppie sono `7c`, `3a` ed `ed`, che diventano 124, 58 e 237, quindi il colore è `rgb(124 58 237)`. Il colore non cambia affatto. HEX e RGB sono due modi di scrivere gli stessi tre numeri.

## Com’è fatto un codice colore HEX

Un codice HEX ha sei caratteri dopo il cancelletto. I primi due sono il canale rosso, i due centrali il verde e gli ultimi due il blu. Ogni canale può contenere 256 valori, da 0 (nessuna luce di quel colore) a 255 (tutta). La base 16 può scrivere ciascuno di quei 256 valori in esattamente due caratteri, ed è per questo che l’HEX è diventato il modo compatto di digitare i colori sul web. Per il quadro generale di come questi codici si collegano tra loro, vedi [i codici colore HEX spiegati](https://gradiently.design/it/guide/color-codes-explained).

La base 16 conta da 0 a 9 e poi prosegue con le lettere. È l’unica cosa che devi memorizzare:

| Cifra HEX | Valore | Cifra HEX | Valore |
| --- | --- | --- | --- |
| da 0 a 9 | da 0 a 9 | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (una coppia) | 255 |

Le lettere non distinguono maiuscole e minuscole: #7C3AED e #7c3aed sono lo stesso colore.

## Come convertire da HEX a RGB a mano

Ogni coppia è un numero di due cifre in base 16. La cifra di sinistra conta le sedicine e quella di destra le unità. Moltiplica la cifra di sinistra per 16, aggiungi quella di destra, e ottieni il valore di quel canale.

1. **Togli il cancelletto e dividi in coppie** `#7c3aed` diventa `7c`, `3a` ed `ed`. Sono rosso, verde e blu in quest’ordine.
2. **Converti la coppia del rosso** `7c`: 7 × 16 = 112, e c vale 12, quindi il rosso è 112 + 12 = **124**.
3. **Converti la coppia del verde** `3a`: 3 × 16 = 48, e a vale 10, quindi il verde è 48 + 10 = **58**.
4. **Converti la coppia del blu** `ed`: e vale 14, 14 × 16 = 224, e d vale 13, quindi il blu è 224 + 13 = **237**.
5. **Scrivi il risultato** Il CSS moderno accetta `rgb(124 58 237)`. La vecchia forma con le virgole `rgb(124, 58, 237)` funziona ancora ovunque.

Due controlli rapidi ti tengono onesto. `00` è sempre 0 e `ff` è sempre 255, quindi ogni coppia che inizia con una lettera da a a f vale 160 o più, e ogni coppia che inizia con 0-7 è sotto 128. Se per `ed` ottieni un numero piccolo, hai letto le cifre al contrario.

- #7c3aed = 124 58 237: #7c3aed
- #336699 = 51 102 153: #336699
- #ff6600 = 255 102 0: #ff6600
- #0d9488 = 13 148 136: #0d9488
- #1e293b = 30 41 59: #1e293b

Cinque conversioni svolte. Provane una a mano, poi confrontala con il nome del campione.

## Codici abbreviati e alfa

Un **codice di tre cifre** è una scorciatoia: raddoppia ogni cifra per ottenere il codice completo. `#f60` significa `#ff6600`, cioè `rgb(255 102 0)`. `#fff` è il bianco e `#000` il nero. Solo i colori le cui coppie ripetono una cifra si possono scrivere così, quindi `#7c3aed` non ha una forma breve.

Un **codice di otto cifre** aggiunge una quarta coppia per l’opacità. Si converte allo stesso modo, poi dividi per 255 per ottenere una frazione. `#7c3aed80` finisce con `80`, che è 128, e 128 ÷ 255 fa circa 0,5, quindi equivale a `rgb(124 58 237 / 50%)`. Un codice di quattro cifre come `#f608` è la versione abbreviata della stessa idea.

```css
.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}
```

Ogni riga di ciascun gruppo viene resa in modo identico. Usa quella che il tuo team legge più in fretta, e resta coerente.

## Da HEX a RGB in JavaScript

Nel codice, `parseInt` con base 16 fa la conversione per te. La funzione qui sotto accetta codici di tre, quattro, sei e otto cifre, con o senza cancelletto, e restituisce i canali più un alfa tra 0 e 1.

```js
function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }
```

Nessuna libreria necessaria. La riga di validazione evita che un refuso diventi in silenzio nero.

## Come convertire da RGB a HEX

Tornare indietro è una divisione. Dividi il canale per 16: il quoziente intero è la prima cifra e il resto è la seconda. Per 153, 153 ÷ 16 fa 9 con resto 9, quindi la coppia è `99`. Per 51 fa 3 con resto 3, cioè `33`, e 102 dà 6 con resto 6, ovvero `66`. Quindi `rgb(51 102 153)` è `#336699`. In JavaScript ci pensa `toString(16)`, con un riempimento perché le cifre singole mantengano lo zero iniziale:

```js
const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'
```

Senza padStart, 13 diventerebbe d invece di 0d e il codice avrebbe un carattere in meno.

## Quando usare HEX, RGB o altro

L’HEX è compatto e facile da incollare tra strumenti, ed è per questo che lo usano le linee guida di brand e i file di design. L’RGB è più facile da ragionare quando devi cambiare un solo canale o aggiungere trasparenza nel codice. Nessuno dei due è bravo con le domande che i designer si pongono davvero, come «rendilo un po’ più chiaro» o «trova una versione più morbida di questo blu». Per quelle, il [colore HSL](https://gradiently.design/it/guide/hsl-colors) e [OKLCH](https://gradiently.design/it/guide/oklch-explained) descrivono i colori per tinta e luminosità, così le piccole modifiche si comportano in modo prevedibile.

### HEX o RGB vanno bene per

- Linee guida di brand e passaggio agli sviluppatori
- Copiare un colore tra un’app e l’altra
- Aggiungere trasparenza in CSS o canvas
- Rispettare un valore esatto da una specifica

### Scegli HSL o OKLCH per

- Schiarire o scurire un colore
- Costruire tinte e sfumature per una palette
- Gradienti più fluidi tra tinte lontane
- Temi con variabili CSS

Un’altra distinzione conta per la stampa. HEX e RGB descrivono la luce su uno schermo, quindi una stampante deve tradurli in inchiostro, e i colori molto brillanti dello schermo possono spegnersi sulla carta. [RGB e CMYK a confronto](https://gradiently.design/it/guide/rgb-vs-cmyk) spiega cosa aspettarsi. Sullo schermo i colori convertiti sono identici, e quando serve far svanire un colore, le forme con alfa viste sopra sono ciò che scrivi; [i gradienti trasparenti in CSS](https://gradiently.design/it/guide/css-gradient-transparent) le mostrano all’opera.

Prima di pubblicare un colore convertito come testo, controllalo contro il suo sfondo con un [verificatore di contrasto del colore](https://gradiently.design/it/guide/color-contrast-accessibility). In Gradiently raramente serve: l’inchiostro automatico sceglie testo chiaro o scuro per ogni riga dalla palette del Mark stesso, così le parole si leggono.

## FAQ

### Come si converte da HEX a RGB?

Dividi il codice di sei cifre in tre coppie e converti ciascuna dalla base 16: moltiplica la prima cifra per 16 e aggiungi la seconda, con le lettere da a a f che valgono da 10 a 15. #7c3aed diventa 124, 58, 237.

### Che cos’è #ffffff in RGB?

È rgb(255 255 255), bianco puro. Ogni coppia è ff, cioè 15 × 16 + 15 = 255.

### Come converto da HEX a RGBA?

Converti le prime tre coppie come al solito. Se il codice ha otto cifre, converti anche l’ultima coppia e dividila per 255 per ottenere l’alfa, quindi 80 dà circa 0,5.

### Convertire da HEX a RGB cambia il colore?

No. Entrambi sono notazioni degli stessi valori sRGB, quindi il colore viene reso in modo identico nei due casi.

### Come riconverto da RGB a HEX?

Dividi ogni canale per 16: il quoziente intero è la prima cifra HEX e il resto la seconda. In JavaScript usa value.toString(16).padStart(2, '0').