Convertitore OKLCH e generatore di palette
Converti fra OKLCH, hex, RGB e HSL e costruisci rampe che restano percettivamente regolari, perché luminosità e croma vengono tenuti mentre la tonalità ruota. I colori fuori dall'sRGB sono mappati riducendo il croma, non clippando i canali: la differenza è se il tuo viola resta viola.
Perché la luminosità in OKLCH significa qualcosa
In HSL, cambiare la tonalità a luminosità fissa cambia quanto il colore appare chiaro: il giallo al 50% si legge 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 ciò che l'occhio riferisce. Tieni L e C, ruota H, e ogni campione porta 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 è ricacciare 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 luminosità e tonalità lascia il colore riconoscibilmente sé stesso 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 la build spedisce e il valore che puoi incollare ovunque altro. Ogni browser oggi in uso capisce la sintassi OKLCH; se ne supporti ancora uno che non la capisce, il commento è il tuo ripiego.
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.
Che cos'è qui una 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 punta all'sRGB, ed è questo che significano gli avvisi di gamut. Gamut più ampi richiedono i propri primari e un secondo insieme di matrici.
Qualcosa di tutto questo viene mandato da qualche parte?
No. Le conversioni girano in questa pagina.
Realizzato dal team GO AI. Calcolatore CSS clamp() · Tutti gli strumenti gratuiti