Scegliere un colore in HSL è comodo, ma fogli di stile, handoff di design e documenti di brand usano ancora HEX. Questo convertitore colma il divario e ti dà il codice a sei cifre per qualsiasi combinazione di tinta, saturazione e luminosità.
Come funziona la conversione da HSL a HEX
- Trasforma saturazione e luminosità in frazioni: 60% diventa 0.6.
- Calcola la croma C = (1 − |2L − 1|) × S — è quanto il colore è distante dal grigio.
- Usa la tinta per posizionare quella croma sui canali rosso, verde e blu, poi trasla tutti e tre di L − C/2.
- Moltiplica ogni canale per 255, arrotonda e scrivilo come due cifre esadecimali.
Esempio pratico
L'arrotondamento avviene una sola volta, nell'ultimo passo, quando ogni canale viene fissato a un valore intero 0–255. Il risultato è il codice HEX più vicino al tuo input HSL e normalmente identico a quello mostrato da uno strumento di design.
HSL e HEX spiegati
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
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
Tabella di riferimento da HSL a HEX
I colori CSS più comuni, convertiti da HSL a HEX.
| Colore | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |