Selettore e Convertitore di Colori
Converti un singolo colore tra HEX, RGB, HSL e OKLCH, con la conversione OKLCH↔sRGB fatta tramite lo spazio colore OKLab usando le matrici pubblicate da Björn Ottosson. Usa il selettore colore nativo o digita nei campi di qualsiasi formato, e gli altri formati si aggiornano man mano, con anteprime dal vivo. OKLCH è lo spazio colore percettivamente uniforme usato nel CSS moderno (`oklch()`): passi uguali in luminosità e croma appaiono ugualmente diversi all'occhio, cosa che HSL non garantisce. La conversione avviene nel browser.
Verificato da Vincenzo Manto, Fondatore e Lead Developer · Ultimo aggiornamento 27 settembre 2026
Come funziona
- 1
Usa il selettore colore nativo, oppure digita un valore direttamente nei campi HEX, RGB, HSL o OKLCH.
- 2
Ogni altro formato si aggiorna dal vivo mentre modifichi uno qualsiasi di essi, con un'anteprima del colore.
- 3
Trascina i cursori sotto RGB, HSL o OKLCH per un controllo preciso dei singoli canali.
- 4
Copia la stringa di qualsiasi formato (es. `oklch(0.628 0.225 29.2)`) direttamente negli appunti.
Perché HSL non è percettivamente uniforme
HSL è stato progettato negli anni '70 per essere facile da usare, non per corrispondere alla percezione umana del colore. Un blu puro e un giallo puro allo stesso valore di luminosità HSL possono apparire molto diversi in luminosità reale, il che rende HSL poco affidabile per costruire scale di colori, garantire un contrasto accessibile o generare tonalità che sembrino uniformemente distanziate.
OKLab e OKLCH risolvono il problema con una vera matematica percettiva
OKLab, pubblicato da Björn Ottosson nel 2020, trasforma l'sRGB lineare attraverso una matrice ispirata ai coni LMS e una non linearità a radice cubica, calibrata su dataset percettivi in modo che la distanza nello spazio OKLab rispecchi piuttosto bene la differenza di colore percepita. OKLCH è OKLab espresso in coordinate cilindriche Luminosità/Croma/Tonalità, motivo per cui CSS Color Level 4 lo ha adottato e perché è comune nelle scale di colore dei design system che richiedono passi percepiti coerenti.
Domande frequenti
Cos'è OKLCH e perché usarlo nel CSS?
OKLCH è la forma cilindrica (Luminosità/Croma/Tonalità) dello spazio colore OKLab. È costruito in modo che variazioni numeriche uguali in luminosità o croma producano cambiamenti visivamente uguali, cosa che HSL non garantisce (una luminosità HSL del 50% può apparire molto diversa a seconda della tonalità). Il CSS moderno supporta `oklch()` direttamente ed è usato per costruire palette di colori con contrasto percepito prevedibile.
La conversione OKLCH è un'approssimazione?
Lo strumento usa le matrici sRGB-lineare↔LMS↔OKLab pubblicate da Björn Ottosson e la funzione standard di trasferimento gamma sRGB, le stesse formule di riferimento usate dai browser che implementano `oklch()` di CSS Color 4.
Perché a volte i miei valori OKLCH non tornano esattamente allo stesso HEX?
OKLCH copre una gamma leggermente diversa, basata sulla percezione, rispetto a sRGB, quindi i risultati fuori intervallo vengono limitati all'intervallo RGB 0-255 visibile, e l'arrotondamento in virgola mobile attraverso diversi passaggi di conversione può spostare un valore di circa ±1 unità. Per colori tipici questo è impercettibile.
Il selettore colore nativo funziona su tutti i browser?
Sì, `<input type="color">` è supportato da tutti i browser moderni e apre l'interfaccia del selettore colore integrata nel sistema operativo o nel browser.
I dati del mio colore vengono inviati da qualche parte?
No. La conversione avviene nel tuo browser con JavaScript e non lascia la tua macchina.