Convertitore di colori — HEX, RGB e HSL

Converti i colori tra i tre formati che ogni designer e sviluppatore incontra: HEX (#3B82F6), RGB (rgb(59, 130, 246)) e HSL (hsl(217, 91%, 60%)). Incolla un codice hex per vedere i suoi equivalenti RGB e HSL, oppure cambia modalità per costruire un codice hex a partire da valori RGB.

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

Come funziona questo calcolo

Un colore HEX racchiude tre canali — rosso, verde, blu — in una stringa esadecimale (base 16) di 6 cifre, due cifre per canale, ciascuna compresa tra 00 e FF (0–255 in decimale). Una forma abbreviata a 3 cifre come #FFF raddoppia ogni cifra, quindi #FFF equivale a #FFFFFF.

L'RGB scrive gli stessi tre canali come semplici numeri decimali da 0 a 255, motivo per cui rgb(59, 130, 246) e #3B82F6 descrivono esattamente lo stesso colore — 59 = 0x3B, 130 = 0x82, 246 = 0xF6.

L'HSL descrive lo stesso colore in modo diverso: la Tonalità (Hue) è la posizione su una ruota dei colori da 0 a 360° (0 = rosso, 120 = verde, 240 = blu), la Saturazione indica quanto è vivace il colore (0% = grigio, 100% = completamente saturo), e la Luminosità indica quanto è vicino al nero o al bianco (0% = nero, 100% = bianco). Viene calcolata dai valori RGB individuando il canale massimo e minimo e la loro differenza.

Esempio svolto

Il "blue-500" predefinito di Tailwind CSS è #3B82F6. Convertendolo si ottiene rgb(59, 130, 246) e hsl(217, 91%, 60%) — lo stesso blu, scritto in tre modi diversi in CSS.

HEX vs RGB vs HSL — quando usare ciascuno

Formato	Esempio	Ideale per
HEX	#3B82F6	Strumenti di design, palette colori del brand, copia-incolla rapido nel CSS
RGB	rgb(59, 130, 246)	Quando servono valori di canale espliciti o opacità con rgba()
HSL	hsl(217, 91%, 60%)	Creazione di palette di colori — regolare luminosità/saturazione mantenendo la tonalità

Come le cifre hex corrispondono ai canali

#RRGGBB — RR è il rosso (00–FF), GG è il verde (00–FF), BB è il blu (00–FF)
Ogni coppia è un numero in base 16: FF = 15×16 + 15 = 255, 80 = 8×16 + 0 = 128, 00 = 0
#000000 è nero, #FFFFFF è bianco, #FF0000 è rosso puro
La forma abbreviata a 3 cifre raddoppia ogni cifra: #ABC → #AABBCC

Leggere un valore HSL a colpo d'occhio

hsl(217, 91%, 60%) rivela subito tre informazioni: 217° è una tonalità blu (i blu si trovano circa tra 210 e 250°), una saturazione del 91% significa che il colore è vivace anziché spento, e una luminosità del 60% indica che si trova comodamente tra il nero e il bianco — un blu brillante e limpido.

Questo rende l'HSL comodo per generare palette coerenti: mantieni la tonalità fissa a 217 e varia la luminosità dal 20% (un blu navy quasi nero) al 90% (un azzurro cielo pallido) per ottenere una gamma di tinte abbinate nella stessa famiglia di colore.

Colori di riferimento comuni

Nome	HEX	RGB
Nero	#000000	rgb(0, 0, 0)
Bianco	#FFFFFF	rgb(255, 255, 255)
Rosso	#FF0000	rgb(255, 0, 0)
Verde	#00FF00	rgb(0, 255, 0)
Blu	#0000FF	rgb(0, 0, 255)

Domande frequenti

Quale formato di colore dovrei usare in CSS?

Tutti e tre vengono renderizzati in modo identico in ogni browser moderno, quindi è una questione di flusso di lavoro. HEX è compatto e diffuso negli strumenti di design; RGB è esplicito sui valori dei canali e supporta rgba() per l'opacità; HSL è il più facile da regolare a mano perché puoi modificare luminosità o saturazione senza ricalcolare tutti e tre i canali.

Questo strumento salva o carica i miei colori?

No. Ogni conversione avviene nel tuo browser con semplice aritmetica — nulla viene inviato a un server o salvato.

Qual è la differenza tra #FFF e #FFFFFF?

Nessuna — #FFF è una forma abbreviata CSS in cui ogni cifra viene raddoppiata, quindi #FFF, #ffFFFF e #FFFFFF sono tutti bianco puro. Questo strumento accetta codici hex sia a 3 che a 6 cifre.

Come aggiungo la trasparenza (alpha)?

Aggiungi un quarto canale: rgba(59, 130, 246, 0.5) oppure hsla(217, 91%, 60%, 0.5) per un'opacità del 50%, oppure un codice hex a 8 cifre come #3B82F680 (le due cifre hex aggiuntive sono il canale alpha, 00–FF). Questo convertitore si concentra sulla terna opaca RGB/HEX/HSL; aggiungi l'alpha manualmente se ti serve.

Perché RGB e HSL restituiscono numeri dall'aspetto così diverso per lo stesso colore?

Sono due sistemi di coordinate per lo stesso punto nello spazio colore. RGB è composto da canali di luce additiva; HSL riorganizza queste informazioni in tonalità, saturazione e luminosità, il che spesso è più intuitivo per scegliere o regolare una sfumatura — ad esempio mantenendo fisse tonalità e saturazione e aumentando solo la luminosità per ottenere una tinta più chiara.

È corretto l'hex in maiuscolo o in minuscolo?

Entrambi funzionano ovunque — l'hex non distingue tra maiuscole e minuscole. Questo strumento restituisce il risultato in maiuscolo (#3B82F6) per leggibilità, ma #3b82f6 è esattamente lo stesso colore.

Cosa succede se inserisco un codice hex non valido?

I campi RGB e HSL restano semplicemente vuoti finché non inserisci un valore hex valido a 3 o 6 cifre (solo lettere A–F/a–f e cifre 0–9, con o senza il # iniziale).

Questo strumento è fornito solo a scopo informativo generale. Verifica i valori importanti in autonomia. · Ultima revisione: 25 agosto 2026