OKLCH spiegato: il formato colore che finalmente rispecchia la vista

Cos’è OKLCH

OKLCH è la forma polare di Oklab, uno spazio colore percettivo pubblicato da Björn Ottosson nel 2020. Si scrive con tre numeri. L è la luminosità percepita, da 0 (nero) a 1 o 100% (bianco). C è il croma, cioè la quantità di colore, da 0 (grigio) a circa 0,37 per i colori più vivaci che uno schermo può mostrare. H è l’angolo della tonalità, da 0 a 360 gradi.

Ecco lo stesso colore scritto in formati diversi. Ogni valore qui sotto è calcolato in tempo reale da PickShade, quindi puoi copiarlo così com’è.

Perché OKLCH è meglio di HSL

La luminosità di HSL è una formula, non una percezione. hsl(60 100% 50%) è un giallo brillante e hsl(240 100% 50%) è un blu scuro, eppure entrambi dichiarano il 50% di luminosità. Se costruisci una palette su HSL, ogni tonalità va corretta a mano.

In OKLCH i colori con la stessa L appaiono ugualmente chiari. Puoi fissare L e C e ruotare H per ottenere tonalità bilanciate, oppure fissare H e C e far variare L a passi per ottenere una scala di sfumature pulita. Per questo Tailwind CSS v4 definisce tutta la sua palette predefinita in OKLCH.

La luminosità permette anche di prevedere il contrasto. Un testo con una differenza di L di circa 0,4 o più rispetto allo sfondo di solito è leggibile, e questo rende molto più semplice scegliere colori accessibili.

Sintassi in CSS

La luminosità si scrive come percentuale o come numero da 0 a 1. Il croma è un numero. La tonalità è un angolo in gradi. La trasparenza va dopo una barra.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Supporto dei browser

oklch() funziona in tutti i browser attuali: Safari dalla versione 15.4, Chrome ed Edge dalla 111, Firefox dalla 113. Si tratta di ben oltre il 90% degli utenti. Per i browser molto vecchi, metti un fallback HEX nella riga prima del valore OKLCH.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Limiti del croma e gamut

OKLCH può descrivere colori che nessuno schermo è in grado di mostrare. Il croma massimo dipende da luminosità e tonalità: un giallo vivace è possibile solo con luminosità alta, un blu vivace solo con luminosità bassa. Quando un valore è fuori dal gamut sRGB o Display P3, il browser lo riporta dentro, e il colore può spostarsi.

PickShade segnala i colori fuori da sRGB e ti dà il colore più vicino che rientra, trovato riducendo il croma e mantenendo luminosità e tonalità: lo stesso metodo raccomandato da CSS Color 4.

Come convertire HEX in OKLCH

La conversione passa da HEX a sRGB, da sRGB a luce lineare, da sRGB lineare allo spazio dei coni LMS, poi una radice cubica, una matrice verso Oklab e infine da Oklab a coordinate polari. A mano è facile sbagliare, quindi incolla un colore qualsiasi nel convertitore e copia il risultato.

Domande e risposte