Convertitore di colori

Converti tra HEX, RGB, HSL e OKLCH con anteprima dal vivo.

Di Nethanel Bar, Co-founder & CEO

Ultimo aggiornamento 25 aprile 2026

Vuoi imparare a programmare sul serio?

Coddy ti insegna facendoti scrivere codice vero nel browser: lezioni interattive, feedback immediato e aiuto dall'AI quando ti blocchi.

Inizia gratis

Cos'è un convertitore di colori?

Un convertitore di colori prende un colore in qualsiasi formato comune, HEX, RGB, HSL, OKLCH, e ti mostra tutti gli altri formati che rappresentano lo stesso colore. È lo strumento di tutti i giorni per designer e sviluppatori quando devono abbinare i colori del brand, fare il debug delle variabili CSS, confrontare le palette della modalità scura e chiara o controllare il contrasto per l'accessibilità.

Il CSS supporta diversi modelli di colore, e ognuno ha i suoi punti di forza. HEX e RGB descrivono i colori in termini di luce rossa, verde e blu. HSL è più intuitivo (tonalità, saturazione, luminosità). OKLCH è un modello percettivo in cui variazioni numeriche uguali appaiono come variazioni percettive uguali: per questo è particolarmente utile per generare tinte, ombre e palette accessibili.

L'accessibilità dipende dal contrasto, non solo dal colore. Le WCAG definiscono un rapporto di contrasto tra testo e sfondo: almeno 4.5:1 per il testo normale, 3:1 per i titoli grandi. Un buon strumento per i colori riporta entrambi i numeri accanto al colore, così non rilasci per sbaglio un'interfaccia non accessibile.

Cosa imparerai convertendo i colori

HEX è solo una forma abbreviata di RGB: #ff8800 è uguale a rgb(255, 136, 0).
HSL separa la *tonalità* (quale colore), la *saturazione* (quanto è vivace) e la *luminosità* (quanto è chiaro). Regolarne una senza toccare le altre è molto più intuitivo che ritoccare R/G/B.
OKLCH è percettivamente uniforme: alzare L del 10% in OKLCH produce più o meno la stessa variazione di luminosità per qualsiasi tonalità. HSL non si comporta così.
Le tinte aggiungono bianco, le ombre aggiungono nero. La differenza tra due tinte della stessa tonalità è ciò che rende coesa la palette di un'interfaccia.

Come convertire e controllare i colori passo dopo passo

Inserisci un colore
Incolla un valore HEX, RGB, HSL o OKLCH qualsiasi, oppure scegli un colore con il contagocce o il selettore nativo.
Leggi tutti i formati insieme
Il convertitore mostra lo stesso colore espresso in tutti i formati supportati. Clicca su un valore per copiarlo negli appunti.
Regola con gli slider HSL o OKLCH
Trascina lo slider della luminosità per le tinte (più chiare) e le ombre (più scure). Usa la luminosità OKLCH per passaggi visivamente coerenti.
Controlla il contrasto con i colori del testo
Il pannello del contrasto mostra il rapporto WCAG sia con il bianco sia con il nero. Punta a ≥ 4.5 per il testo normale e ≥ 3 per i titoli grandi.
Copia il valore nel tuo CSS
Usa il formato adatto al tuo progetto: HEX per i design token, OKLCH per le palette moderne, HSL quando vuoi fare regolazioni con calc().

Formati colore CSS in breve

I cinque formati che incontrerai ogni giorno, con esempi per lo stesso colore. Riferimento completo della sintassi dei colori nella pagina <color> di MDN.

Formato	Sintassi	Esempio (arancione)
HEX	`#RRGGBB` o `#RGB`	`#ff8800`
HEX con alpha	`#RRGGBBAA`	`#ff880080` (trasparente al 50%)
`rgb()`	Rosso, verde, blu da 0 a 255	`rgb(255 136 0)`
`rgb()` con alpha	Sintassi moderna con la barra	`rgb(255 136 0 / 0.5)`
`hsl()`	Tonalità da 0 a 360°, saturazione e luminosità da 0 a 100%	`hsl(32 100% 50%)`
`oklch()`	Luminosità da 0 a 100%, croma, tonalità	`oklch(74% 0.18 50)`
Nome	Colore CSS con nome (ce ne sono 147)	`darkorange`

Esempi di conversione colori da provare

Converti un HEX del brand

Stesso colore, quattro formati

color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);

Tutte e quattro le dichiarazioni producono esattamente lo stesso blu. Sceglierne una per i tuoi design token dipende soprattutto da come vorrai ritoccarli in futuro.

Genera tinte con OKLCH

Brand + 4 tinte

--brand:        oklch(67% 0.16 268);--brand-light:  oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark:   oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);

Tenendo fisse tonalità (268) e croma e variando a passi la luminosità si ottiene una palette coerente in cui ogni passo *sembra* avere lo stesso scarto, cosa che HSL non garantisce.

Aggiungi trasparenza con l'alpha

Trasparente al 50%

background: rgb(108 140 255 / 0.5);background: #6c8cff80;

/ 0.5 è il modo moderno per aggiungere l'alpha in CSS. La forma HEX aggiunge in coda un byte alpha di due cifre (80 ≈ 50%).

Errori comuni nella conversione dei colori

Confrontare la luminosità HSL tra tonalità diverse. hsl(60 100% 50%) (giallo) e hsl(240 100% 50%) (blu) hanno la stessa L ma una luminosità percepita molto diversa: usa OKLCH per i confronti visivi.
Dimenticare che l'HEX a 3 cifre (#abc) è la forma abbreviata di quello a 6 cifre (#aabbcc).
Usare rgba(...) invece della sintassi moderna rgb(... / alpha): funzionano entrambe, ma la forma con la barra è quella della specifica attuale ed è più leggibile negli strumenti.
Scegliere i colori solo rispetto al bianco o al nero puri. Provali sugli sfondi reali e controlla il contrasto WCAG.
Scrivere i colori direttamente dentro i componenti invece di definirli come proprietà personalizzate CSS alla radice.

FAQ sul convertitore di colori

Come si converte da HEX a RGB?

Dividi il valore HEX in coppie (#RR, GG, BB) e converti ogni coppia da esadecimale a decimale. Oppure incolla il valore in un convertitore di colori e leggi subito il risultato RGB.

Che differenza c'è tra HSL e OKLCH?

HSL è comodo e ampiamente supportato ma non è percettivamente uniforme: la stessa L non sembra sempre ugualmente luminosa. OKLCH è percettivamente uniforme, quindi è migliore per generare tinte, ombre e palette accessibili coerenti.

Cosa significa OKLCH?

OKLCH sta per Oklab Lightness, Chroma, Hue (luminosità, croma, tonalità). Si basa sullo spazio colore Oklab, progettato per essere percettivamente uniforme: piccole variazioni numeriche appaiono come piccole variazioni visive.

Come si controlla il contrasto dei colori per l'accessibilità?

Calcola il rapporto di contrasto WCAG tra testo e sfondo. Il livello WCAG AA richiede almeno 4.5:1 per il testo normale e 3:1 per il testo grande (18pt o più, oppure 14pt in grassetto). Un convertitore di colori che riporta il contrasto ti risparmia i calcoli.

Nel mio CSS conviene usare HEX, RGB, HSL o OKLCH?

Usa quello con cui il tuo team si trova meglio. HEX è ovunque; OKLCH è la scelta moderna per i design system; HSL è ottimo quando vuoi regolare tonalità o luminosità con dei calcoli. Il supporto dei browser è eccellente per tutti e quattro.