Cos'è OKLCH e perché dovrei usarlo al posto di HEX o HSL?

OKLCH (Luminosità, Croma, Tonalità) è uno spazio colore percettivamente uniforme basato sul modello Oklab. A differenza di HEX o HSL, variazioni numeriche uguali in OKLCH producono differenze percepite uguali. Questo lo rende ideale per progettare palette di colori accessibili, creare gradienti fluidi e generare scale di colori Tailwind v4 coerenti, dove la prevedibilità percettiva è fondamentale.

Come si converte HEX in OKLCH?

Incolla il valore HEX (ad esempio #3b82f6) nel campo di input HEX e il campo OKLCH si aggiorna istantaneamente con la notazione equivalente oklch(0.6 0.18 250). Anche tutti gli altri formati — OKLab, RGB e HSL — si sincronizzano contemporaneamente, permettendoti di confrontare i valori in tutti gli spazi colore in un colpo solo.

Cosa significa 'fuori dal gamut sRGB' e cosa succede al colore?

Alcuni colori OKLCH — in particolare i valori ad alta croma — superano lo spazio colore sRGB usato dalla maggior parte dei display. Quando ciò accade, lo strumento applica l'algoritmo toGamut di CSS Color 4 per trovare il colore sRGB visualizzabile più vicino. Un banner di avviso ambra appare mostrando il valore originale fuori gamut accanto al risultato mappato, garantendo piena trasparenza.

Come funziona il generatore di palette OKLCH per Tailwind v4?

Il generatore utilizza la schedulazione ufficiale di luminosità di Tailwind v4 (50=0.971, 100=0.945, fino a 950=0.238) applicata alla tua tonalità e croma attuali. Produce 11 gradini di colore dal chiaro allo scuro ed esporta un blocco di codice @theme { --color-brand-50: oklch(...); } pronto da incollare nel tuo CSS senza ulteriori modifiche.

Perché l'interpolazione OKLCH appare migliore di HSL per i gradienti?

HSL interpola attraverso un sistema di coordinate cilindriche che non corrisponde alla percezione umana, causando spesso cali di grigio o spostamenti di tonalità inaspettati a metà di un gradiente. OKLCH interpola nello spazio perceptivamente uniforme Oklab, quindi luminosità e croma transitano senza problemi senza effetti di colore inattesi, producendo gradienti più naturali e visivamente piacevoli.

Questo convertitore OKLCH è gratuito e privato?

Sì. Lo strumento è completamente gratuito e funziona interamente nel tuo browser utilizzando la libreria culori. Nessun valore di colore viene caricato su un server, quindi puoi usarlo con la massima tranquillità per progetti riservati o sensibili.

Il CSS Color 4 OKLCH funziona in tutti i browser?

La sintassi del colore OKLCH (oklch()) è supportata in tutti i browser moderni dal 2023, inclusi Chrome 111+, Firefox 113+, Safari 15.4+ e Edge 111+. Per i browser meno recenti, usa i valori di fallback HEX o RGB forniti da questo convertitore, che garantiscono la compatibilità con ambienti più datati.

Strumenti Colore

Convertitore Colori OKLCH – CSS Color 4, Generatore Palette Tailwind v4

Convertitore OKLCH gratuito con sincronizzazione in tempo reale tra OKLCH, OKLab, RGB, HSL e HEX. Include cursori L/C/H/alpha, mappatura gamut CSS Color 4 ed esportazione palette Tailwind v4.

OKLCH (Luminosità, Croma, Tonalità) è uno spazio colore percettivamente uniforme costruito sul modello Oklab e adottato ufficialmente in CSS Color Level 4. A differenza di RGB o HSL, OKLCH mantiene la luminosità percepita coerente tra le tonalità, rendendolo ideale per sistemi di colori accessibili, palette Tailwind v4 e gradienti fluidi.

Come Usare il Convertitore di Colori OKLCH

1
Inserisci un valore di colore
Digita o incolla un valore in qualsiasi formato supportato: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) oppure oklab(0.6 -0.056 -0.169). Lo strumento sincronizza istantaneamente tutti gli altri formati.
2
Affina con i cursori L/C/H/Alpha
Trascina i cursori di Luminosità (L), Croma (C), Tonalità (H) o Alpha. Il cursore Croma mostra il marcatore del limite del gamut sRGB, così sai sempre quando un colore supera l'intervallo di visualizzazione standard.
3
Controlla l'avviso gamut se appare
Se il colore OKLCH è fuori dal gamut sRGB, un banner di avviso ambra mostra il valore originale e il risultato mappato con l'algoritmo toGamut di CSS Color 4 usato per la visualizzazione.
4
Genera una palette Tailwind v4
La sezione palette OKLCH di Tailwind v4 genera automaticamente gradini di colore da 50 a 950 per la tonalità corrente, seguendo la schedulazione ufficiale di luminosità di Tailwind. Clicca Copia per incollare il blocco @theme direttamente nel tuo CSS.

