HSL descrive un colore come lo si percepisce: quale tinta, quanto è saturo, quanto è chiaro. Convertire un codice HEX in HSL è il modo più veloce per ottenere una forma del colore che puoi effettivamente modificare — schiarirlo, smorzarlo o costruirne tutta una scala.
Come funziona la conversione da HEX a HSL
- Converti il codice HEX in RGB e dividi ogni canale per 255, così i tre valori stanno tra 0 e 1.
- Trova il valore massimo e quello minimo dei tre. La loro media è la luminosità L.
- La differenza tra massimo e minimo determina la saturazione S: dividila per (2 − max − min) per i colori chiari, oppure per (max + min) per quelli scuri.
- Il canale che contiene il valore massimo decide la tinta H — rosso a 0°, verde a 120°, blu a 240° — e gli altri due canali posizionano la tinta all'interno di quel segmento.
Esempio pratico
I calcoli sono esatti, ma i valori HSL vengono normalmente arrotondati a gradi interi e percentuali. Convertire indietro può quindi spostare il risultato di uno o due passi RGB rispetto all'originale — invisibile nella pratica, ma utile saperlo se fai continue conversioni di andata e ritorno.
HEX e HSL spiegati
Cos'è HEX?
Un codice HEX è un numero esadecimale di sei cifre che memorizza i canali rosso, verde e blu di un colore preceduto da #. Ogni coppia di cifre rappresenta un canale, da 00 (nessuno) a FF (tutto), offrendo gli stessi 16,7 milioni di colori dell'RGB in una notazione molto più compatta. HEX è il predefinito in CSS, strumenti di design e linee guida di brand.
- Sintassi:
- #RRGGBB
- Intervallo:
- 00–FF per canale
- Ideale per:
- CSS, consegne di design, linee guida del brand
Cos'è HSL?
HSL divide un colore in tonalità (0–360° sulla ruota dei colori), saturazione (quanto è colorato, 0–100%) e luminosità (quanto è chiaro, 0–100%). Poiché ogni parte corrisponde al modo in cui le persone descrivono il colore, HSL è il formato più semplice per creare tinte, ombre e palette coerenti — a mano o in codice.
- Sintassi:
- hsl(H, S%, L%)
- Intervallo:
- 0–360°, 0–100%, 0–100%
- Ideale per:
- palette, tinte e ombre, theming
Tabella di riferimento da HEX a HSL
I colori CSS più comuni, convertiti da HEX a HSL.
| Colore | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |