Skip to main content

Convertitore colori

Italiano

Converti tra i formati colore HEX, RGB e HSL.

hex
#3b82f6
rgb
rgb(59, 130, 246)
hsl
hsl(217, 91%, 60%)
Tutti i calcoli sono eseguiti localmente nel tuo browser. Nessun dato viene inviato al server.

I risultati hanno carattere informativo. Verificali con altre fonti.

HEX, RGB e HSL: lo stesso colore in tre modi

Queste tre notazioni descrivono colori identici; differiscono per ciò che rendono facile. HEX e RGB indirizzano direttamente i canali rosso, verde e blu. HSL separa la tonalità da saturazione e luminosità, ed è per questo la scelta giusta quando si costruisce una palette.

Come funziona

  • HEX sono due cifre esadecimali per canale: #RRGGBB, ogni coppia da 00 a FF (0–255).
  • RGB sono gli stessi tre numeri in decimale, talvolta con canale alfa come rgba().
  • HSL indica la tonalità in gradi su una ruota cromatica (0–360), più saturazione e luminosità in percentuale.
HEX → RGB:  dividi in coppie, leggi ciascuna in base 16
  #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB → HSL:  normalizza a 0–1, poi
  L = (max + min) / 2
  S = (max − min) / (1 − |2L − 1|)
  H = l'angolo che dipende dal canale dominante

Esempio pratico

Conversione di #3B82F6 — un blu da interfaccia molto comune — attraverso le tre notazioni.

  1. 3B = 3×16 + 11 = 59, 82 = 8×16 + 2 = 130, F6 = 15×16 + 6 = 246
  2. rgb(59, 130, 246)
  3. normalizzazione: r=0,231, g=0,510, b=0,965 → max=0,965 (blu), min=0,231
  4. L = (0,965 + 0,231) / 2 = 0,598 → 60%
  5. S = (0,965 − 0,231) / (1 − |2(0,598) − 1|) = 0,734 / 0,804 = 0,913 → 91%
  6. il blu è il canale dominante, da cui H ≈ 217°

hsl(217, 91%, 60%). Per ricavarne una palette, tieni la tonalità a 217 e varia la luminosità: esattamente la mossa che HSL rende banale e HEX faticosa.

Come leggere il risultato

  • Uguale luminosità in HSL non significa uguale luminosità percepita. Il giallo al 50% appare molto più chiaro del blu al 50%, perché HSL è una semplice trasformazione matematica di RGB e non sa nulla della visione umana. Per un contrasto accessibile calcola il rapporto di contrasto WCAG invece di confrontare le luminosità.
  • L'HEX a tre cifre è un'abbreviazione in cui ogni cifra viene raddoppiata: #3BF significa #33BBFF, non #03B0F0.
  • Gli arrotondamenti si accumulano. Un passaggio HEX → HSL → HEX può spostare un canale di un'unità: tieni una notazione come riferimento nei tuoi design token.
  • Gli spazi colore CSS più recenti — oklch in particolare — risolvono il problema percettivo di HSL e vale la pena usarli dove il supporto dei browser lo consente.

Domande frequenti

Quale notazione usare nel CSS?
HSL o oklch per tutto ciò che generi in modo sistematico, come le sfumature di un colore di marca, perché cambiare un numero cambia una cosa sola. HEX va benissimo per valori fissi forniti dal design.
Perché il mio colore appare diverso in un'altra applicazione?
Quasi sempre per una differenza di profilo colore. La stessa terna RGB viene resa diversamente in sRGB e Display P3, ed è per questo che gli screenshot della stessa pagina non coincidono tra dispositivi.

Fonti