Convertitore da HSL a RGB

Come funziona la conversione HSL → RGB

La pagina hsl-to-rgb accetta un colore nel formato HSL (Hue, Saturation, Lightness) e restituisce istantaneamente i valori RGB corrispondenti, insieme ad altre rappresentazioni. Inserisci la tonalità come numero intero da 0 a 360 (gradi), la saturazione e la luminosità come percentuali (0%–100%), separate da virgole — per esempio «243, 75%, 59%». Il tool calcola in tempo reale il tripletto RGB (0–255) e mostra i risultati in una scheda unica.

L’algoritmo di conversione è standardizzato: segue la definizione del modello HSL così come specificata nelle raccomandazioni CSS e nella colorimetria di base. La tonalità viene prima normalizzata in radianti, poi si applicano le formule di conversione RGB a partire dalla luminosità e dalla saturazione. Il codice eseguito nel browser usa direttamente queste relazioni matematiche, senza arrotondamenti intermedi che possano degradare la precisione. Ogni coppia HSL valida produce un preciso tripletto RGB, e il processo è reversibile: convertire RGB in HSL e poi di nuovo in RGB restituisce gli stessi valori di partenza, entro la precisione dei numeri interi usati.

La conversione è lossless (senza perdita) nell’ambito del dominio visibile: non esiste un colore HSL che cada fuori dal gamut RGB, perché entrambi i modelli descrivono lo stesso spazio colore (sRGB). Questo è un punto cruciale che distingue questa conversione da quelle che coinvolgono LAB o CMYK, dove si verifica il clipping (taglio) dei colori fuori gamut. Qui non c’è alcuna alterazione cromatica: quello che vedi è esattamente ciò che il tuo schermo può riprodurre.

Perché HSL è diverso: il modello per il ragionamento umano

A differenza di RGB — che mescola quantità di luce rossa, verde e blu — HSL è stato progettato per corrispondere al modo in cui le persone pensano al colore. La tonalità (hue) definisce la tinta pura: rosso, blu, giallo, ecc. La saturazione controlla l’intensità (da grigio spento a colore vivido). La luminosità gestisce la quantità di bianco o nero aggiunta, mantenendo invariata la tonalità. Cambiare la luminosità in HSL non altera l’hue: un blu a luminosità 30% resta lo stesso blu, solo più scuro. In RGB, per ottenere lo stesso effetto dovresti manipolare proporzionalmente i tre canali, operazione meno intuitiva.

Questa proprietà rende HSL lo strumento preferito per generare palette e temi di colore. I designer possono spostare la luminosità su una scala continua senza preoccuparsi di derive cromatiche. La pagina sfrutta proprio questo: ti permette di ragionare in termini umani e poi ottenere i numeri esatti che il computer richiede. Per esempio, una palette monocromatica si costruisce fissando hue e saturazione e variando solo la luminosità. Con il tool, ogni variazione produce istantaneamente i corrispondenti RGB, evitando di dover ricalcolare a mano.

Cosa ottieni in output: da HEX a LAB

Oltre ai valori RGB, la pagina aggiorna simultaneamente cinque altre rappresentazioni:

Ogni campo è modificabile: puoi editare direttamente il valore HSL e tutti gli altri si aggiornano all’istante. Se invece modifichi, per esempio, il campo HEX, il tool ricalcolerà tutto partendo da quel dato — ma la pagina è pensata per partire da HSL.

Il valore CMYK mostrato è una stima su schermo. Come specifica la scheda informativa, può differire dai valori usati nella stampa professionale a causa di variazioni di carta, inchiostro e profili di stampa. Non utilizzarlo come sostituto di un profilo ICC certificato. Tutti i calcoli avvengono localmente nel browser: nessun dato viene inviato a server esterni.

Regole e casi limite da conoscere

La validazione degli input è rigorosa. Se inserisci un valore HSL malformato — per esempio «243, 75%, 59» (senza il simbolo % dopo il secondo numero) o «243, 75, 59%» (manca il % dopo la saturazione) — il tool mostra il messaggio: «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%». I numeri fuori intervallo (hue > 360, saturazione o luminosità > 100%) attivano lo stesso errore. Non viene fatta alcuna correzione automatica: il valore deve essere preciso.

