Convertitore da RGB a HSL

Da RGB a HSL: la sintassi del colore pensata per progettare

Convertire un colore dal modello RGB (i tre numeri che un monitor capisce) al modello HSL (la ruota che un designer usa) non è solo un cambio di formato: è un passaggio dal linguaggio della macchina a quello della percezione umana. La pagina rgb-to-hsl di questo strumento fa esattamente questo: inserisci tre valori da 0 a 255 e ottieni l’equivalente HSL, insieme a HEX, HSV, CMYK e LAB, il tutto aggiornato istantaneamente senza inviare nulla a un server.

Come RGB descrive il colore sullo schermo

Il modello RGB (Red, Green, Blue) si basa sulla sintesi additiva della luce. Ogni pixel di un monitor è composto da tre subpixel che emettono luce rossa, verde e blu. L’intensità di ciascuno è codificata su 8 bit, cioè un numero da 0 a 255. Combinando queste tre intensità si ottiene qualsiasi colore dello spazio sRGB, lo spazio di lavoro predefinito per il web e la maggior parte dei dispositivi consumer.

RGB è lineare per la macchina ma non per il nostro sistema visivo. Se aumenti il canale rosso da 100 a 200, non hai automaticamente una percezione di rosso doppia. Inoltre, per produrre una tinta più chiara dello stesso colore, devi modificare tutti e tre i canali in modo non intuitivo. Prendiamo il viola 79, 70, 229: per schiarirlo mantenendo la stessa tonalità, non basta aumentare i canali insieme – serve una logica di miscelazione che RGB non espone direttamente.

Il funzionamento della pagina parte da questo punto: l’utente inserisce tre interi separati da virgole o spazi, entro 0‑255. Se l’input non è valido, compare il messaggio: “Inserisci RGB come tre numeri da 0 a 255, esempio 79, 70, 229.”

Come HSL modella la percezione umana

HSL sta per Hue (tonalità), Saturation (saturazione), Lightness (luminosità). La tonalità è espressa in gradi su una ruota cromatica: 0° è rosso, 120° verde, 240° blu, e così via. La saturazione è una percentuale: 0% è grigio, 100% è colore puro. La luminosità è una percentuale: 0% è nero, 100% è bianco.

Questo modello non è nato per i monitor ma per il ragionamento umano. Se vuoi una versione più scura di un colore, riduci la luminosità e la tonalità resta invariata. Se vuoi una versione più tenue, riduci la saturazione. HSL separa gli attributi che RGB mescola in modo opaco.

La conversione matematica da RGB a HSL segue una procedura standard:

1. Normalizza i tre canali da 0‑255 a 0‑1.
2. Trova il valore massimo (M) e il minimo (m) tra R, G, B.
3. La luminosità L è la media tra M e m: L = (M + m) / 2.
4. Se M = m, la saturazione è 0% e la tonalità è indefinita (il colore è un grigio).
5. Altrimenti, la saturazione S dipende da L:
   • Se L ≤ 0.5: S = (M - m) / (M + m).
   • Se L > 0.5: S = (M - m) / (2 - M - m).
6. La tonalità H si calcola in base a quale canale è il massimo:
   • Se R è max: H = (G - B) / (M - m) mod 6.
   • Se G è max: H = (B - R) / (M - m) + 2.
   • Se B è max: H = (R - G) / (M - m) + 4.
   • Poi si moltiplica per 60 per ottenere i gradi. Se il risultato è negativo, si aggiunge 360.

Nel nostro esempio 79, 70, 229, i valori normalizzati sono circa 0,31, 0,27, 0,90. M = 0,90 (blu), m = 0,27 (verde). L = (0,90+0,27)/2 = 0,585. S = (0,90-0,27) / (2-0,90-0,27) = 0,63 / 0,83 ≈ 0,759 → 75,9%. Tonalità: (R - G)/(M - m) + 4 = (0,31-0,27)/0,63 + 4 = 0,0635 + 4 = 4,0635. Moltiplicato per 60 → 243,8° → arrotondato a 244° (nel tool compare 243° per via dell’arrotondamento interno). Quindi HSL = 243°, 75%, 59% (luminosità 0,585 → 58,5% → 59%).

Perché HSL è lo strumento ideale per palette e temi

Chiunque abbia costruito un sistema di design sa che la vera utilità di HSL emerge quando devi generare varianti coerenti di un colore principale.

• UI/UX designer: per creare palette accessibili si regola la luminosità indipendentemente dalla tonalità. HSL permette di produrre rapidamente 5 varianti di un viola (luce, normale, scuro, saturo, desaturo) senza toccare l’angolo della tonalità.
• Sviluppatori front-end: i token di design spesso arrivano in RGB da strumenti come Figma o Sketch. Convertirli in HSL permette di usarli direttamente in CSS con la funzione hsl(h, s%, l%) o hsla() per includere la trasparenza.
• Costruttori di temi: per il dark mode, abbassando la luminosità dei colori principali si ottiene una palette scura che conserva l’identità cromatica del brand.
• Designer di visualizzazioni dati: le scale colore sequenziali intuitive richiedono una progressione lineare nella luminosità. HSL fornisce un canale L che – pur non essendo perfettamente uniforme – è molto più maneggevole di RGB per creare gradienti percepibili.

