Convertitore di colori — Da HEX a RGB a HSL online

Inserisci un colore in qualsiasi formato — HEX, RGB o HSL — e ottieni immediatamente tutti e tre i formati, oltre a un campione di anteprima in tempo reale. Puoi anche selezionare un colore visivamente grazie al selettore di colori integrato. Perfetto per trasferire i colori tra CSS, strumenti di progettazione e codice.

Che cos'è questo strumento?

I colori sul web vengono espressi in diversi formati equivalenti. Il formato HEX (#4f46e5) è la forma compatta utilizzata ovunque nei CSS e nelle specifiche di progettazione. Il formato RGB (rgb(79, 70, 229)) indica direttamente le componenti di rosso, verde e blu, come spesso richiesto dal codice. L'HSL (hsl(243, 75%, 59%)) descrive la tonalità, la saturazione e la luminosità: è il formato più intuitivo per regolare un colore, ad esempio per renderlo più scuro o meno saturo.

Descrivono tutti lo stesso colore; questo strumento effettua una conversione esatta tra loro e mostra un'anteprima, così puoi verificare che sia proprio il colore che volevi.

Perché usarlo?

Accetta qualsiasi formato in ingresso — HEX (3 o 6 cifre), RGB o HSL — e restituisce tutti i formati in uscita.
Campione di anteprima in tempo reale per vedere il colore, non solo i numeri.
Selettore cromatico visivo, quando preferisci scegliere a occhio.
Copia con un solo clic per ogni formato, pronta per CSS o codice.
Gratuito, immediato, senza bisogno di caricare file.

Come si usa

Digita o incolla un colore: #4f46e5, rgb(79, 70, 229) o hsl(243, 75%, 59%) vanno tutti bene.
Oppure clicca sul selettore di colori e scegli in base a ciò che vedi.
Leggi tutti e tre i formati riportati nei risultati e controlla il campione di anteprima.
Fai clic su "Copia" accanto al formato che ti serve.

Esempio

Input

#4f46e5

Risultato

HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)

Tre notazioni, un unico colore.

Quale formato dovresti usare?

Tutti e tre descrivono esattamente lo stesso colore: la scelta dipende da quale dei tre sia più pratico da utilizzare per il compito da svolgere, non dall’accuratezza.

Formato	Ideale per	Perché
Esadecimale (#4f46e5)	CSS, consegna dei progetti di design, copia-incolla veloce	Il formato più veloce da digitare e incollare; il formato universale utilizzato in strumenti di progettazione come Figma.
Rosso, verde, blu (79, 70, 229)	Codice che manipola direttamente i canali, elaborazione di canvas/immagini	Rispecchia il modo in cui le API grafiche e i dati dei pixel delle immagini memorizzano effettivamente i colori.
HSL (hsl(243,75%,59%))	Regolare un colore: più chiaro, più scuro, più o meno saturo	La luminosità e la saturazione sono valori distinti che è possibile regolare direttamente, a differenza dei valori HEX/RGB in cui tutti i canali subiscono una variazione.

Casi d'uso comuni

Selezionare visivamente un colore in uno strumento di progettazione, per poi convertirlo nel valore HEX o RGB esatto richiesto dal CSS o dal codice.
Generazione di una serie di tonalità correlate (varianti più chiare/più scure) tramite conversione in HSL, regolazione della luminosità e riconversione.
Coordinare il colore di un marchio tra diversi strumenti che richiedono ciascuno un formato diverso: un file del logo in RGB, una guida di stile in HEX, una variabile CSS che richiede HSL per la personalizzazione del tema.
Verificare che un colore estratto da uno screenshot o da un file di progettazione (spesso indicato in formato RGB) corrisponda al valore HEX presente in un foglio di stile.

Domande frequenti

Quando è meglio usare HSL invece di HEX o RGB?

Quando si vuole ragionare su un colore. Rendere un colore più scuro del 10% in HSL significa ridurre la luminosità di 10 punti; in HEX o RGB bisognerebbe ricalcolare tutti i canali. I sistemi di design spesso definiscono le tavolozze in HSL proprio per questo motivo.

Lo strumento supporta i valori esadecimali a 3 cifre come #fff?

Sì. #fff è una forma abbreviata di #ffffff: ogni cifra è raddoppiata. Entrambe le forme sono accettate e il risultato mostra la forma completa a 6 cifre.

E per quanto riguarda l'alfa (trasparenza)?

Questo strumento converte i colori opachi (i valori RGB/HSL). Se hai bisogno di trasparenza, aggiungi tu stesso il canale alfa: rgba(79, 70, 229, 0.5) o #4f46e580 — la parte relativa al colore rimane invariata.

Perché i miei valori HSL differiscono di 1 rispetto a quelli di un altro strumento?

Arrotondamento. La conversione HSL↔RGB produce valori frazionari e i vari strumenti applicano regole di arrotondamento diverse. Una differenza di ±1 nella tonalità o nella percentuale è impercettibile ed è normale.

Sono supportati i nomi dei colori come "rosso"?

Non nella Fase 1: lo strumento si concentra sui tre formati numerici più comunemente utilizzati dagli sviluppatori. Inserisci il valore HEX/RGB/HSL del colore oppure selezionalo visivamente con il selettore.

Convertitore di colori HEX / RGB / HSL