OKLCH explicat: formatul de culoare care se potrivește, în sfârșit, cu ochiul

Ce este OKLCH

OKLCH este forma polară a lui Oklab, un spațiu de culoare perceptual publicat de Björn Ottosson în 2020. Are trei numere. L este luminozitatea percepută, de la 0 (negru) la 1 sau 100% (alb). C este croma, adică cantitatea de culoare, de la 0 (gri) până la aproximativ 0,37 pentru cele mai vii culori pe care le pot afișa ecranele. H este unghiul nuanței, de la 0 la 360 de grade.

Aceeași culoare scrisă în formate diferite arată așa. Fiecare valoare de mai jos este calculată pe loc de PickShade, deci o poți copia exact cum este.

De ce OKLCH este mai bun decât HSL

Luminozitatea din HSL este o formulă, nu o percepție. hsl(60 100% 50%) este un galben strălucitor, iar hsl(240 100% 50%) un albastru închis, deși ambele au, pe hârtie, luminozitatea de 50%. Dacă construiești o paletă pe HSL, fiecare nuanță trebuie corectată manual.

În OKLCH, culorile cu același L arată la fel de deschise. Poți păstra L și C și roti H ca să obții un set de nuanțe echilibrate, sau poți păstra H și C și modifica L în pași ca să obții o scară de tonuri curată. De aceea Tailwind CSS v4 își definește întreaga paletă implicită în OKLCH.

Luminozitatea prezice și contrastul. Un text cu o diferență de L de circa 0,4 sau mai mult față de fundal este de obicei lizibil, așa că alegerea culorilor accesibile devine mult mai ușor de judecat.

Sintaxa în CSS

Luminozitatea se scrie ca procent sau ca număr de la 0 la 1. Croma este un număr. Nuanța este un unghi în grade. Transparența vine după o bară oblică.

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);

Suport în browsere

oklch() funcționează în toate browserele actuale: Safari de la 15.4, Chrome și Edge de la 111, Firefox de la 113. Asta înseamnă mult peste 90% dintre utilizatori. Pentru browserele foarte vechi, pune o valoare HEX de rezervă pe rândul dinaintea valorii OKLCH.

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

Limitele cromei și gamutul

OKLCH poate descrie culori pe care niciun ecran nu le poate afișa. Croma maximă depinde de luminozitate și de nuanță: un galben viu este posibil doar la luminozitate mare, un albastru viu doar la luminozitate mică. Când o valoare iese din gamutul sRGB sau Display P3, browserul o aduce înapoi, iar culoarea se poate schimba.

PickShade marchează culorile din afara sRGB și îți dă cea mai apropiată culoare care încape, găsită prin scăderea cromei cu păstrarea luminozității și a nuanței, aceeași metodă pe care o recomandă CSS Color 4.

Cum convertești HEX în OKLCH

Conversia trece prin mai mulți pași: din HEX în sRGB, din sRGB în lumină liniară, din sRGB liniar în spațiul conurilor LMS, o rădăcină cubică, o matrice spre Oklab și, la final, din Oklab în coordonate polare. De mână e ușor să greșești, așa că lipește orice culoare în convertor și copiază rezultatul.

Întrebări și răspunsuri