Convertitore OKLCH e generatore di palette
Converti fra OKLCH, hex, RGB e HSL e costruisci rampe che restano percettivamente regolari, perché luminosità e chroma restano fissi mentre la tonalità ruota. I colori fuori dall'sRGB sono mappati riducendo il chroma, non troncando i canali: la differenza è se il tuo viola resta viola.
Perché in OKLCH la luminosità ha un senso
In HSL, cambiare la tonalità a luminosità fissa cambia quanto il colore appare chiaro: il giallo al 50% risulta molto più chiaro del blu al 50%, ed è per questo che le rampe HSL sembrano irregolari per quanta cura si metta nella spaziatura. OKLab è stato tarato su dati percettivi, quindi il suo asse di luminosità segue quello che l'occhio percepisce. Tieni fermi L e C, ruota H, e ogni campione avrà lo stesso peso visivo: è tutta qui la ragione per costruire le palette qui invece che in HSL.
Il gamut mapping è la parte che conta
Molti valori OKLCH non hanno alcun equivalente in sRGB, e la soluzione ingenua è riportare a forza ogni canale nell'intervallo. Questo sposta la tonalità in modo visibile: un viola acceso clippato canale per canale scivola verso il blu. Ridurre il croma tenendo fisse luminosità e tonalità mantiene il colore riconoscibile per quello che è e toglie solo la saturazione che lo schermo non poteva comunque mostrare. Questa pagina usa l'algoritmo di CSS Color 4: ricerca binaria sul croma, accettando il risultato clippato non appena rientra in una differenza appena percettibile rispetto al colore ridotto.
Verificato con un riferimento
Le conversioni sono state confrontate con un'implementazione indipendente su una griglia di quattromila colori: luminosità e croma coincidono fino al milionesimo, la tonalità fino al decimillesimo di grado, e ogni valore hex torna esatto. Il gamut mapping è stato verificato allo stesso modo su quattrocentottanta colori fuori gamut e nel caso peggiore resta entro una parte su 255. Chi legge OKLCH si accorge di una matrice sbagliata, quindi è parso giusto dire come è stato verificato.
Usare l'output
Le proprietà personalizzate sono scritte in OKLCH con l'hex accanto in un commento, perché è quella la coppia che vuoi in revisione: il valore che finisce nella build e quello che puoi incollare altrove. Ogni browser oggi in uso capisce la sintassi OKLCH; se ne supporti ancora uno che non la capisce, il commento è il tuo fallback.
Domande frequenti
Perché il croma è limitato a 0,4?
Perché in sRGB non c'è nulla che ci si avvicini. Il colore più saturo dell'sRGB è il blu, intorno a 0,313, e il cursore va oltre apposta, così vedi cosa cade fuori e come viene rimappato.
Cosa si intende qui per differenza appena percettibile?
Un delta E di 0,02 in OKLab, la soglia che usa CSS Color 4. Sotto quel valore clipping e riduzione del croma sono indistinguibili, quindi l'algoritmo prende il colore clippato e tiene il croma in più.
Gestisce P3 o Rec2020?
Non ancora. Qui tutto lavora in sRGB, ed è questo che significano gli avvisi di gamut. Gamut più ampi richiedono primari propri e un secondo set di matrici.
Viene inviato qualcosa all'esterno?
No. Le conversioni girano in questa pagina.
Realizzato dal team GO AI. Calcolatore di clamp() CSS · Verificatore di contrasto WCAG · Tutti gli strumenti gratuiti