Il campo hue accetta numeri interi o decimali (per esempio 243,5), ma i valori RGB risultanti vengono arrotondati all’intero più vicino. La conversione da HSL a RGB usa in interno precisione floating‑point, quindi non c’è perdita di informazioni fino all’arrotondamento finale. Se hai bisogno di massima precisione frazionaria, considera che RGB è per definizione un modello a interi (0–255), perciò eventuali piccole variazioni sotto 1/256 non sono rappresentabili.

Un altro caso limite: saturazione 0% produce un grigio indipendentemente dalla tonalità. Illuminazione 0% dà nero, 100% dà bianco. In questi casi, la tonalità diventa irrilevante, ma il tool continua a calcolare RGB corretti. La conversione gestisce correttamente anche tonalità fuori dal range 0–360? Il messaggio di errore lo esclude. Hue viene accettato solo 0–360, senza avvolgimento modulare.

A chi serve questo strumento

• Designer di interfacce che costruiscono palette o temi di colore e hanno bisogno dei corrispondenti RGB per scrivere codice CSS, SCSS o JavaScript. Con il tool verificano rapidamente il rapporto tra variazioni di luminosità e i numeri finali.
• Sviluppatori front‑end che ricevono specifiche da strumenti di design (Figma, Sketch, Adobe XD) che spesso esprimono i colori in HSL. Invece di fare conversioni mentali o usare calcolatori generici, usano questa pagina per ottenere i tripletto RGB da inserire direttamente in rgba() o proprietà color.
• Chiunque preferisca ragionare in termini di tonalità, saturazione e luminosità — perché è più naturale — ma debba fornire valori pronti per lo schermo. Per esempio, un insegnante che prepara materiali didattici su come il colore viene rappresentato digitalmente.
• Professionisti che lavorano con l’accessibilità: HSL permette di mantenere costante il contrasto relativo modificando solo la luminosità, e il tool fornisce il riferimento RGB per verificare i rapporti di contrasto con le linee guida WCAG.

Domande frequenti (FAQ)

1. Perché i valori CMYK sono solo una stima?

Il CMYK mostrato deriva da una conversione matematica diretta RGB→CMYK usando formule standard (tipo la riduzione del nero di tipo «GCR»). Ma la stampa reale dipende da profili ICC specifici, tipo di carta, inchiostri e macchina da stampa. Lo strumento non può tener conto di queste variabili, quindi i valori vanno considerati indicativi, non da usare in produzione senza una prova colore.

2. Posso usare direttamente i valori RGB ottenuti in CSS?

Sì. I numeri RGB (0–255) sono compatibili con la funzione rgb(79, 70, 229) in CSS. Puoi anche convertire l’HEX in #4F46E5 per uso diretto. La corrispondenza è esatta perché lo spazio colore di partenza (sRGB) è lo stesso usato dai browser.

3. Cosa succede se inserisco «243, 75%, 59» senza il simbolo % dopo il secondo numero?

Il tool rifiuta l’input e mostra il messaggio di errore. Richiede esplicitamente due percentuali (saturazione e luminosità) scritte con il segno %. È una regola stringente per evitare ambiguità tra numeri puri e percentuali.

4. La conversione può produrre valori RGB fuori dal range 0–255?

No. HSL e RGB condividono lo stesso gamut (sRGB). Ogni combinazione HSL valida cade all’interno del cubo RGB. Non si verifica mai clipping o out‑of‑gamut, a differenza di conversioni da LAB o CMYK. Questa è una garanzia del modello HSL.

5. Perché il tool non accetta tonalità oltre 360? In alcuni software si usa avvolgimento modulare.

La pagina segue la convenzione standard di CSS e della maggior parte delle librerie colore: la tonalità è espressa in gradi da 0 a 360. L’avvolgimento (es. 400° → 40°) non è implementato per evitare confusione. Se hai bisogno di un hue superiore a 360, sottrai 360 finché non rientri nell’intervallo.