Convertitore HEX in HSL

Cos'è un convertitore HEX in HSL?

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

Caratteristiche principali

Alternative al convertitore HEX in HSL

Esempi di conversione HEX in HSL

#3b82f6

#FF5733

#3b82f6

#FF573380

Conversioni HEX → HSL comuni

Tabella di riferimento dei 10 codici hex più convertiti e i loro equivalenti HSL — primari puri, secondari puri e due colori brand del mondo reale dalla palette Tailwind.

Come usare il convertitore HEX in HSL

1. 1

   Incolli un codice hex nel campo HEX

   Rilasci qualsiasi valore hex nell'input HEX — con o senza il `#` iniziale, in abbreviazione a 3 cifre (`#F73`), forma completa a 6 cifre (`#3b82f6`), abbreviazione alpha a 4 cifre (`#F738`) o forma completa alpha a 8 cifre (`#FF573380`). Lo strumento normalizza internamente tutte e cinque le forme di input nello stesso colore canonico. Le maiuscole/minuscole non contano (`#3b82f6` e `#3B82F6` vengono analizzati in modo identico). Caratteri non validi o conteggi cifre errati producono un errore inline silenzioso; l'hex valido aggiorna in tempo reale ogni altro campo di formato, incluso HSL.

2. 2

   Legga la tripletta HSL dal campo HSL

   Il campo HSL sotto il campo HEX mostra il valore `hsl()` corrispondente nella moderna sintassi con spazi di CSS Color 4: `hsl(217 91% 60%)` per un colore opaco, `hsl(217 91% 60% / 0.5)` per uno con alpha. Hue è un grado intero da 0 a 360; saturation e lightness sono percentuali intere da 0 a 100. I valori sono arrotondati per leggibilità in visualizzazione — la fonte di verità interna OKLCH dello strumento significa che la precisione sottostante è float, quindi i round-trip verso hex restano stabili.

3. 3

   Faccia clic su Copia per ottenere la stringa HSL

   Ogni scheda di formato ha un pulsante Copia sulla destra. Un clic e il valore finisce negli appunti — l'etichetta del pulsante passa brevemente a "Copiato!" per conferma. La stringa copiata è la sintassi canonica di CSS Color 4 (`hsl(217 91% 60%)`); se il target richiede la forma legacy con virgole (`hsl(217, 91%, 60%)`), la conversione è meccanica. Per output specifico per piattaforma (Tailwind v4, SwiftUI, Compose, Flutter), usi la sezione Copia come codice sotto il picker — quegli snippet emettono il formato che ogni piattaforma si aspetta nativamente.

4. 4

   Visibili anche: RGB, OKLCH, OKLAB, HSV, HWB, CMYK, colore named

   Lo stesso hex che incolla accende anche gli altri campi di formato — RGB per le chiamate canvas e l'hardware, OKLCH e OKLAB per i design system percettivamente uniformi, HSV e HWB per i flussi di lavoro con color picker per designer, CMYK per le stime di stampa, e il colore CSS named più vicino per la prosa di documentazione. Non resta mai vincolato a hex → HSL soltanto. Se le serve anche la tripletta OKLCH per un blocco `@theme` di Tailwind v4 (dove la luminosità percettiva conta più della L gamma-stravagante di HSL), è lì nel campo OKLCH con il suo pulsante Copia.

5. 5

   Usi il picker per scansionare visivamente la luminosità

   Sotto la griglia dei formati ci sono un quadrato SL + cursore di tonalità + cursore alpha per l'esplorazione visiva. Il quadrato SL mappa direttamente sul piano Saturation × Lightness di HSL: trascini verticalmente per camminare con L dallo 0% al 100% mentre osserva il campo HSL aggiornarsi in tempo reale. Utile per generare visivamente una tinta chiara o scura prima di bloccare la percentuale esatta. Sui browser Chromium (Chrome, Edge, Brave) il pulsante EyeDropper attiva l'API nativa `EyeDropper` per campionare qualunque pixel sullo schermo, anche fuori dal browser.

Errori comuni HEX / HSL

Scansione L HSL per una palette a 9 passi:
hsl(120 100% 50%) e hsl(240 100% 50%) alla stessa L
Appaiono visibilmente diversi in luminosità — la palette sembra irregolare.

Scansioni invece L OKLCH:
oklch(0.7 0.2 130) e oklch(0.7 0.2 250)
Appaiono ugualmente luminosi; la palette si legge coerente su tutte le tonalità.

