Colore & Design

Convertitore di Colori HEX / RGB / HSL

Traduci qualsiasi colore tra HEX, RGB e HSL con cursori dal vivo, un selettore interattivo e stringhe CSS pronte per la copia — tutto calcolato nel tuo browser.

Current color

#1A73E8

rgb(26, 115, 232)

HEX or color picker

RGB channels

HSL channels

Copy as

HEX

#1A73E8

RGB

rgb(26, 115, 232)

HSL

hsl(214, 82%, 51%)

Contrast snapshot

WCAG ratio of this color against pure white and pure black backgrounds.

On white (#FFFFFF)4.51:1

On black (#000000)4.66:1

Cos'è un Convertitore di Colori?

Un convertitore di colori traduce tra i tre formati che designer e sviluppatori usano ogni giorno: HEX (#RRGGBB) per i fogli di stile, RGB (rosso, verde, blu 0–255) per tele e strumenti di immagini, e HSL (tonalità, saturazione, luminosità) per una modifica intuitiva. Descrivono tutti lo stesso punto nello spazio colore sRGB — scambiano solo leggibilità per matematica. Questo strumento mantiene i tre sincronizzati mentre modifichi uno di essi, mostra un campione dal vivo e riporta un rapido istante di contrasto WCAG così sai se il colore è sicuro per il testo del corpo su bianco o nero. Tutto funziona localmente nel tuo browser; nessun colore viene mai caricato o registrato.

Come convertire un colore

1
Scegli un formato di partenza
Incolla un valore HEX (con o senza il # iniziale), trascina il selettore colore nativo, o imposta i canali RGB / HSL con i cursori o gli input numerici.
2
Guarda l'aggiornamento del campione
Il grande campione e l'etichetta HEX si aggiornano ad ogni pressione di tasto o trascinamento del cursore, così puoi vedere il colore prima di confermarlo.
3
Leggi gli altri due formati
Qualsiasi formato tu abbia modificato, gli altri due vengono ricalcolati istantaneamente nella sezione Copia come — HEX, rgb(...), e hsl(...) pronti per essere incollati in CSS, strumenti di design o codice.
4
Copia il valore di cui hai bisogno
Clicca su Copia in qualsiasi riga per mettere quella stringa negli appunti. Il pulsante conferma con un segno di spunta per 1.5 secondi.
5
Controlla il contrasto
Lo snapshot del contrasto mostra il rapporto WCAG del tuo colore rispetto al bianco puro e al nero puro. Se hai bisogno di verdetti WCAG AA / AAA completi contro uno sfondo personalizzato, passa allo strumento Controllo del contrasto collegato qui sotto.

Matematica della conversione dei colori

HEX → RGB:
  R = parseInt(hex[0..1], 16)
  G = parseInt(hex[2..3], 16)
  B = parseInt(hex[4..5], 16)
 
RGB → HSL (ogni canale scalato da 0 a 1):
  max = max(R, G, B); min = min(R, G, B)
  L   = (max + min) / 2
  S   = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
  H dipende da quale canale è max:
    R: H = 60 · ((G − B) / (max − min) mod 6)
    G: H = 60 · ((B − R) / (max − min) + 2)
    B: H = 60 · ((R − G) / (max − min) + 4)

HEX è semplicemente RGB scritto in base 16 — tre coppie di cifre esadecimali, una per canale, impacchettate in una singola stringa. HSL è una rimodellazione percettiva dello stesso cubo RGB: tonalità (0–360°) sceglie una fetta della ruota dei colori, saturazione (0–100%) è quanto è vivido rispetto al grigio, e luminosità (0–100%) è quanto è vicino al bianco o al nero. Le conversioni sopra sono senza perdita modulo arrotondamento, quindi HEX ↔ RGB ↔ HSL ↔ HEX dovrebbe tornare al stesso valore.

Riferimento: Modulo Colore CSS Livello 4 — sRGB

Esempi

Input	Formati equivalenti
#1A73E8	rgb(26, 115, 232) · hsl(214, 82%, 51%) Blu Google — una tonalità popolare per link / pulsanti primari.
rgb(255, 105, 180)	#FF69B4 · hsl(330, 100%, 71%) Colore nominato CSS rosa caldo, espresso in tre modi.
hsl(120, 73%, 75%)	#9EE89E · rgb(158, 232, 158) Un verde pastello — facile da regolare sollevando il cursore L.
#03A	#0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) La notazione abbreviata a tre cifre si espande nella sua equivalente a sei cifre.

Casi d'uso comuni

Traduci un campione HEX da un file Figma in rgb() o hsl() per una variabile CSS
Scegli una tonalità con il cursore H, poi regola S e L per ottenere una sfumatura del marchio
Converti i valori RGB da uno strumento grafico o da un selettore di screenshot nel HEX che il tuo foglio di stile si aspetta
Controlla rapidamente se un colore del marchio candidato ha abbastanza contrasto rispetto al bianco o al nero
Crea una scala tonale mantenendo costante la tonalità e variando il canale di luminosità
Controlla un nome di colore che il tuo designer ha menzionato rispetto al reale HEX nel codice
Ritorna una notazione abbreviata a 3 cifre (#03A) nella forma canonica a 6 cifre (#0033AA)

Strumenti correlati

Controllo del Contrasto

Testa qualsiasi due colori per la conformità al contrasto WCAG AA e AAA per testo e UI.

Calcolatore di Età

Calcola la tua età esatta in anni, mesi e giorni a partire da qualsiasi data di nascita.

Calcolatore BMI

Controlla l'indice di massa corporea in base all'altezza e al peso utilizzando unità metriche o imperiali.

Calcolatore Percentuale

Calcola percentuali, variazione percentuale e percentuale di un totale in pochi secondi.

Domande frequenti

I miei dati sui colori vengono inviati a un server?

No. Tutta la matematica di conversione viene eseguita nel tuo browser. Nulla di ciò che digiti, trascini o incolli viene caricato o registrato.

Qual è la differenza tra RGB e HSL?

RGB descrive un colore come la quantità di luce rossa, verde e blu mescolata (0–255 per canale) — è così che i monitor emettono effettivamente il colore. HSL descrive lo stesso colore in termini comprensibili per gli esseri umani: tonalità (0–360°), saturazione (0–100%) e luminosità (0–100%). Si scambiano senza perdita, quindi usa quello che è più facile per il compito: RGB per i dati delle immagini, HSL per modificare le palette.

Perché HSL mostra una tonalità di 0 per i grigi?

I grigi puri hanno saturazione zero, quindi la tonalità è indefinita — per convenzione torna a 0°. Scorrere la tonalità mentre la saturazione è 0 non cambierà il colore finché non aumenti la saturazione sopra zero.

Questo strumento supporta l'alpha (trasparenza)?

Non ancora. La versione attuale gestisce solo colori completamente opachi — i formati coperti sono #RRGGBB, rgb(r, g, b) e hsl(h, s%, l%). L'alpha (#RRGGBBAA, rgba(), hsla()) è sulla roadmap se c'è richiesta.

Qual è la differenza tra HSL e HSV?

HSL e HSV condividono gli assi di tonalità e saturazione ma trattano il terzo in modo diverso: la luminosità di HSL è centrata (50% è completamente saturo, 100% è bianco, 0% è nero), mentre il valore di HSV va da 0 (nero) a 100% (la tonalità pura, senza bianco aggiunto). HSL tende a sembrare più naturale per scegliere tinte e sfumature — ed è per questo che CSS lo utilizza.

Perché il mio HEX incollato potrebbe essere rifiutato?

Il parser accetta la forma abbreviata a 3 cifre (#03A), la forma canonica a 6 cifre (#0033AA) e qualsiasi forma senza il # iniziale. Qualsiasi altra cosa — alpha a 4 cifre, alpha a 8 cifre, colori nominati o stringhe rgb()/hsl() — verrà segnalata come non valida. Rimuovi l'alpha o usa un HEX con 3 o 6 cifre esadecimali.

HEX è più preciso di RGB?

No — HEX è semplicemente RGB scritto in base 16, quindi portano esattamente la stessa precisione (8 bit per canale, ~16,7 milioni di colori). I browser e gli strumenti di design convertono uno nell'altro internamente; scegli quello che è più facile da leggere nel tuo contesto.

Come posso rendere un colore più chiaro o più scuro?

Passa alla vista HSL e sposta il canale L (luminosità) — questo è il suo intero scopo. Abbassare L scurisce, alzare L schiarisce. La saturazione può rimanere costante, il che mantiene l'identità del colore mentre sposta il suo tono.

Ultimo aggiornamento 2026-04-25

Cos'è un Convertitore di Colori?

Come convertire un colore

Scegli un formato di partenza

Incolla un valore HEX (con o senza il # iniziale), trascina il selettore colore nativo, o imposta i canali RGB / HSL con i cursori o gli input numerici.

Guarda l'aggiornamento del campione

Il grande campione e l'etichetta HEX si aggiornano ad ogni pressione di tasto o trascinamento del cursore, così puoi vedere il colore prima di confermarlo.

Leggi gli altri due formati

Qualsiasi formato tu abbia modificato, gli altri due vengono ricalcolati istantaneamente nella sezione Copia come — HEX, rgb(...), e hsl(...) pronti per essere incollati in CSS, strumenti di design o codice.

Copia il valore di cui hai bisogno

Clicca su Copia in qualsiasi riga per mettere quella stringa negli appunti. Il pulsante conferma con un segno di spunta per 1.5 secondi.

Controlla il contrasto

Lo snapshot del contrasto mostra il rapporto WCAG del tuo colore rispetto al bianco puro e al nero puro. Se hai bisogno di verdetti WCAG AA / AAA completi contro uno sfondo personalizzato, passa allo strumento Controllo del contrasto collegato qui sotto.

Matematica della conversione dei colori

HEX → RGB:
  R = parseInt(hex[0..1], 16)
  G = parseInt(hex[2..3], 16)
  B = parseInt(hex[4..5], 16)
 
RGB → HSL (ogni canale scalato da 0 a 1):
  max = max(R, G, B); min = min(R, G, B)
  L   = (max + min) / 2
  S   = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
  H dipende da quale canale è max:
    R: H = 60 · ((G − B) / (max − min) mod 6)
    G: H = 60 · ((B − R) / (max − min) + 2)
    B: H = 60 · ((R − G) / (max − min) + 4)

Esempi

Input	Formati equivalenti
#1A73E8	rgb(26, 115, 232) · hsl(214, 82%, 51%) Blu Google — una tonalità popolare per link / pulsanti primari.
rgb(255, 105, 180)	#FF69B4 · hsl(330, 100%, 71%) Colore nominato CSS rosa caldo, espresso in tre modi.
hsl(120, 73%, 75%)	#9EE89E · rgb(158, 232, 158) Un verde pastello — facile da regolare sollevando il cursore L.
#03A	#0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) La notazione abbreviata a tre cifre si espande nella sua equivalente a sei cifre.

Casi d'uso comuni

Traduci un campione HEX da un file Figma in rgb() o hsl() per una variabile CSS

Scegli una tonalità con il cursore H, poi regola S e L per ottenere una sfumatura del marchio

Converti i valori RGB da uno strumento grafico o da un selettore di screenshot nel HEX che il tuo foglio di stile si aspetta

Controlla rapidamente se un colore del marchio candidato ha abbastanza contrasto rispetto al bianco o al nero

Crea una scala tonale mantenendo costante la tonalità e variando il canale di luminosità

Controlla un nome di colore che il tuo designer ha menzionato rispetto al reale HEX nel codice

Ritorna una notazione abbreviata a 3 cifre (#03A) nella forma canonica a 6 cifre (#0033AA)