# Converti da HEX a OKLCH, e da OKLCH a HEX > Converti HEX, RGB e HSL in OKLCH e OKLab, e viceversa, con il valore CSS pronto da copiare. Ti avvisa quando un colore esce dal gamut sRGB. Gratis, nel browser. Strumento gratuito nel browser (nessun upload): https://www.mauriziofonte.it/strumenti/convertitore-oklch Incolla un colore in **HEX, RGB, HSL, OKLCH o OKLab** e ottieni tutti gli altri formati, già scritti come li vuole il CSS: `oklch(62.8% 0.2577 29.23)`. Se il colore OKLCH non esiste negli schermi comuni (sRGB) te lo diciamo, invece di arrotondarlo in silenzio. Tutto nel browser. ## Come convertire un colore in OKLCH 1. **Incolla il colore** - Scrivi o incolla il valore nel campo del suo formato: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34) o oklab(0.68 0.17 0.12). Gli altri campi si aggiornano subito. 2. **Copia la forma CSS** - Ogni campo ha il pulsante Copia: il valore è già nella sintassi CSS Color 4, da incollare in un foglio di stile o in una variabile del design system. 3. **Guarda l'avviso di gamut** - Se il colore OKLCH è più saturo di quanto sRGB permetta, sotto i formati compare un avviso: HEX, RGB e HSL mostrano un'approssimazione, non lo stesso colore. 4. **Costruisci la scala** - La palette tiene fissi croma e tinta e cambia solo la luminosità: ottieni una scala di toni coerenti, utile per i colori di un design system. ## Perché convertire i colori in OKLCH **OKLCH** descrive un colore con tre numeri che corrispondono a come lo vede l'occhio: **L** è la luminosità percepita, **C** la croma (quanto è saturo), **H** la tinta, in gradi. È la forma polare di **OKLab**, lo spazio colore pubblicato da Björn Ottosson nel 2020 e adottato nella specifica CSS Color 4. Oggi tutti i browser principali la leggono nativamente con le funzioni `oklch()` e `oklab()`. Il vantaggio rispetto a HSL è concreto. In HSL un giallo e un blu con la stessa L appaiono uno chiarissimo e l'altro scuro, perché quella L è un numero geometrico e non percettivo. In OKLCH due colori con la stessa L sembrano davvero ugualmente luminosi. Per questo chi costruisce un design system usa OKLCH per le scale di toni e per i temi chiaro e scuro: cambi un numero e sai cosa succede. I convertitori dedicati che trovi in rete fanno bene una cosa sola. Qui OKLCH e OKLab convivono con HEX, RGB, HSL e Lab nello stesso pannello, con il controllo del contrasto WCAG sullo stesso colore: converti, verifichi che il testo resti leggibile e copi il valore senza cambiare strumento. ## OKLCH, OKLab e il gamut sRGB **OKLab e OKLCH sono lo stesso spazio.** OKLab usa coordinate cartesiane: L per la luminosità, a per l'asse verde-rosso, b per l'asse blu-giallo. OKLCH usa le stesse informazioni in forma polare: la croma è la distanza dal grigio, la tinta è l'angolo. Passare dall'uno all'altro è trigonometria, senza perdita. **Perché un colore OKLCH può non avere un HEX.** HEX, RGB e HSL descrivono colori dentro sRGB, lo spazio dei monitor comuni. OKLCH invece può descrivere colori molto più saturi, che esistono solo su schermi wide gamut come i display P3 di iPhone e Mac recenti. Se converti uno di questi colori in HEX, il risultato non può essere identico: si ottiene un'approssimazione sRGB. Molti convertitori lo fanno senza dirlo; questa pagina mostra un avviso e lascia intatto il valore OKLCH che hai scritto, così puoi decidere tu. **Come si scrive in CSS.** La sintassi è `oklch(L C H)` con la luminosità in percentuale o fra 0 e 1, la croma come numero (di solito fra 0 e 0.4) e la tinta in gradi; la trasparenza si aggiunge con la barra: `oklch(62.8% 0.2577 29.23 / 0.5)`. Per i browser molto vecchi puoi dichiarare prima il colore in HEX e subito dopo lo stesso colore in oklch(): chi non capisce la seconda riga usa la prima. ## Glossario - **sRGB**: Spazio colore standard del web definito in IEC 61966-2-1 (1999). Gamut: ~35% dei colori visibili. Default per tutti i monitor consumer fino al 2018. - **OKLCH**: Spazio colore polare (Lightness, Chroma, Hue) basato su OKLab. Bjorn Ottosson, 2020. Standardizzato in CSS Color Level 4. Perceptually uniform. - **Lab CIE 1976**: Spazio colore L*a*b* della Commission Internationale de l'Eclairage. Tentativo storico di perceptual uniformity, ma con errori noti in alto chroma (blu, viola). Utile per backward compatibility, OKLCH è superiore. - **WCAG contrast ratio**: Formula (L1+0.05)/(L2+0.05) con L1, L2 luminanza relativa sRGB. Range 1:1 (identici) a 21:1 (nero su bianco). Soglie WCAG 2.1: 3:1 large AA, 4.5:1 normal AA, 7:1 normal AAA. - **Gamut**: L'insieme di colori rappresentabili in uno spazio colore. sRGB ~35% del visibile, Display P3 ~45%, Rec.2020 ~75%. OKLCH è gamut-agnostic: rappresenta qualsiasi colore se il display lo supporta. - **Hue stability**: Proprietà di uno spazio colore: cambiare L preserva la hue percepita. HSL non ha hue stability (blu chiaro vira viola). OKLCH si. ## Domande frequenti su OKLCH ### Come converto un HEX in OKLCH? Incolla il valore HEX nel campo HEX: il campo OKLCH mostra subito la conversione, per esempio #ff0000 diventa oklch(62.8% 0.2577 29.23). Il pulsante Copia porta il valore negli appunti nella sintassi CSS. ### E da OKLCH a HEX? Scrivi il colore nel campo OKLCH, con o senza la funzione oklch(): HEX, RGB e HSL si aggiornano. Se il colore è fuori dal gamut sRGB compare un avviso, perché l'HEX mostrato è un'approssimazione e non il colore esatto. ### Che differenza c'è fra OKLCH e OKLab? Sono lo stesso spazio colore scritto in due modi. OKLab usa le coordinate L, a, b; OKLCH le trasforma in luminosità, croma e tinta, più comode da modificare a mano. La pagina li mostra entrambi. ### I browser supportano oklch()? Sì, tutti i browser principali leggono oklch() e oklab() da diverse versioni. Se devi supportare browser molto vecchi, dichiara prima lo stesso colore in HEX: chi non capisce oklch() usa la riga precedente. ### Perché il mio colore OKLCH esce dal gamut? Perché è più saturo di quanto un monitor sRGB possa mostrare. Succede spesso con croma alte, sopra 0.2-0.3 a seconda della tinta. Su uno schermo P3 il browser può mostrarlo; in HEX ottieni un'approssimazione sRGB. ### Che valori può avere la croma? Da 0, che è un grigio, in su. In pratica i colori visibili su uno schermo restano sotto 0.4, e dentro sRGB il limite dipende da tinta e luminosità: un blu raggiunge croma più alte di un giallo chiaro. ### La luminosità va scritta in percentuale o fra 0 e 1? Entrambe sono valide in CSS: oklch(62.8% 0.25 29) e oklch(0.628 0.25 29) sono lo stesso colore. La pagina accetta tutte e due le forme e restituisce la percentuale. ### OKLCH serve anche per il contrasto WCAG? Aiuta a costruire scale di toni con salti di luminosità regolari, ma il contrasto WCAG 2.1 si calcola sulla luminanza di sRGB. Per questo la pagina mostra il rapporto di contrasto accanto alla conversione: lo verifichi sul colore che userai davvero. ### Posso convertire anche la trasparenza? Sì. Imposta l'alpha con il cursore: la trovi nei valori HEX8 e nella forma CSS con la barra, come oklch(62.8% 0.2577 29.23 / 0.5). ### I colori che inserisco vengono inviati da qualche parte? No. Tutte le conversioni sono formule calcolate nel browser; una volta aperta, la pagina funziona anche senza connessione. --- Uno strumento di Maurizio Fonte, senior backend engineer. Tutti gli strumenti: https://www.mauriziofonte.it/strumenti/