Il convertitore accetta tutte le forme hex del CSS: il formato a 6 cifre #3366cc, l'abbreviazione a 3 cifre #36c, e i formati a 4 e 8 cifre con canale alpha, con o senza #. Mostra la stringa hsl() o hsla(), i valori puri e una scomposizione per componente, oltre a una riga inversa da HSL a HEX quando serve fare il percorso opposto. Tutto viene eseguito nel browser: nessun caricamento, nessun account, nessun limite.
Convertitore da HEX a HSL
Funziona interamente nel browser: nessun caricamento, nessuna registrazione.
CSS
hsl(220, 60%, 50%)Come avviene la conversione
Hue220
Saturazione60%
Luminosità50%
Percorso opposto? HSL a HEX
#3366ccCome si converte HEX in HSL?
Il codice hex si legge prima come red, green e blue (0-255), poi quel colore si riscrive come hue, saturation e lightness. L'hue è l'angolo sulla ruota dei colori (0-360), la saturation indica quanto è vivido (0-100%) e la lightness quanto è chiaro (0-100%). #3366cc diventa hsl(220, 60%, 50%). Questo convertitore lo fa all'istante mentre digiti.
Come si usa
- 1Inserisci un codice hex. Digita o incolla un colore hex come #3366cc (o #36c), oppure scegline uno con il selettore colore. Il # è facoltativo.
- 2Leggi il valore HSL. La stringa hsl(), i valori puri e un'anteprima del colore in tempo reale si aggiornano mentre digiti, con una scomposizione per componente su hue, saturation e lightness.
- 3Copia il formato che ti serve. Clicca su Copia accanto alla stringa hsl() o ai valori grezzi. Ti serve il percorso opposto? Inserisci hue, saturation e lightness qui sotto per ottenere di nuovo il codice hex.
A chi serve
- Sviluppatori front-end che trasformano un codice hex in hsl() per regolare la lightness negli stati hover e focus senza scegliere un colore completamente nuovo.
- Designer che costruiscono palette e tengono fisso l'hue mentre variano saturation e lightness per generare tinte e sfumature a partire da un solo colore del brand.
- Chi scrive theme e design token e salva i colori in HSL perché è molto più facile da leggere e modificare a mano rispetto a una stringa hex.
- Chi deve far coincidere i colori tra strumenti diversi, quando uno vuole l'hex (Figma, la maggior parte del CSS) e un altro vuole l'HSL (helper SCSS, alcuni sistemi di colore).
Domande frequenti
Questo convertitore da HEX a HSL è gratis?
Sì, è gratis al 100%, senza registrazione e senza limiti. Funziona interamente nel browser.
I miei colori vengono caricati da qualche parte?
No. La conversione è puro JavaScript eseguito sul dispositivo, non viene inviato nulla a un server, e continua a funzionare anche offline una volta caricata la pagina.
Cos'è l'HSL?
HSL sta per hue, saturation e lightness. L'hue è un angolo da 0 a 360 gradi sulla ruota dei colori, la saturation indica quanto è vivido il colore da 0 a 100 percento, e la lightness va da 0 percento (nero) attraverso il colore puro al 50 percento fino al 100 percento (bianco).
Come si converte hex in HSL a mano?
Converti l'hex in red, green e blue e dividi ciascuno per 255. Prendi il massimo e il minimo dei tre valori: la lightness è la loro media, la saturation è (max - min) diviso (1 - |2L - 1|), e l'hue dipende da quale canale è il massimo, scalato tra 0 e 360 gradi.
Supporta l'abbreviazione a 3 cifre come #36c?
Sì. Nell'abbreviazione CSS ogni cifra viene raddoppiata, quindi #36c diventa #3366cc e si converte in hsl(220, 60%, 50%). Il formato a 4 cifre funziona allo stesso modo, con l'ultima cifra come alpha.
Come gestisce la trasparenza (HSLA)?
Un codice hex a 8 cifre porta l'alpha nell'ultima coppia. Quel byte (0-255) viene diviso per 255 per ottenere il valore alpha da 0 a 1 richiesto da hsla(), arrotondato a tre decimali - così #3366cc80 diventa hsla(220, 60%, 50%, 0.502).
Può convertire HSL di nuovo in HEX?
Sì. Usa la riga da HSL a HEX sotto il risultato: inserisci hue (0-360) più saturation e lightness (0-100%) e restituisce subito il codice hex. I valori fuori intervallo vengono limitati.
Perché l'HSL è più utile dell'hex?
L'HSL è leggibile: puoi schiarire un colore alzando la L, smorzarlo abbassando la S, oppure cambiarne la famiglia modificando la H, tutto senza indovinare le cifre hex. Per questo è ideale per costruire palette coerenti, stati hover e design token.