Цвет OKLCH в современном CSS: почему он побеждает и как его внедрить

OKLCH стал первым цветовым пространством в CSS, о котором дизайнеры действительно могут рассуждать. Команды, которые до сих пор строят палитры в hex, тихо проигрывают все споры о контрасте и тёмной теме, о существовании которых даже не подозревают.

Hex никогда не был цветовым пространством, это была сериализация

Hex это сокращённая запись sRGB. #4A90E2 не описывает цвет, это тройка значений красного, зелёного и синего каналов, упакованная в шесть символов. sRGB проектировали для ЭЛТ-мониторов в начале 1990-х, а не под человеческое зрительное восприятие.

В итоге два hex-значения могут стоять в палитре на одной и той же числовой позиции «яркости» и при этом выглядеть совершенно по-разному. Blue-500 в большинстве дизайн-систем выглядит темнее, чем yellow-500, хотя оба занимают одинаковое место в шкале. Это не вопрос вкуса. Это математическая проблема, заложенная в саму систему координат.

"Hex никогда не был цветовым пространством, это была сериализация, и с тех пор мы спорим о светлоте."

HSL притворился, что всё исправил, но нет

Пришёл HSL и дал дизайнерам язык: тон, насыщенность, светлота. Это казалось системой. Системой оно не было. Канал светлоты в HSL под капотом по-прежнему опирается на значения sRGB, а значит, HSL унаследовал те же перцептивные проблемы, что и hex.

hsl(220, 70%, 50%) и hsl(45, 70%, 50%) номинально имеют одинаковую светлоту. Откройте их рядом. Жёлтый читается заметно светлее. HSL дал вам лучшие слова для той же сломанной математики.

OKLCH перцептивно равномерен

OKLCH построен на цветовом пространстве OKLab, которое Бьёрн Оттоссон разработал в 2020 году именно для того, чтобы устранить перцептивную неравномерность прежних пространств. Буква L в OKLCH означает воспринимаемую светлоту, откалиброванную под то, как зрительная система человека на самом деле реагирует на свет.

Равные значения L в OKLCH означают равную воспринимаемую яркость. Не примерно равную. Не «обычно равную, если хрома похожа». Равную. Этого свойства не мог дать ни один прежний цветовой пространство CSS, и оно меняет всё в том, как вы рассуждаете о генерации палитры.

Три причины, по которым OKLCH побеждает

Перцептивно равномерная светлота, предсказуемая интерполяция тона и поддержка широкого гамута. Каждая из них исправляет конкретный баг в вашей текущей палитре, а вместе они складываются в цветовой процесс, который масштабируется на темы, компоненты и типы дисплеев.

Причина первая: дрейф светлоты мёртв

В системах на hex и HSL дрейф светлоты это невидимый налог на каждую палитру. Вы подбираете blue-50 и amber-50 на глаз, на разных экранах они расходятся, в тёмной теме они конфликтуют, а математика контраста никогда не сходится до конца.

В OKLCH blue-50 и amber-50 имеют одно и то же число светлоты, и это число означает одну и ту же воспринимаемую яркость. Tailwind v4 перевёл всю свою палитру на OKLCH именно поэтому. Если вы используете цветовые шкалы Radix UI, вы уже пользуетесь перцептивной равномерностью, даже если ни разу не видели слово OKLCH в документации.

Причина вторая: интерполяция тона адекватна

Градиенты в CSS с интерполяцией в sRGB идут через цветовой куб RGB, а не через перцептивное пространство. Градиент от синего к жёлтому в sRGB проходит через грязную серую середину, потому что диагональ RGB пересекает область рядом с ахроматической осью. Это не художественный приём. Это геометрическая случайность.

Интерполяция градиента в OKLCH ведёт угол тона по перцептивному кольцу. Синий к жёлтому в OKLCH идёт через голубой и зелёный, как и ожидает глаз. Серая муть исчезает. Это важно для UI-градиентов, анимированных цветовых переходов и любого инструмента генерации палитры, который строит промежуточные шаги.

Причина третья: P3 и Rec2020 становятся достижимыми

Hex не может описать цвета за пределами sRGB. Каждый iPhone с 2016 года, каждый современный ноутбук с широкогамутной матрицей и большинство новых потребительских мониторов способны показывать цвета, которые существуют в гамуте P3, но не имеют hex-адреса. Вы оставляли на столе насыщенный, яркий цвет, потому что ваша система координат не могла его назвать.

OKLCH описывает цвета P3 и Rec2020 нативно. oklch(0.60 0.28 260) это яркий синий, который существует в P3, но выходит за гамут sRGB. Современные браузеры знают, что с ним делать, а рекомендации Apple по цвету Display P3 указывают в эту сторону уже годы. Дизайн-система, которая переходит на OKLCH сейчас, будет готова и тогда, когда P3 станет ожиданием по умолчанию.

Четыре шага миграции с hex на OKLCH

Аудит, конвертация, регенерация, повторный аудит. Миграция механическая для примитивных токенов и требует суждения для семантических токенов. Полная миграция дизайн-системы среднего размера занимает дни, а не недели. Больше всего времени экономит закрепление новых токенов в чистой архитектуре переменных Figma до начала работы.

Шаг первый: аудит существующей палитры

Экспортируйте каждый цветовой токен вашей системы. Переведите каждое hex-значение в OKLCH с помощью инструмента вроде oklch.com или плагина PostCSS OKLCH. Отсортируйте по значению L и посмотрите на столбец светлоты по всем тонам.

Баги проявляются сразу. Blue-300 окажется на L=0.72, а yellow-300 на L=0.87. Токены, которые должны были иметь эквивалентный визуальный вес, далеки друг от друга. Этот аудит служит доказательством, благодаря которому решение о миграции легко обосновать любому скептику.

Шаг второй: конвертируйте примитивы в OKLCH

Возьмите примитивную шкалу, то есть сырую нумерованную линейку, а не семантические токены, и переведите её в OKLCH. Округлите значения светлоты до единых шагов для всех одиннадцати ступеней: 0.97, 0.93, 0.86, 0.75, 0.65, 0.54, 0.45, 0.37, 0.27, 0.19, 0.13.

Не пытайтесь сохранить исходные hex-значения в точности. Смысл в том, чтобы исправить несогласованность. Сконвертированные blue-500 и red-500 не будут пиксель в пиксель совпадать со старыми значениями, и в этом вся цель. Система становится лучше, а не просто другой.

Шаг третий: перегенерируйте шкалы

Когда шаги светлоты чистые и единые, перегенерация шкал по тонам превращается в операцию с таблицей. Задайте столбец L, выберите хрому для каждого тона (синие обычно выдерживают больше хромы, чем коричневые и жёлтые, прежде чем упрутся в границу гамута), подправьте столбец H и сгенерируйте.

В результате blue-500 и red-500 впервые в вашей системе ощущаются как одинаковый визуальный вес. Решения по палитре фирменных цветов, которые раньше были произвольными оценками, становятся осмысленным выбором с конкретной координатой.

Шаг четвёртый: повторный аудит доступности

Новая палитра, новая проверка контраста. OKLCH упрощает прогноз контраста, потому что светлота теперь значит то, что говорит. Пара токенов с известными значениями L даёт сильное предположение об их коэффициенте контраста ещё до открытия чекера.

Прогоните проверки контраста WCAG и APCA по всем парам семантических токенов. Отметьте пары, которые больше не проходят требования, и поправьте хрому или светлоту у провалившегося токена. Полноценная проверка доступного цветового контраста на палитре OKLCH обычно выявляет меньше сюрпризов, чем такая же проверка на hex-палитре: шаги светлоты раньше были неверными, а теперь нет.

---

Нужна цветовая система, которая выдерживает режимы, тона и современные дисплеи без дрейфа светлоты? Brainy проектирует палитры на нативном OKLCH, которые поставляются как переменные Figma, CSS custom properties и токены Tailwind с уже пройденной проверкой контраста.

---

Четыре ловушки OKLCH

Обрезка при выходе за гамут, клиппинг хромы, обработка альфы и пробелы в инструментах. Каждая из них кусает команды, только начавшие работать с OKLCH, и у каждой есть конкретное решение, которое занимает минуты, если знать, что искать.

Больнее всего бьёт проблема гамута. Когда вы пишете oklch(0.60 0.32 260), это значение хромы лежит за пределами sRGB. Десктопные браузеры справляются, обрезая до ближайшего цвета sRGB, что может сдвинуть видимый тон. Решение: либо оставаться в безопасной для sRGB хроме для базовых токенов, либо закрывать широкогамутные значения медиа-запросом и держать выше запасное объявление.

Рабочая палитра OKLCH

Практичная 11-ступенчатая шкала с едиными шагами светлоты, в качестве эталона синий с тоном 260. Шаги светлоты одинаковы для каждого тона вашей системы. Для каждого цветового семейства меняются только хрома и тон.

:root { --blue-50: oklch(0.97 0.02 260); --blue-100: oklch(0.93 0.05 260); --blue-200: oklch(0.86 0.09 260); --blue-300: oklch(0.75 0.14 260); --blue-400: oklch(0.65 0.18 260); --blue-500: oklch(0.54 0.22 260); --blue-600: oklch(0.45 0.20 260); --blue-700: oklch(0.37 0.17 260); --blue-800: oklch(0.27 0.13 260); --blue-900: oklch(0.19 0.09 260); --blue-950: oklch(0.13 0.06 260); }

Чтобы получить красный (тон 25), янтарный (тон 75) или зелёный (тон 145), оставьте столбец L одинаковым на всех одиннадцати ступенях. Подберите C исходя из естественной ёмкости хромы тона: жёлтые и зелёные выдерживают меньше хромы, чем синие, прежде чем выйдут за sRGB. Подставьте H под нужный тон. Вот и вся система палитры.

Цветовая система тёмной темы, построенная поверх этой шкалы, использует семантические токены, которые переключаются между примитивами по шагу L и тону, а не ручной подменой hex-значений по одному.

Поддержка браузеров и безопасное окно миграции

OKLCH поддерживается во всех крупных браузерах, выпущенных с 2023 года. Chrome 111, Safari 15.4, Firefox 113 и Edge 111 поддерживают OKLCH полностью. Глобальное покрытие выше 93% по состоянию на середину 2025 года. Окно миграции открыто.

Запасной вариант для браузера без поддержки OKLCH умещается в одну строку. Сначала объявите hex-запасной вариант, затем значение OKLCH. Браузеры, не понимающие OKLCH, проигнорируют его и возьмут hex. Те, что понимают, возьмут лучшее значение.

color: #4a7de8; /* sRGB fallback */ color: oklch(0.54 0.22 260); /* OKLCH for modern browsers */

Tailwind v4 генерирует свою палитру в OKLCH нативно. Linear, дизайн-токены Sail от Stripe и рекомендации Apple для разработчиков по цвету движутся к перцептивно равномерным системам. Индустрия определилась. Вопрос только в том, когда присоединится ваша команда.

FAQ

OKLCH сложно выучить?

Система координат отличается от hex или HSL, но не сложна. L это светлота от 0 до 1. C это хрома, грубо говоря, насыщенность. H это тон в градусах. Как только вы усвоите, что L означает воспринимаемую яркость, а C цветность, система станет интуитивной быстрее, чем когда-то HSL.

Можно ли использовать OKLCH в Figma уже сегодня?

По состоянию на 2025 год Figma не показывает OKLCH нативно в своей палитре. Практичный процесс: задать токены в OKLCH в файле токенов через Tokens Studio или в файле CSS-переменных, синхронизированном с переменными Figma, а затем сверить значения через экспорт кода Figma. Движок рендеринга Figma выполняет конвертацию внутри.

OKLCH ломает мои существующие hex-значения?

Нет. Вы можете вводить OKLCH постепенно, токен за токеном. Ваши текущие hex-значения продолжают работать как раньше. Миграция аддитивная, а не замена.

В чём разница между LCH и OKLCH?

LCH основан на цветовом пространстве CIELAB, которое перцептивно равномерно, но имеет проблемы с линейностью тона, особенно в сине-фиолетовом диапазоне. OKLCH основан на OKLab, который исправляет эти сдвиги тона. Для практической дизайнерской работы OKLCH лучше, потому что его интерполяция тона даёт меньше сюрпризов.

Как перевести hex в OKLCH?

Используйте oklch.com, плагин PostCSS oklch или песочницу спецификации CSS Color 4. Вставьте hex-значение, прочитайте координаты OKLCH, округлите L и C до двух знаков после запятой, а H до ближайшего целого градуса. Это и есть ваше рабочее значение токена.

Влияет ли OKLCH на требования доступности?

Требования WCAG к контрасту определены относительно относительной яркости sRGB, а не светлоты OKLCH. APCA ближе к перцептивным моделям и естественнее ложится на значения L в OKLCH. На практике OKLCH делает прогноз контраста интуитивнее, потому что L отслеживает воспринимаемую яркость, но пары семантических токенов всё равно нужно прогонять через чекер контраста. Процесс тот же, просто заранее о нём проще рассуждать.

Сдвиг, который на самом деле открывает OKLCH

OKLCH это не тренд. Это первый случай, когда CSS получил цветовое пространство, спроектированное вокруг того, как человеческий глаз воспринимает цвет, и инструменты подтянулись настолько, что миграция практична уже сегодня для любой команды, готовой потратить на неё несколько сосредоточенных дней.

Команды, которые переходят сейчас, получают сразу три вещи: палитру, которая держится в тёмной теме без ручных переопределений, поведение контраста, соответствующее системе координат, и основу, которая без переписывания расширяется до P3. Команды, которые ждут, продолжат спорить о том, почему blue-300 выглядит тяжелее, чем orange-300, и ответ останется прежним. Система координат никогда не создавалась для такой работы.

Если вы хотите построить полную архитектуру токенов поверх этой палитры, статья об архитектуре переменных Figma разбирает семантический слой. О применении этой работы к тёмной теме читайте в цветовых системах тёмной темы: та статья продолжает с того места, где заканчивается эта.

Хотите, чтобы это сделали за вас? Наймите Brainy.