Convertitore HEX in OKLCH

Cos'è un convertitore HEX in OKLCH?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Caratteristiche principali

Alternative al convertitore HEX in OKLCH

Esempi di conversione HEX in OKLCH

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Conversioni HEX → OKLCH comuni (Tailwind v4)

Tabella di riferimento di 10 popolari tinte scure di passo medio della palette di default di Tailwind v4 con i loro equivalenti HEX e OKLCH. I valori corrispondono alla precisione della palette pubblicata di Tailwind v4 (tre decimali su L e C, intero o un decimale su H).

Come usare il convertitore HEX in OKLCH

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`). Il parser normalizza tutte e cinque le forme di input nello stesso colore interno prima di derivare OKLCH. 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 OKLCH.

2. 2

   Legga la tripletta OKLCH dal campo OKLCH

   Il campo OKLCH mostra il valore nella moderna forma di CSS Color 4: `oklch(0.629 0.193 263.4)` per un colore opaco, `oklch(0.629 0.193 263.4 / 0.5)` per uno con alpha. L è arrotondato a tre decimali (corrisponde alla precisione pubblicata di Tailwind v4), C a tre decimali, H a un decimale di grado. La fonte di verità interna OKLCH dello strumento significa che la precisione float sottostante viene preservata su ogni altro campo — il round-trip indietro verso hex resta bit-stable, a differenza dei convertitori legacy che instradano attraverso HSL e che derivano di un grado o due per ogni round-trip.

3. 3

   Faccia clic su Copia per ottenere la stringa OKLCH

   Ogni scheda di formato ha un pulsante Copia sulla destra. Un clic e il valore atterra negli appunti — l'etichetta del pulsante passa brevemente a "Copiato!" per conferma. La stringa copiata è la sintassi canonica di CSS Color 4 (`oklch(0.629 0.193 263.4)`), pronta da inserire in un blocco `@theme` di Tailwind v4 o in una definizione di variabile CSS di shadcn/ui. Per output specifico per piattaforma (custom property CSS, token Tailwind v4, SwiftUI, Compose, Flutter) usi la sezione Copia come codice sotto il picker — questi snippet emettono il formato che ogni piattaforma si aspetta nativamente.

4. 4

   Controlli le badge di gamma cromatica Display P3 / Rec2020

   Tre badge di gamma cromatica (sRGB, Display P3, Rec2020) mostrano se il colore corrente rientra nell'intervallo riproducibile di ciascuno spazio. Se la badge sRGB diventa rossa ma P3 è verde, il colore è un OKLCH wide-gamut che si renderizzerà saturo su hardware Apple (iPhone, iPad, MacBook dal 2017 in poi) ma desaturerà su un monitor legacy a 24 bit. Il pulsante **Snap a sRGB** usa la riduzione binaria del chroma (algoritmo informativo di CSS Color 4 §13) per ridurre il colore dentro sRGB preservando L e H, producendo un fallback hex che può spedire tramite `@supports not (color: oklch(0 0 0))`.

5. 5

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

   Lo stesso hex che incolla accende anche gli altri otto campi di formato — RGB per chiamate canvas e hardware, HSL per le variabili CSS legacy, OKLAB per matematica di palette e matrici di daltonismo, 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 solo a hex → OKLCH. Il picker (quadrato SL + cursore di tonalità + cursore alpha) guida tutti e nove simultaneamente, e sui browser Chromium il pulsante EyeDropper campiona qualunque pixel sullo schermo, anche fuori dal browser.

Errori comuni HEX / OKLCH

Imposti OKLCH C = 0,3 aspettandosi "saturazione 30%":
oklch(0.7 0.3 250) → può eccedere la gamma sRGB per i blu
Il colore wide-gamut si renderizza desaturato su display legacy.

Tratti C come chroma assoluto, controlli le badge di gamma cromatica:
oklch(0.7 0.15 250) → comodamente in sRGB per questa coppia L+H
Usi le badge per trovare il C massimo che rientra nella gamma target.

Copia direttamente le percentuali L di HSL in OKLCH:
hsl(220 50% 30%) trasportato come oklch(0.30 0.10 220)
I due colori appaiono notevolmente diversi in luminosità.

Ri-derivi OKLCH dall'hex originale, non trasporti HSL:
sorgente hex → conversione OKLCH → oklch(0.34 0.08 254)
La L percettiva resta corretta; la palette appare uniforme.

Spedisca oklch(0.7 0.4 30) senza controllare la gamma sRGB:
I display P3 renderizzano un rosso saturo; i display sRGB renderizzano desaturato
Il colore brand appare incoerente sull'hardware degli utenti.

Controlli la badge di gamma cromatica sRGB, faccia Snap a sRGB se serve, stratifichi con @supports:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
L'hardware P3 ottiene il valore wide-gamut; l'hardware sRGB ottiene il fallback snappato.

Definisca il colore brand solo in OKLCH:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 e il vecchio Safari iOS non renderizzano alcun colore.

Stratifichi con @supports per un fallback con grazia:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
I browser moderni ottengono OKLCH; i browser legacy ottengono il fallback hex.

Sostituisca lch() a oklch() aspettandosi lo stesso risultato:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — colori del tutto diversi
Copia-incollato tra gli spazi, il valore è silenziosamente sbagliato.

Scelga uno spazio e ci resti:
oklch(0.629 0.193 263.4) per design system moderni
oppure lch(60% 50 240) — ma non scambi i nomi delle funzioni senza ri-convertire

Chi usa HEX in OKLCH

Sviluppatori frontend che migrano a token OKLCH di Tailwind v4

Tailwind v4 si è standardizzato su OKLCH per la sua palette di default a gennaio 2025. Migrare una codebase v3 con colori brand basati su hex significa convertire ogni hex in OKLCH e inserire il risultato nel nuovo blocco `@theme`. Incolli ogni hex qui, copi il valore `oklch()`, definisca `--color-primary: oklch(0.629 0.193 263.4)` e simili. Le badge di gamma cromatica live segnalano qualunque colore che ecceda sRGB così può decidere se mantenere il valore wide-gamut per gli utenti Display P3 o fare snap a sRGB.

Autori di temi shadcn/ui che costruiscono palette custom

Il tema basato su variabili CSS di shadcn/ui usa OKLCH per ogni token (`--background`, `--foreground`, `--primary`, ecc.). I temi custom derivano da un hex brand di base convertendo a OKLCH e poi facendo variare L per le varianti chiare/scure. Incolli l'hex brand, legga la tripletta OKLCH, costruisca il resto del tema spostando L mantenendo C e H fissi. Corrisponde esattamente al flusso shadcn canonico.

Autori di design system che generano scale percettivamente uniformi

Generi una scala 50/100/200/.../900 spostando il canale L in incrementi OKLCH uguali mantenendo C e H fissi. Il gap visivo tra stop adiacenti appare identico su ogni tonalità — ciò di cui una palette di colori brand ha davvero bisogno. Tailwind v4 usa esattamente questa costruzione per la sua palette di default, e shadcn/ui la rispecchia. Incolli ogni hex brand, legga l'OKLCH, generi la scala in modo algoritmico o tramite il pannello Tints/Shades/Tones sotto il picker.

Ingegneri dell'accessibilità che verificano il contrasto in spazio OKLCH

Il contrasto WCAG 2.1 e APCA riportano entrambi rispetto al colore sRGB risolto, non alla tripletta OKLCH — ma conoscere la L OKLCH di un colore brand rende prevedibile la regolazione del contrasto: alzi L di 0,1 per superare AA contro il bianco, abbassi L di 0,1 per superare AA contro il nero. La vista simultanea OKLCH + WCAG + APCA rende visibile la relazione. Incolli l'hex brand, osservi le badge di contrasto, regoli L in OKLCH (più prevedibile che in HSL) finché la coppia non supera entrambe le metriche.

Sviluppatori web che costruiscono token wide-gamut per display moderni

La maggior parte dei dispositivi Apple dal 2017 (e molti dispositivi Android moderni) renderizza Display P3 nativamente. Definire colori brand accent in OKLCH permette di indirizzare rossi e verdi saturi solo P3 che nessun codice hex può codificare. Incolli un hex esistente per leggerne l'OKLCH, poi spinga il canale C oltre il tetto sRGB per rivendicare la saturazione extra P3. Le badge di gamma cromatica confermano che il nuovo valore rientra in P3 (e ricade con grazia su schermi solo sRGB tramite compressione del chroma del browser).

Insegnanti che spiegano luminosità percettiva vs geometrica

La vista simultanea OKLCH + HSL rende ovvia la differenza tra luminosità percettiva e geometrica. Incolli un verde saturo e un blu saturo alla stessa HSL L=50%; i valori L di OKLCH differiscono notevolmente perché OKLCH misura la luminosità percepita reale. Trascini il cursore di tonalità di HSL e osservi la L di OKLCH oscillare mentre tiene HSL L costante — la curva è la stranezza di gamma visualizzata. Una dimostrazione pronta per l'aula del perché i design system siano migrati a OKLCH.

Mantenitori open source che modernizzano la documentazione dei token

Le docs dei design system più datate elencano tipicamente i colori brand solo come codici hex. Modernizzare a OKLCH significa mostrare lo stesso colore in entrambi gli spazi — l'hex per la compatibilità del blocco di codice, l'OKLCH per la tabella della spec e la moderna definizione del token. Incolli ogni hex, copi l'output OKLCH, aggiorni la documentazione. L'hash URL condivisibile permette inoltre ai contributori di linkare al colore esatto in discussione in una issue GitHub senza ambiguità.

Matematica e pipeline HEX in OKLCH

HEX → OKLCH è una pipeline a 7 passi

La conversione passa attraverso cinque rappresentazioni intermedie: hex → sRGB intero → sRGB normalizzato (0-1) → linear-sRGB (gamma decodificata) → CIE XYZ D65 → OKLAB → OKLCH. Ogni passo è una matrice o una funzione piecewise ben definita da una fonte primaria. Lo strumento esegue la pipeline completa a ogni pressione di tasto; la matematica è abbastanza veloce (microsecondi) da non richiedere debouncing. Esporre la tupla RGB intermedia accanto a OKLCH significa che può fare debug di un valore OKLCH inatteso ispezionando i canali RGB.

Funzione di gamma CSS Color 4 §11.2

La conversione sRGB → linear-sRGB usa la funzione piecewise di CSS Color 4 §11.2: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. La forma piecewise (con un piccolo segmento lineare vicino allo zero) evita l'instabilità numerica della forma a esponente puro per i colori molto scuri. È la stessa funzione che i profili ICC usano per codificare sRGB e la stessa funzione che i browser usano internamente quando renderizzano i codici hex. L'inverso per OKLCH → hex applica la stessa funzione al contrario: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

Matrice CSS Color 4 §15.1: linear-sRGB ↔ XYZ D65

La matrice di CSS Color 4 §15.1 converte linear-sRGB in CIE XYZ sotto il punto di bianco D65: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. La riga Y fornisce la formula della luminanza sRGB. La matrice è la stessa usata in ogni libreria di color management, incluse ICC, Adobe Color Engine e la pipeline open-source LCMS. La matrice inversa per OKLCH → hex applica l'inversa §15.1.

Matrici OKLAB di Ottosson 2020 e passo di radice cubica

La conversione XYZ D65 → OKLAB usa due matrici e un passo di radice cubica pubblicati nel paper OKLAB del 2020 di Björn Ottosson. La prima matrice trasforma XYZ in uno spazio di risposta dei coni LMS (modellato vagamente sulle sensibilità dei coni umani L/M/S). La radice cubica di ogni canale comprime l'intervallo dinamico in modo non lineare (il passo che corregge l'uniformità percettiva). La seconda matrice trasforma l'LMS dopo radice cubica nelle coordinate L/a/b di OKLAB. Tutte e tre le operazioni usano i valori esatti pubblicati nell'implementazione di riferimento del paper; nessuna ri-derivazione né arrotondamento. L'inverso per OKLCH → hex applica queste matrici al contrario.

OKLAB ↔ OKLCH è cartesiano-a-polare

Gli assi `a` e `b` di OKLAB formano un piano di chroma perpendicolare all'asse L. OKLCH polare-codifica quel piano: `C = sqrt(a² + b²)` (distanza euclidea dal grigio), `H = atan2(b, a) * 180 / π` (angolo in gradi, fatto rientrare in 0-360°). L'inverso: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. La forma polare è preferita a OKLAB per la conservazione dei design token perché Hue è un asse stabile — ruotare Hue non attraversa accidentalmente il grigio come può fare ruotare `a` o `b` in OKLAB.

Rilevamento della gamma cromatica tramite controllo dell'intervallo dei canali

Un colore è considerato in gamma per uno spazio target (sRGB, Display P3, Rec2020) se ogni canale rientra in `[-ε, 1 + ε]` dopo la conversione ai primari di quello spazio, dove `ε = 1e-7` per assorbire il rumore di precisione float attorno ai confini. La badge della gamma cromatica di ogni spazio diventa rossa quando un canale eccede l'intervallo. OKLCH è non limitato in gamma — `oklch(0.7 0.4 30)` è una coordinata valida ma può eccedere lo spazio byte 256-per-canale di sRGB. Il controllo gira a ogni pressione di tasto; combinato con Snap a sRGB, intercetta la trappola di adozione più comune (OKLCH wide-gamut che non si visualizza correttamente su schermi legacy).

Riduzione binaria del chroma per Snap a sRGB

Snap a sRGB corrisponde all'algoritmo informativo di gamut-mapping di CSS Color 4 §13: tenga L e H fissi ai valori correnti, faccia una ricerca binaria di C ∈ [0, currentC] per il C più grande la cui conversione sRGB resta in gamma. La ricerca gira al massimo per 30 iterazioni (precisione ~10⁻⁹), più che sufficiente per accuratezza visiva. Preservare L e H significa che il colore snappato si legge come la stessa famiglia di tonalità alla stessa luminosità — perde solo saturazione. Non clippiamo direttamente i canali RGB perché ciò distorce notevolmente la tonalità (specialmente nei blu, che clippano verso il viola).

Best practice per i flussi di lavoro HEX / OKLCH

Usi OKLCH come formato token canonico nel nuovo codice

Per qualunque design system che spedisce nel 2025 o oltre, definisca colori brand e scale di palette in OKLCH. L'asse L produce automaticamente scale percettivamente uniformi; l'asse Chroma può indirizzare colori wide-gamut che l'hex non può codificare. Mantenga un fallback hex per i browser più vecchi tramite `@supports not (color: oklch(0 0 0))` o PostCSS a build-time, ma renda OKLCH la fonte di verità nel suo token store. Tailwind v4 e shadcn/ui spediscono entrambi in questo modo; i nuovi progetti possono seguire il loro esempio senza attrito.

Generi scale spostando L, mantenendo C e H costanti

Costruzione canonica della scala OKLCH: blocchi C e H, faccia variare L in incrementi uguali. Una scala di 9 passi `oklch(L 0.15 263)` per L = 0,1, 0,2, …, 0,9 produce una spaziatura visivamente uniforme lungo ogni passo. È esattamente ciò che Tailwind v4 fa internamente. Non faccia variare C insieme a L a meno che non voglia che l'intensità cromatica della scala vari deliberatamente (raro). Non lasci derivare H tra i passi — anche una deriva di 5° fa apparire la scala disordinata.

Corrisponda alla precisione di Tailwind v4: 3 decimali L+C, 1 decimale H

La palette di default di Tailwind v4 pubblica valori OKLCH con tre decimali su L e C, e un decimale su H — `oklch(0.629 0.193 263.4)` per blue-500. Corrispondere a questa precisione nei suoi token significa che i flussi paste-into-config producono valori identici a quelli che Tailwind spedisce, e gli strumenti di diff non segnaleranno differenze spurie. L'arrotondamento di default dello strumento segue questa convenzione; il copia-incolla in un blocco `@theme` è bit-exact.

Faccia passare OKLCH wide-gamut attraverso il controllo di gamma cromatica Display P3

Se sta mirando a hardware Apple moderno (iPhone, iPad, MacBook dal 2017+) o spedisce contenuto HDR-aware, le badge di gamma cromatica le permettono di spingere C oltre il tetto sRGB per rivendicare la saturazione extra P3. La compressione del chroma applicata dal browser impedisce al colore di clippare su schermi solo sRGB. Non faccia pre-snap a sRGB di default a meno che non sappia che tutto il suo pubblico è su display legacy — perderebbe il 30%+ della saturazione che l'hardware P3 può renderizzare.

Fornisca un fallback hex tramite @supports per i browser pre-2023

Anche se il supporto evergreen browser per `oklch()` è ora del 94%+, la coda lunga (IE 11, vecchio Android Chrome, webview embedded) ha ancora bisogno di un fallback. Avvolga i token in `@supports (color: oklch(0 0 0))` e fornisca una variante hex nel ramo alternativo. L'output di Snap a sRGB è esattamente quel fallback — generato automaticamente dalla tripletta OKLCH corrente con L e H preservati. I plugin PostCSS a build-time come `postcss-oklab-function` possono inoltre inserire l'approssimazione sRGB a tempo di compilazione.

Documenti sia l'OKLCH sia l'hex sorgente nei suoi token

Quando spedisce una variabile CSS come `--color-primary: oklch(0.629 0.193 263.4)`, includa un commento con l'hex sorgente: `/* source: #3b82f6 (Tailwind blue-500) */`. Sei mesi dopo, quando qualcuno deve derivare una tinta scura correlata o verificare il valore rispetto a un PDF di brand guidelines, l'hex sorgente preserva la traccia di provenienza completa. OKLCH da solo è significativo ma più difficile da riconoscere a vista; l'hex sorgente è l'identificatore che la maggior parte dei colleghi cercherà per primo.

Usi l'URL hash per condividere decisioni di colore live

Ogni cambio di colore aggiorna l'hash URL come `#hex=3b82f6` o `#oklch=...` 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 OKLCH. Questo è più affidabile che incollare una stringa OKLCH in chat — i destinatari a volte fanno typo nei decimali o avvolgono la precisione sbagliata — e consente a un thread di design-review di riferirsi a un colore esatto invece di "il blu brand di cui abbiamo parlato martedì". L'hash non viene mai trasmesso al server.

Domande frequenti