Interpolazione lineare da H=350 a H=10:
(350 + 10) / 2 = 180° (punto medio ciano)
Sbagliato — fa il giro lungo della ruota.

Interpolazione di tonalità a percorso breve:
midpoint = ((350 + 10 + 360) / 2) % 360 = 0° (punto medio rosso)
Passa attraverso il rosso, il percorso breve attorno alla ruota.

Incollare valori HSV da Photoshop in una regola CSS hsl():
Photoshop HSB 0, 100, 100 (rosso puro)
CSS hsl(0 100% 100%) renderizza come bianco — colore completamente sbagliato.

Converta HSV → HSL prima di incollare in CSS:
HSV 0, 100, 100 → HSL 0, 100%, 50%
CSS hsl(0 100% 50%) renderizza come rosso puro — corretto.

Emettere HSL senza segni di percentuale:
hsl(217 91 60)
Errore di parsing CSS — ogni browser ignora l'intera regola.

Emetta HSL con segni di percentuale su S e L:
hsl(217 91% 60%)
CSS valido — funziona in ogni evergreen browser e in IE 9+.

Chi usa HEX in HSL

Sviluppatori frontend che definiscono variabili CSS HSL

Definisca `--primary: hsl(217 91% 60%)` una sola volta dall'hex Figma, poi componga `--primary-hover: hsl(217 91% 70%)`, `--primary-active: hsl(217 91% 50%)`, `--primary-bg: hsl(217 91% 95%)` regolando solo il numero L. Incolli l'hex una volta, legga la tripletta HSL, la inserisca nel blocco di custom property CSS. Il pattern che i design system legacy usavano per mantenere tinte chiare e tinte scure correlate per tono prima che le scale basate su OKLCH prendessero piede.

Designer che traducono hex in HSL picker

I designer cresciuti su picker hue + saturation + value (Adobe, Sketch, modalità HSB di Figma) spesso vogliono la tripletta HSL anche quando il file sorgente rilascia hex. Incollare una volta l'hex produce l'HSL corrispondente, pronto da leggere nella posizione mentale della ruota dei colori del designer senza un'ipotesi manuale. Utile quando si rivede una specifica di colore brand e si vuole sapere dove si colloca sulla ruota di tonalità rispetto ad altri colori brand della famiglia.

Autori di theme system che calcolano token dark-mode

Il theming dark-mode spesso inverte L mantenendo H e S — un primary light-mode `hsl(217 91% 60%)` mappa su un `hsl(217 91% 40%)` dark-mode (o simile). Incolli l'hex light-mode, legga l'HSL, calcoli la L dark-mode, scriva il nuovo HSL nel token dark theme. Il pattern è meccanico quando si ha la tripletta HSL; è molto più macchinoso da fare con canali RGB grezzi.

Autori di design system che generano scale di tinte chiare e scure

Generi una scala di tinte chiare/scure a 9 passi scansionando L: `hsl(217 91% 95%)` (più chiaro), 85%, 75%, 65%, 55%, 45%, 35%, 25%, `hsl(217 91% 15%)` (più scuro). Incolli l'hex base, legga l'HSL, scansioni L in passi del 10% mentalmente o nel codice. (Per scale percettivamente uniformi in cui ogni passo appare ugualmente luminoso, passi al campo OKLCH accanto — le scale HSL appaiono irregolari tra le tonalità perché L non è percettivamente uniforme.)

Autori CSS che usano matematica hsl(from ...) a runtime

Il CSS moderno supporta la sintassi `color-function-from`: `hsl(from var(--primary) h s calc(l + 10%))` deriva una variante più chiara di `--primary` al momento del render, senza precalcolare ogni passo. Incolli l'hex brand, confermi la tripletta HSL, inserisca la base in una variabile CSS e usi la matematica a runtime per i token derivati. Arriva in Chrome 119+, Safari 17.2+, Firefox 128+.

Sviluppatori frontend che costruiscono set di token HSL Tailwind v3

Tailwind v3 memorizzava i colori di tema come triplette HSL separate da spazi in variabili CSS (`--primary: 217 91% 60%`), composte tramite `hsl(var(--primary))` in `tailwind.config.js`. Incolli l'hex brand, legga l'HSL, inserisca i tre numeri (senza il wrapper `hsl(...)`) nella definizione di variabile. Tailwind v4 da allora è passato a OKLCH-first, ma i codebase v3 usano ancora il pattern HSL e lo faranno per anni.

