Convertitore da HEX a HSL

Conversione da HEX a HSL: come funziona e perché è utile

La pagina prende un codice colore HEX — nella forma completa a sei cifre come #1E90FF o nella notazione abbreviata a tre cifre come #abc — e restituisce immediatamente il valore HSL equivalente (tonalità in gradi, saturazione e luminosità in percentuale). La rappresentazione HSL è progettata per il ragionamento umano: permette di regolare luminosità o saturazione mantenendo invariata la tonalità. Contemporaneamente la pagina mostra il colore in tutti gli altri formati supportati (RGB, HSV, CMYK, LAB), così puoi copiare quello che ti serve.

Come funziona la conversione da HEX a HSL

Il codice HEX è una rappresentazione in base 16 delle componenti rosso, verde e blu del modello additivo RGB. Ogni coppia di cifre esadecimali — da 00 a FF — corrisponde a un valore decimale da 0 a 255. La conversione in HSL segue un algoritmo matematico preciso che parte proprio da quei tre valori RGB normalizzati nell'intervallo 0–1.

La formula di conversione standard (definita nelle specifiche CSS e nella raccomandazione W3C) prevede questi passaggi:

1. Normalizzazione: i valori RGB decimali vengono divisi per 255. Per #4f46e5: R=79/255=0,310, G=70/255=0,275, B=229/255=0,898.
2. Calcolo di massimo e minimo: si individuano i valori più alto e più basso tra R, G, B. Nel nostro esempio max=0,898 (blu), min=0,275 (verde).
3. Luminosità (Lightness): L = (max + min) / 2. Con max=0,898 e min=0,275, L = (0,898+0,275)/2 = 0,586 → 58,6%.
4. Saturazione (Saturation): se max e min sono uguali, la saturazione è 0 e il colore è grigio. Altrimenti: S = (max - min) / (1 - |2*L - 1|). Con L=0,586, il denominatore è 1 - |1,172-1| = 1 - 0,172 = 0,828. Quindi S = (0,898-0,275)/0,828 = 0,623/0,828 = 0,752 → 75,2%.
5. Tonalità (Hue): dipende da quale componente è il massimo. Se il massimo è il rosso: H = 60 * ((G-B)/(max-min) mod 6). Se il massimo è il verde: H = 60 * ((B-R)/(max-min) + 2). Se il massimo è il blu (come nel nostro caso): H = 60 * ((R-G)/(max-min) + 4). Con R=0,310 e G=0,275: H = 60 * ((0,310-0,275)/0,623 + 4) = 60 * (0,056 + 4) = 60 * 4,056 = 243,4°.

Il risultato finale per #4f46e5 è quindi HSL(243°, 75%, 59%) arrotondato. La pagina esegue questo calcolo istantaneamente nel browser, senza inviare dati a nessun server.

Struttura del codice HEX: sei cifre e notazione abbreviata

Il codice esadecimale a sei cifre — con o senza il cancelletto iniziale # — codifica direttamente le tre componenti RGB: le prime due cifre per il rosso, le seconde due per il verde, le ultime due per il blu. Ogni coppia va da 00 (valore 0) a FF (valore 255). La notazione abbreviata a tre cifre come #abc è una scorciatoia introdotta nei fogli di stile CSS: ogni cifra viene raddoppiata, quindi #abc equivale a #aabbcc. In pratica, se scrivi #F3A il browser lo interpreta come #FF33AA.

Questa compattezza ha un costo: la notazione a tre cifre è limitata a 4096 colori (16³) contro i 16.777.216 della notazione a sei cifre (256³). I colori intermedi — quelli in cui le due cifre di una coppia sono diverse — non sono rappresentabili in forma abbreviata. La pagina accetta entrambi i formati, ma restituisce sempre il valore HSL completo e il corrispondente HEX a sei cifre.

Un dettaglio importante: il codice HEX standard non trasporta informazioni sul canale alfa (trasparenza). Esiste una notazione estesa a otto cifre (#RRGGBBAA) ma non è supportata in questa pagina. La conversione produce sempre colori completamente opachi, perché HSL di per sé non include un componente alfa. Se hai bisogno di gestire la trasparenza, devi lavorare su un altro livello, ad esempio usando rgba() o hsla() in CSS.

Perché HSL è più intuitivo di HEX per il lavoro sui colori

Il codice HEX è efficiente per i computer ma poco leggibile per gli esseri umani. Guardare #4f46e5 non ti dice nulla sulla tonalità, sulla saturazione o sulla luminosità del colore. HSL invece separa queste tre dimensioni in modo che corrispondano al modo in cui le persone percepiscono e descrivono i colori.

La tonalità (hue) è misurata in gradi su una ruota cromatica: 0° è rosso, 120° è verde, 240° è blu, e si torna a 360° che coincide con 0°. La saturazione è una percentuale che esprime l'intensità cromatica: 0% è un grigio neutro, 100% è il colore puro alla massima vividezza. La luminosità è anch'essa una percentuale: 0% è nero, 100% è bianco, 50% è il colore "puro" alla massima saturazione.

Questa struttura rende banali operazioni che con HEX sarebbero contorte. Per creare una versione più chiara di un colore per lo stato hover di un pulsante, ti basta aumentare la luminosità: HSL(243°, 75%, 59%) → HSL(243°, 75%, 70%). La tonalità rimane identica, la saturazione non cambia, il risultato è prevedibile. Con HEX dovresti calcolare manualmente nuove componenti RGB o affidarti a un'approssimazione.

La stessa logica vale per la generazione di palette: uno schema monocromatico si ottiene variando solo la luminosità, uno complementare aggiungendo o sottraendo 180° alla tonalità, uno analogico spostando la tonalità di ±30°. HSL rende queste operazioni lineari e deterministiche.

HSL, HSV e i limiti del gamut visibile

Un errore comune è confondere HSL con HSV (chiamato anche HSB). Entrambi i modelli condividono la tonalità e usano una percentuale per la saturazione, ma la terza dimensione è definita diversamente. In HSV il terzo componente è il valore (brightness), che corrisponde al massimo tra le componenti RGB. In HSL è la luminosità, che è la media tra massimo e minimo. La differenza pratica è che in HSV i colori con luminosità 100% e saturazione 100% sono sempre vivaci, mentre in HSL alla luminosità 50% hai il colore "pieno" e a valori più alti o più bassi ottieni tinte pastello o scure.

La pagina mostra il colore convertito anche in HSV, CMYK e LAB proprio perché ogni modello ha i suoi usi specifici. Tuttavia c'è un limite pratico da conoscere: non tutti i colori HSL sono rappresentabili sullo schermo. Il gamut RGB (e quindi HEX) è un triangolo all'interno dello spazio colore CIE 1931, e i colori fuori da quel triangolo non possono essere visualizzati fedelmente. Se inserisci un valore HSL con saturazione 100% e luminosità 50% per una tonalità molto satura come il ciano puro, il risultato è comunque dentro il gamut. Ma tonalità estreme combinate con saturazioni e luminosità particolari possono cadere fuori.

La pagina gestisce questo caso limite regolando il colore al più vicino visibile e mostrando la conversione in HEX con un eventuale leggero scostamento. È un comportamento trasparente: il valore che vedi è quello effettivamente displayabile, non un'approssimazione teorica. Lo stesso vale per i valori CMYK, che sono una stima su schermo e non dovrebbero essere usati per la stampa professionale senza calibrazione.

Errori comuni e casi limite nella conversione

La pagina accetta solo codici HEX validi a sei o tre cifre, con o senza il cancelletto iniziale. Se inserisci un valore non valido, compare il messaggio: "Inserisci un colore esadecimale come #4f46e5 o #abc." Ecco gli errori tipici:

• Cifre mancanti: #4f4 è valido (tre cifre), ma #4f no, perché non è né tre né sei.
• Caratteri non esadecimali: #4g56e5 contiene 'g', che non è una cifra esadecimale (le cifre valide sono 0-9 e A-F).
• Spazi o simboli extra: # 4f46e5 o #4f46e5! non vengono accettati.
• Otto cifre: #4f46e5aa è un HEX con alfa, ma la pagina non lo supporta.
• Maiuscole/minuscole: non fa differenza, #4F46E5 equivale a #4f46e5.

Quando passi da un altro spazio colore (ad esempio LAB o CMYK) a HEX, il valore potrebbe subire una regolazione se è fuori dal gamut RGB. In quel caso, il colore viene spostato al più vicino displayabile e la riconversione in HEX può produrre una leggera differenza rispetto al valore di partenza. È una conseguenza inevitabile della diversa estensione dei gamut.

Tutte le conversioni avvengono localmente nel browser, senza che nulla venga caricato o memorizzato altrove. Puoi incollare anche codici sensibili legati a progetti interni senza preoccupazioni.

Applicazioni pratiche di HSL nello sviluppo web

HSL è diventato un formato nativo in CSS3, supportato da tutti i browser moderni. Puoi usarlo direttamente nei fogli di stile con la funzione hsl(): color: hsl(243°, 75%, 59%). Questo apre scenari interessanti per il design sistematico.

Le variabili CSS (custom properties) si combinano perfettamente con HSL. Puoi definire una tonalità base come variabile e poi derivare tutte le varianti del tema regolando solo luminosità e saturazione:

:root {
  --primary-hue: 243;
  --primary-saturation: 75%;
  --primary-lightness: 59%;
}
.button {
  background: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
}
.button:hover {
  background: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 10%));
}

Per i temi scuri e chiari, HSL è particolarmente efficace: mantenendo tonalità e saturazione costanti, abbassare la luminosità del 20-30% produce automaticamente una versione scura coerente. Per i controlli di accessibilità, lavorare in HSL permette di aumentare il contrasto semplicemente regolando la luminosità, senza alterare la tonalità che identifica il colore del brand.

La generazione di palette armoniche diventa un'operazione algoritmica: una triade classica si ottiene con tonalità a 0°, 120° e 240°; uno schema complementare dividendo la ruota in due angoli opposti; uno split-complementary usando la tonalità complementare più due vicine a ±30°. Tutte queste operazioni richiedono solo addizioni e sottrazioni sul valore della tonalità.

Domande frequenti

Qual è la differenza tra HSL e HSLA? HSLA aggiunge un quarto parametro per il canale alfa (trasparenza), con valori da 0 a 1. HSL non include la trasparenza. La pagina converte solo HEX standard (senza alfa) in HSL, quindi il risultato è sempre un colore completamente opaco.

Posso usare il codice HSL ottenuto direttamente in CSS? Sì, la funzione CSS hsl() accetta esattamente i tre valori che la pagina restituisce: tonalità in gradi, saturazione e luminosità in percentuale. Puoi copiare il risultato e incollarlo nel tuo foglio di stile senza modifiche.

Perché a volte il colore HEX cambia leggermente dopo una conversione attraverso LAB o CMYK? LAB e CMYK hanno gamut diversi dall'RGB. Se inserisci un valore LAB o CMYK che cade fuori dallo spazio colore RGB, la pagina lo regola al più vicino rappresentabile. Riconvertendo quel colore in HEX ottieni un valore leggermente diverso dall'originale, perché l'adattamento non è reversibile.

Il codice HEX a tre cifre funziona sempre come quello a sei? Sì, ma con una risoluzione inferiore. #abc viene espanso a #aabbcc, quindi puoi rappresentare solo 4096 colori invece di 16,7 milioni. La pagina accetta entrambi e restituisce sempre il corrispondente HEX completo a sei cifre e il valore HSL.

Perché CMYK viene definito una "stima su schermo"? CMYK è un modello sottrattivo usato per la stampa a quattro colori (ciano, magenta, giallo, nero). La conversione da RGB a CMYK è approssimativa perché dipende dal profilo colore della stampante e dal tipo di carta. I valori mostrati sono una conversione matematica standard (basata sul modello di separazione ISO), ma per la stampa professionale serve una profilatura specifica.

Cosa succede se inserisco un codice HEX con meno di tre o più di sei cifre? La pagina mostra il messaggio di errore standard. Non sono accettati codici a una, due, quattro, cinque, sette o otto cifre. L'unica eccezione è il formato a tre cifre che viene correttamente interpretato come notazione abbreviata.