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-значение.

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 в полярные координаты. Вручную легко ошибиться, поэтому просто вставьте цвет в конвертер и скопируйте результат.

Вопросы и ответы