Цветовые пространства OKLCH и OKLAB в CSS: почему HEX больше не нужен

На протяжении десятилетий веб-разработчики полагались на HEX-коды и формат RGB для определения цветов. Позже появился HSL, который сделал работу с цветом чуть более человекопонятной. Однако современные требования к дизайну, появление экранов с расширенным цветовым охватом (P3) и необходимость создания доступных интерфейсов вывели на сцену новых игроков: OKLAB и OKLCH. В этой статье мы разберем, почему эти форматы совершают революцию в CSS и почему вам стоит забыть про HEX.

Проблема традиционных цветовых моделей

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

Обманчивая яркость: В модели HSL желтый цвет с яркостью 50% кажется нам гораздо светлее, чем синий с той же яркостью 50%. Это создает огромные сложности при программном создании цветовых схем или расчете контрастности.
Ограниченность гаммы: HEX и RGB ограничены пространством sRGB. Современные мониторы (например, в MacBook или флагманских смартфонах) поддерживают пространство Display P3, которое отображает на 25% больше цветов. Старые форматы просто не способны дотянуться до этих ярких и насыщенных оттенков.

Что такое OKLAB и OKLCH?

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

Синтаксис oklch(L C H) расшифровывается следующим образом:

L (Lightness): Воспринимаемая яркость. Измеряется в процентах (0% — черный, 100% — белый). В отличие от HSL, 50% яркости в OKLCH всегда будет выглядеть одинаково для любого оттенка.
C (Chroma): Насыщенность или интенсивность цвета. Значение 0 соответствует серому цвету, а теоретического верхнего предела нет (хотя на практике он ограничен возможностями монитора, обычно до 0.4 или 0.5).
H (Hue): Оттенок. Число от 0 до 360, где 0 — розовый/красный, 120 — зеленый, 240 — синий.

Почему OKLCH — это будущее CSS

1. Предсказуемость и доступность. Поскольку яркость (L) в OKLCH соответствует реальному человеческому восприятию, вы можете изменять оттенок (H), сохраняя при этом тот же уровень контрастности. Это делает создание темных и светлых тем, а также проверку доступности текста (WCAG) невероятно простым процессом.

2. Доступ к цветам P3. С помощью OKLCH вы можете использовать сверхнасыщенные цвета, которые раньше были недоступны в вебе. Если монитор пользователя поддерживает широкий цветовой охват, он увидит более сочные оттенки; если нет — браузер автоматически подберет ближайший подходящий аналог в sRGB.

3. Идеальные градиенты. Традиционные градиенты в RGB часто проходят через так называемую серую зону — грязные, ненасыщенные промежуточные оттенки. Градиенты в пространстве OKLCH выглядят чистыми и естественными, так как переход происходит по правилам восприятия цвета глазом.

Практическое применение

Использование OKLCH в CSS уже поддерживается всеми современными браузерами (Chrome 111+, Firefox 113+, Safari 15.4+). Вместо того чтобы гадать с HEX-кодами, вы можете объявлять переменные для дизайн-системы более логично.

Например, создание активного состояния кнопки становится тривиальным: вам не нужно подбирать новый HEX-код, достаточно взять базовый цвет и немного увеличить или уменьшить параметр L (яркость). Это позволяет строить целые цветовые палитры на основе одного базового оттенка, просто меняя значения насыщенности и яркости в CSS-переменных.

Заключение

Переход на OKLCH — это не просто смена синтаксиса. Это переход к более осознанному и научному подходу в дизайне интерфейсов. HEX-коды остаются в прошлом как рудимент эпохи, когда мониторы были слабыми, а цветопередача — примитивной. Сегодня, когда во главе угла стоят доступность и визуальное качество, OKLCH становится незаменимым инструментом профессионального фронтенд-разработчика.

Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь!