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

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.

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

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. 1

   Togli il cancelletto e dividi in coppie

   #7c3aed diventa 7c, 3a ed ed. Sono rosso, verde e blu in quest’ordine.

2. 2

   Converti la coppia del rosso

   7c: 7 × 16 = 112, e c vale 12, quindi il rosso è 112 + 12 = 124.

3. 3

   Converti la coppia del verde

   3a: 3 × 16 = 48, e a vale 10, quindi il verde è 48 + 10 = 58.

4. 4

   Converti la coppia del blu

   ed: e vale 14, 14 × 16 = 224, e d vale 13, quindi il blu è 224 + 13 = 237.

5. 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.

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.

.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%);
}

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.

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 }

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:

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'

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 e OKLCH descrivono i colori per tinta e luminosità, così le piccole modifiche si comportano in modo prevedibile.

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 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 le mostrano all’opera.

Prima di pubblicare un colore convertito come testo, controllalo contro il suo sfondo con un verificatore di contrasto del colore. 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.