ImageColorPicker.com

Convertitore da HSL a HEX

Converti qualsiasi colore HSL in HEX — istantaneamente e gratuitamente

#3398DB

Incolla qualsiasi valore colore — rileviamo il formato per te.

H
S
L
Risultato HEX

Questo colore in ogni formato

Profilo CMYK: Coated FOGRA39 (impostazione predefinita di Photoshop per l'Europa)

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

  1. Trasforma saturazione e luminosità in frazioni: 60% diventa 0.6.
  2. Calcola la croma C = (1 − |2L − 1|) × S — è quanto il colore è distante dal grigio.
  3. Usa la tinta per posizionare quella croma sui canali rosso, verde e blu, poi trasla tutti e tre di L − C/2.
  4. Moltiplica ogni canale per 255, arrotonda e scrivilo come due cifre esadecimali.

Esempio pratico

HSL hsl(204, 70%, 53%)=HEX #3398DB

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.

ColoreHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

Altri convertitori di colore

Domande frequenti

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.

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.

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.

Sì. Il pulsante di scambio accanto all'input ti porta al convertitore da HEX a HSL, che funziona esattamente allo stesso modo. Entrambe le direzioni usano la stessa formula, applicata al contrario.

Costruisci la palette in HSL, poi esporta in HEX. La palette mantiene la sua logica — stessa tinta, luminosità scalata — mentre il codice consegnato resta nel formato che gli sviluppatori si aspettano.