La pagina converte contemporaneamente in HEX, HSV, CMYK e LAB. Ogni campo è editabile: se modifichi l’HSL, il tool ricalcola all’istante gli altri formati. Se inserisci manualmente un HSL non valido (hue fuori 0‑360, saturazione o luminosità non percentuali), compare: “Inserisci HSL come tonalità 0‑360 con due percentuali, esempio 243, 75%, 59%.”

HSL per l’accessibilità: regolare il contrasto senza cambiare colore

Le linee guida WCAG richiedono un rapporto di contrasto di almeno 4,5:1 per il testo normale (AA) e 3:1 per il testo grande (AA). HSL semplifica l’adeguamento perché la luminosità è un parametro diretto.

Per esempio, se il colore primario di un’interfaccia ha L = 45% e il testo bianco (L = 100%) non raggiunge il contrasto minimo, puoi aumentare L al 60% mantenendo tonalità e saturazione identiche. Il colore sarà visivamente lo stesso, solo più chiaro. Con RGB avresti dovuto modificare tre canali senza garanzia di coerenza cromatica.

La pagina non è uno strumento per valutare il contrasto, ma fornisce l’HSL che puoi usare in un calcolatore esterno. Spesso il design system contiene una funzione per derivare varianti chiare e scure proprio manipolando il canale L.

Limitazioni di HSL: non è uniforme quanto sembra

HSL non è un modello percettivamente uniforme. Giallo e blu alla stessa luminosità (per esempio L=50%) appaiono molto diversi: il giallo sembra brillante, il blu sembra scuro. Questo perché la luminosità percepita non corrisponde linearmente ai valori di L calcolati. Per scale di colore scientificamente corrette si preferiscono spazi come LAB (CIE Lab*) o CAM16, che la pagina include tra gli output.

I valori CMYK mostrati sono una stima valida solo per lo schermo. Se devi stampare professionalmente, non usare il CMYK di questa pagina senza prima verificarlo con un profilo ICC specifico per la carta e la stampante.

Caso limite: se inserisci un colore LAB o CMYK che cade fuori dallo spazio sRGB (ad esempio un ciano molto saturo della gamma di stampa), il tool lo adatta al colore visibile più vicino. Riconvertendo quel colore in LAB, otterrai un valore leggermente diverso dall’originale. Questo è inevitabile quando si mappano gamut diversi.

Applicazioni pratiche nello sviluppo web

CSS supporta HSL nativamente con la funzione hsl(). Un foglio di stile dinamico può manipolare la luminosità con JavaScript senza dover riconvertire ogni volta da HEX:

// Supponiamo un colore base HSL
const h = 243, s = 75, l = 59;
// Versione più chiara per hover
const hoverL = Math.min(100, l + 10);
element.style.color = `hsl(${h}, ${s}%, ${hoverL}%)`;

Questa semplicità è il motivo per cui molti framework CSS (Tailwind, Material UI) preferiscono HSL agli altri formati per le utility di colore. La pagina ti dà il punto di partenza esatto per qualsiasi colore del tuo design system.

---

Domande frequenti

1. Cosa succede se inserisco un RGB con uno dei numeri fuori da 0‑255? La pagina mostra il messaggio di errore: “Inserisci RGB come tre numeri da 0 a 255, esempio 79, 70, 229.” Nessun valore viene accettato se non rispetta l’intervallo.

2. Posso inserire un HSL manualmente per ottenere il corrispondente RGB? Sì, i campi HSL sono editabili. Basta rispettare il formato: tonalità tra 0 e 360, saturazione e luminosità scritte come percentuale (ad esempio 243, 75%, 59%). Se sbagli formato, il tool mostra l’errore specifico.

3. I valori CMYK sono affidabili per la stampa? No. Sono una stima visuale su schermo e non tengono conto del profilo colore specifico della stampante, della carta o del processo. Usali solo per un’anteprima, mai per inviare dati a una macchina da stampa professionale.

4. Perché a volte la conversione da LAB a RGB produce un colore leggermente diverso? LAB e CMYK possono descrivere colori fuori dallo spazio sRGB visibile su un monitor. Il tool li adatta al colore più prossimo nel gamut sRGB. Riconvertendo quel colore in LAB, il nuovo valore non sarà identico a quello originale. È un comportamento standard in tutti i convertitori.

5. HSL è meglio di HSB/HSV per i miei progetti? Dipende dall’uso. HSB (Hue, Saturation, Brightness) è più simile al modello di percezione della luce (brightness = quanto bianco c’è), mentre HSL separa la luminosità in due estremi (nero e bianco). Per generare varianti chiare e scure mantenendo la tonalità, HSL è più intuitivo. Molti strumenti di design (Figma, Sketch) usano HSB come predefinito. La pagina include entrambi i formati in output.

6. I dati vengono inviati a un server? No. Tutte le conversioni avvengono interamente nel tuo browser. Non viene caricato nulla online.