Autori di UI di color picker che mappano hex su controlli HSL

Costruire un color picker che espone hue / saturation / lightness come tre slider separati (la classica UI in stile Adobe) significa mappare un hex in ingresso sui tre controlli del picker. Incolli l'hex qui, legga la tripletta HSL, posizioni i tre slider programmaticamente. La conversione è la stessa che il suo picker eseguirebbe internamente; questo strumento espone i valori intermedi per il debug.

Ingegneri dell'accessibilità che regolano la luminosità del colore brand per il contrasto

Quando un colore brand non passa il contrasto WCAG contro uno sfondo, il fix economico è aumentare L finché il rapporto non passa — senza cambiare H o S, il colore continua a leggersi come la stessa identità brand. Incolli l'hex brand, osservi i badge di contrasto, regoli mentalmente L (o usi l'asse L del picker) finché sia WCAG sia APCA non passano. Il campo HSL espone la nuova percentuale L per il documento di specifica; il campo hex espone il codice corrispondente per il foglio di stile.

Matematica e parsing HEX in HSL

HEX → RGB → HSL è una pipeline a due step

La conversione passa attraverso RGB come intermedio. Step uno: si analizza l'hex in interi RGB tramite `parseInt(hex.slice(1, 3), 16)` per canale. Step due: si normalizza RGB a 0-1, si calcolano `max`/`min`/`delta`, si applica la trigonometria piecewise di CSS Color 4 §6.4: `L = (max + min) / 2`, `S = delta / (1 - |2L - 1|)`, `H = piecewise * 60`. La struttura a due step è il motivo per cui lo strumento espone anche la tupla RGB intermedia — è gratuita da mostrare e utile per il debug.

CSS Color 4 §6.4 definisce l'algoritmo di riferimento

La specifica W3C CSS Color 4 §6.4 (algoritmo `rgb()` to `hsl()`) definisce la matematica canonica piecewise: lightness come punto medio di max e min, saturation come `delta / (1 - |2L - 1|)` (con S = 0 quando delta = 0, per evitare la divisione per zero sui grigi), hue come trigonometria a 60 gradi per passo su quale canale è max. La specifica gestisce anche i casi limite: nero puro (`#000`) produce `hsl(0 0% 0%)` con un'arbitraria tonalità di 0°; bianco puro (`#FFF`) produce `hsl(0 0% 100%)` analogamente; il grigio puro produce `hsl(0 0% 50%)`.

Hue si avvolge a 360°, S e L sono percentuali

I tre assi di HSL hanno unità diverse. Hue è un grado angolare da 0 a 360 con avvolgimento — `hsl(370 ...)` viene interpretato come `hsl(10 ...)` perché le posizioni angolari si avvolgono. Saturation e Lightness sono percentuali dallo 0% al 100%, senza avvolgimento; i valori fuori range vengono clampati. CSS Color 4 accetta anche la tonalità in turn (`hsl(0.6turn ...)`) o radianti (`hsl(3.787rad ...)`); l'output dello strumento usa i gradi perché è la forma più comune nelle UI degli strumenti di design e nei documenti di specifica brand.

La lightness di HSL NON è percettivamente uniforme

Un verde a `hsl(120 100% 50%)` appare visibilmente più luminoso di un blu a `hsl(240 100% 50%)`, anche se entrambi hanno la stessa Lightness nominale — perché HSL eredita le stranezze gamma di sRGB e usa la stessa scala L su ogni tonalità. È per questo che le scale di tinte chiare basate su HSL appaiono irregolari (l'estremità chiara della scala verde sale più velocemente dell'estremità chiara della scala blu) e perché i design system sono in gran parte migrati a OKLCH per la generazione di scale. Lo strumento espone sia HSL sia OKLCH così la scelta è a un colpo d'occhio di distanza.

Fonte di verità interna OKLCH per stabilità del round-trip

Anche se questo spoke mira specificamente a HEX → HSL, il convertitore sottostante condiviso mantiene internamente il colore canonico come tripletta OKLCH. HEX → HSL → RGB → OKLAB → HEX fa il round-trip restando bit-stable; i convertitori legacy con pivot HSL accumulano errore di arrotondamento e possono far derivare la tonalità di diversi gradi su poche conversioni. Il pivot OKLCH preserva anche Hue come asse stabile, quindi trascinare il cursore di tonalità non attraversa accidentalmente il grigio. Secondo il paper OKLAB di Björn Ottosson del 2020.

Codifica del canale: unsigned a 8 bit, gamma-encoded sRGB

I codici hex codificano canali RGB unsigned a 8 bit (0-255) nello spazio colore sRGB definito da IEC 61966-2-1 (1996). I valori sono *gamma-encoded* — la relazione tra valore di canale e luminosità percepita è non-lineare, seguendo la funzione di trasferimento sRGB piecewise (all'incirca un esponente 2,4 con un piccolo segmento lineare vicino allo zero). HSL viene derivato direttamente da questi valori RGB gamma-encoded senza alcuno step di linearizzazione, che è la causa radice del problema di uniformità percettiva di HSL. OKLCH linearizza prima e poi rimappa su uno spazio percettivamente uniforme; HSL no.

Best practice per i flussi di lavoro HEX / HSL

Usi la moderna sintassi HSL con spazi nel nuovo codice

`hsl(217 91% 60%)` (con spazi) e `hsl(217 91% 60% / 0.5)` (slash per l'alpha) di CSS Color 4 sono le sintassi canoniche per il codice che spedisce nel 2025 e oltre. Le forme legacy con virgole `hsl(217, 91%, 60%)` e `hsla(217, 91%, 60%, 0.5)` sono ancora supportate ovunque ma stilisticamente deprecate in CSS Color 4. Usi la sintassi moderna nei nuovi fogli di stile; mantenga `hsla()` solo per contesti di fallback IE 9-11 dove serve davvero supporto legacy.

Generi scale in OKLCH, non in HSL

L'asse Lightness di HSL non è percettivamente uniforme — una scansione L a 9 passi produce una scala in cui i passi verdi appaiono più luminosi dei passi blu a ogni valore L. Per scale in cui ogni passo deve apparire ugualmente luminoso (la richiesta di default dei design system), generi invece in OKLCH: `oklch(0.7 0.15 217)`, `oklch(0.6 0.15 217)`, ecc. Lo strumento espone sia HSL sia OKLCH per lo stesso hex, quindi passare tra i due dista un clic Copia.

Blocchi tonalità e saturazione, scansioni la luminosità

Quando usa HSL per il lavoro di tinte chiare/scure, cambi solo il numero L — mantenga H e S identici lungo la scala. La deriva di tonalità (anche di 5°) fa apparire una scala disordinata. La deriva di saturazione fa apparire l'estremità chiara sbiadita e l'estremità scura fangosa. La disciplina di un-asse-alla-volta è ciò che dà a HSL la sua reputazione amichevole per il design; abbandonarla dà il peggio di entrambi i mondi.

Preferisca hex per i token fonte di verità, HSL per le varianti calcolate

Quando scrive una specifica di design token, preferisca hex (o OKLCH) come forma canonica — sono più tersi e si inseriscono puliti in JSON o YAML. HSL è più utile per i token *derivati* a runtime (`hsl(from var(--primary) h s calc(l + 10%))`) che come formato fonte di verità. I due formati descrivono lo stesso colore; la scelta riguarda quale ruolo gioca il token nel sistema.

Documenti le varianti HSL con l'hex base

Quando spedisce una variabile CSS come `--primary-light: hsl(217 91% 70%)`, includa un commento che punti all'hex base: `/* base: #3b82f6 → hsl(217 91% 60%), variante light +10% L */`. Sei mesi dopo, quando qualcuno vuole derivare `--primary-lighter`, ha bisogno del colore base da cui calcolare — e HSL da solo non lo espone. Hex + HSL insieme preservano la piena provenienza.

Usi l'URL hash per condividere decisioni di colore live

Ogni cambio di colore aggiorna l'hash URL come `#hex=3b82f6` automaticamente. Copi l'URL in un thread Slack o in una issue GitHub e chiunque lo apra atterra sullo stesso colore con la stessa tripletta HSL. Questo è più affidabile che incollare una stringa HSL in chat — i destinatari a volte fanno typo sul grado o omettono un segno di percentuale quando inseriscono manualmente il valore — e consente a un thread di design-review di riferirsi a un colore esatto invece di "il blu di cui abbiamo parlato martedì". L'hash non viene mai trasmesso al server.

Domande frequenti