OKLCH простими словами: формат кольору, який нарешті збігається з тим, що бачить око

Що таке OKLCH

OKLCH це полярна форма Oklab, перцептивного колірного простору, який Бйорн Оттоссон опублікував у 2020 році. У нього три числа. L це сприйнята світлота від 0 (чорний) до 1 або 100% (білий). C це хрома (chroma), кількість кольору, від 0 (сірий) приблизно до 0,37 для найяскравіших кольорів, які може показати екран. H це кут тону від 0 до 360 градусів.

Той самий колір у різних форматах виглядає так. PickShade рахує кожне значення нижче наживо, тож їх можна копіювати як є.

Чим OKLCH кращий за HSL

Світлота в HSL це формула, а не сприйняття. hsl(60 100% 50%) це яскраво-жовтий, а hsl(240 100% 50%) темно-синій, хоча обидва мають світлоту 50%. Якщо будувати палітру на HSL, кожен тон доведеться коригувати вручну.

В OKLCH кольори з однаковим L виглядають однаково світлими. Можна зафіксувати L і C та обертати H, щоб отримати набір тонів, які виглядають збалансовано, або зафіксувати H і C та змінювати L крок за кроком, щоб отримати чисту шкалу відтінків. Саме тому Tailwind CSS v4 задає всю стандартну палітру в OKLCH.

Світлота також підказує контраст. Текст, чиє L відрізняється від фону приблизно на 0,4 або більше, зазвичай добре читається, тож доступні кольори підбирати набагато простіше.

Синтаксис у CSS

Світлоту можна записати у відсотках або числом від 0 до 1. Хрома це число. Тон це кут у градусах. Прозорість пишеться після скісної риски.

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

Підтримка браузерами

oklch() працює в усіх актуальних браузерах: Safari з версії 15.4, Chrome і Edge з 111, Firefox з 113. Це значно більше ніж 90% користувачів. Для дуже старих браузерів додайте запасний варіант у HEX рядком вище за значення OKLCH.

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

Межі хроми та охоплення

OKLCH може описати кольори, яких не покаже жоден екран. Максимальна хрома залежить від світлоти й тону: яскравий жовтий можливий лише за високої світлоти, яскравий синій лише за низької. Коли значення виходить за межі охоплення sRGB або Display P3, браузер повертає його в межі, і колір може зміститися.

PickShade позначає кольори поза sRGB і пропонує найближчий колір, що вміщається. Його знаходять, знижуючи хрому і зберігаючи світлоту й тон, саме так, як радить CSS Color 4.

Як перетворити HEX в OKLCH

Перетворення проходить так: HEX у sRGB, sRGB у лінійне світло, лінійний sRGB у колбочковий простір LMS, кубічний корінь, матриця в Oklab і нарешті Oklab у полярні координати. Вручну тут легко помилитися, тому вставте будь-який колір у конвертер і скопіюйте результат.

Запитання і відповіді