Riferimenti

W3C CSS Color Level 4 – oklch()
La specifica W3C che definisce la notazione del colore OKLCH e gli algoritmi di mappatura gamut.
Culori – Libreria JavaScript per i Colori
La libreria open-source che alimenta la conversione OKLCH, la mappatura toGamut e l'interpolazione percettiva in questo strumento.
Evil Martians – OKLCH in CSS: Why Quit RGB and HSL?
Una guida completa che spiega i vantaggi di OKLCH rispetto a RGB e HSL per il lavoro moderno sui colori.
Tailwind CSS v4 – Palette Predefinita
La documentazione ufficiale della palette colori di Tailwind, inclusi i valori di luminosità OKLCH usati in questo generatore di palette.

Strumenti Correlati

Convertitore Colori

Converti tra RGB, RGBA, HEX, HSL, HSV e CMYK con sincronizzazione bidirezionale in tempo reale.

Minificatore CSS

Minifica il CSS che utilizza i tuoi valori di colore OKLCH.

Visualizzatore SVG

Anteprima e ispezione di grafica SVG che usa valori OKLCH per riempimento e contorno.

Domande Frequenti

Cos'è OKLCH e perché dovrei usarlo al posto di HEX o HSL?: OKLCH (Luminosità, Croma, Tonalità) è uno spazio colore percettivamente uniforme basato sul modello Oklab. A differenza di HEX o HSL, variazioni numeriche uguali in OKLCH producono differenze percepite uguali. Questo lo rende ideale per progettare palette di colori accessibili, creare gradienti fluidi e generare scale di colori Tailwind v4 coerenti, dove la prevedibilità percettiva è fondamentale.
Come si converte HEX in OKLCH?: Incolla il valore HEX (ad esempio #3b82f6) nel campo di input HEX e il campo OKLCH si aggiorna istantaneamente con la notazione equivalente oklch(0.6 0.18 250). Anche tutti gli altri formati — OKLab, RGB e HSL — si sincronizzano contemporaneamente, permettendoti di confrontare i valori in tutti gli spazi colore in un colpo solo.
Cosa significa 'fuori dal gamut sRGB' e cosa succede al colore?: Alcuni colori OKLCH — in particolare i valori ad alta croma — superano lo spazio colore sRGB usato dalla maggior parte dei display. Quando ciò accade, lo strumento applica l'algoritmo toGamut di CSS Color 4 per trovare il colore sRGB visualizzabile più vicino. Un banner di avviso ambra appare mostrando il valore originale fuori gamut accanto al risultato mappato, garantendo piena trasparenza.
Come funziona il generatore di palette OKLCH per Tailwind v4?: Il generatore utilizza la schedulazione ufficiale di luminosità di Tailwind v4 (50=0.971, 100=0.945, fino a 950=0.238) applicata alla tua tonalità e croma attuali. Produce 11 gradini di colore dal chiaro allo scuro ed esporta un blocco di codice @theme { --color-brand-50: oklch(...); } pronto da incollare nel tuo CSS senza ulteriori modifiche.
Perché l'interpolazione OKLCH appare migliore di HSL per i gradienti?: HSL interpola attraverso un sistema di coordinate cilindriche che non corrisponde alla percezione umana, causando spesso cali di grigio o spostamenti di tonalità inaspettati a metà di un gradiente. OKLCH interpola nello spazio perceptivamente uniforme Oklab, quindi luminosità e croma transitano senza problemi senza effetti di colore inattesi, producendo gradienti più naturali e visivamente piacevoli.
Questo convertitore OKLCH è gratuito e privato?: Sì. Lo strumento è completamente gratuito e funziona interamente nel tuo browser utilizzando la libreria culori. Nessun valore di colore viene caricato su un server, quindi puoi usarlo con la massima tranquillità per progetti riservati o sensibili.
Il CSS Color 4 OKLCH funziona in tutti i browser?: La sintassi del colore OKLCH (oklch()) è supportata in tutti i browser moderni dal 2023, inclusi Chrome 111+, Firefox 113+, Safari 15.4+ e Edge 111+. Per i browser meno recenti, usa i valori di fallback HEX o RGB forniti da questo convertitore, che garantiscono la compatibilità con ambienti più datati.