OKLCH: format koloru, który wreszcie zgadza się z tym, co widzi oko

Czym jest OKLCH

OKLCH to biegunowa postać Oklab, percepcyjnej przestrzeni barw opublikowanej przez Björna Ottossona w 2020 roku. Składa się z trzech liczb. L to postrzegana jasność od 0 (czerń) do 1, czyli 100% (biel). C to chroma, czyli ilość koloru: od 0 (szarość) do około 0,37 dla najbardziej żywych kolorów, jakie potrafią pokazać ekrany. H to kąt barwy od 0 do 360 stopni.

Tak wygląda ten sam kolor zapisany w różnych formatach. PickShade liczy każdą wartość na bieżąco, więc możesz je kopiować bez zmian.

Dlaczego OKLCH jest lepszy od HSL

Jasność w HSL to wzór, a nie wrażenie wzrokowe. hsl(60 100% 50%) to jaskrawy żółty, a hsl(240 100% 50%) to ciemny niebieski, a mimo to oba mają rzekomo 50% jasności. Paleta zbudowana na HSL wymaga ręcznej korekty każdej barwy.

W OKLCH kolory o tym samym L wyglądają na równie jasne. Możesz zachować L i C i obracać H, aby dostać zestaw zrównoważonych barw, albo zachować H i C i zmieniać L krokami, aby dostać czystą skalę odcieni. Dlatego Tailwind CSS v4 definiuje całą domyślną paletę w OKLCH.

Jasność pozwala też przewidzieć kontrast. Tekst, którego L różni się od tła mniej więcej o 0,4 lub więcej, zwykle jest czytelny, więc o wiele łatwiej świadomie dobierać dostępne kolory.

Składnia w CSS

Jasność zapisujesz jako procent albo liczbę od 0 do 1. Chroma to liczba. Barwa to kąt w stopniach. Przezroczystość podajesz po ukośniku.

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

Obsługa w przeglądarkach

oklch() działa w każdej aktualnej przeglądarce: w Safari od wersji 15.4, w Chrome i Edge od 111, w Firefoksie od 113. To zdecydowanie ponad 90% użytkowników. Z myślą o bardzo starych przeglądarkach dodaj zapasową wartość HEX w linii przed OKLCH.

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

Limity chromy i gamut

OKLCH potrafi opisać kolory, których nie pokaże żaden ekran. Maksymalna chroma zależy od jasności i barwy: żywy żółty jest możliwy tylko przy wysokiej jasności, a żywy niebieski tylko przy niskiej. Gdy wartość wychodzi poza gamut sRGB lub Display P3, przeglądarka sprowadza ją z powrotem, co może przesunąć kolor.

PickShade oznacza kolory spoza sRGB i podaje najbliższy kolor, który się mieści. Znajduje go, obniżając chromę przy zachowaniu jasności i barwy, czyli metodą zalecaną przez CSS Color 4.

Jak przekonwertować HEX na OKLCH

Konwersja przebiega tak: HEX na sRGB, sRGB na światło liniowe, liniowe sRGB na przestrzeń czopków LMS, pierwiastek sześcienny, macierz do Oklab i na koniec Oklab na współrzędne biegunowe. Ręcznie łatwo o błąd, więc wklej dowolny kolor do konwertera i skopiuj wynik.

Pytania i odpowiedzi