27.08.2025 07:45
PatientZero 0 428 Источник

OKLCH — это довольно новая цветовая модель, разработанная для обеспечения визуальной однородности. Это означает, что цвета гораздо точнее с точки зрения восприятия человеком, что упрощает работу с ними.

Цветовые модели

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

Цветовые модели — это системы описания цвета, например RGB, HSL, LCH, OKLCH и другие. Модель определяет, насколько просто манипулировать цветами и представлять их.

Спектр

Спектр (gamut) — это поле, в котором живёт модель, определяющее набор допустимых цветов. Популярные спектры — это sRGB (стандарт веба) и Display-P3 (используется в современных устройствах).

Диаграмма хроматичности CIE 1931 xy

У цветовых пространств гораздо больше нюансов, они определяют не просто спектр, но и такие параметры, как точку белого и передаточную функцию. Чтобы не усложнять статью, я решил их здесь не рассматривать.

Структура

OKLCH и LCH состоят из трёх значений: Lightness, Chroma и Hue. Разница между ними в том, какое цветовое пространство ими используется: в случае OKLCH это OKLab.

Lightness (светлость) — равные шаги воспринимаются, как равные изменения яркости. Значение измеряется в интервале от 0 до 1 или в процентах (от 0% до 100%).

Chroma (хроматический тон) — управляет интенсивностью цвета, аналогично saturation (насыщенности).

Hue (тон) — управляет тоном, измеряемым в градусах в интервале от 0 до 360.

Согласованность яркости

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

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

То же самое можно сделать с цветовыми моделями наподобие HSL, но, как видно на изображении, цвета не выглядят однородными. Некоторые из них темнее, другие светлее, какие-то выделяются сильнее, какие-то меньше.

И это одно из главных преимуществ OKLCH перед другими цветовыми моделями. В нём очень легко создавать перцептивно однородные палитры и работать с ними.

Предсказуемые оттенки

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

В примере выше видно, что цвета OKLCH сохраняют согласованную синеву для всех оттенков, а в примере с HSL светлые оттенки дрейфуют к фиолетовому, а тёмные размываются к сероватому.

Градиенты

Устройство градиентов в OKLCH довольно сильно отличается от sRGB. В sRGB градиенты вычисляются в значениях красного, зелёного и синего, что часто приводит к грязным средним точкам и неравномерной яркости.

КАРТИНКА

В вычислениях OKLCH используются lightness, chroma и hue. В примере выше можно увидеть, что начальные и конечные точки одинаковы, но цвета, через которые проходит градиент, достаточно сильно различаются.

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

Чтобы избежать этого, многие инструменты используют OKLAB для градиентов, которые интерполируются по прямой, обеспечивая более согласованные результаты.

Поддержка цветовых пространств

sRGB не может достигать многих цветов, которые способны отображать современные экраны. В OKLCH можно записывать цвета, отображаемые только на экранах с поддержкой цветов Display-P3.

Если вы пользуетесь дисплеем, поддерживающим Display-P3, то для вас цвета справа будут более яркими, чем слева. Если ваш дисплей поддерживает только sRGB, цвета должны практически идентичными, потому что браузер преобразует их обратно внутрь спектра sRGB.

Помните, что оттенки серого в sRGB и Display-P3 одинаковы, поэтому в них разницы не будет.

Максимум Chroma

Также OKLCH может определять больше цветов, чем способен отображать любой реальный экран. В нём можно задавать значения, не помещающиеся в спектры наподобие sRGB и Display-P3.

Возьмём для примера следующий цвет color: oklch(0.7 0.4 40). Он имеет очень высокое значение chroma, и хотя математически он существовать может, на практике он находится за пределами спектра всех реальных дисплеев. Когда этот цвет используется, он усекается и преобразуется в ближайший представимый цвет внутри спектра.

@layer base {
  :root {
    color: oklch(0.7 0.4 40);
  }
}

Обычно мы хотим избегать этого, потому что преобразованный цвет часто может сильно отличаться от заданного; поэтому существует концепция максимального значения chroma, вычисляющая максимум chroma, который способен отображать дисплей, исходя из его lightness, hue и выбранного спектра, например sRGB или Display-P3.

Поддержка браузерами и резервные варианты

Цвета OKLCH были введены в CSS Color Module Level 4, и теперь они имеют хорошую поддержку во всех современных браузерах.

Однако всё ещё существуют поверхности без поддержки цветов OKLCH, например устаревшие браузеры. Если вам это важно, можете добавить резервный вариант (fallback) и использовать директиву @supports CSS.

@layer base {
  :root {
    /* sRGB hex */
    --color-gray-100: #fcfcfc;
    --color-gray-200: #fafafa;
    --color-gray-300: #f4f4f4;
 
    @supports (color: oklch(0 0 0)) {
      /* OKLCH */
      --color-gray-100: oklch(0.991 0 0);
      --color-gray-200: oklch(0.982 0 0);
      --color-gray-300: oklch(0.955 0 0);
    }
  }
}

Благодаря этому браузер будет использовать цвета OKLCH, если они поддерживаются, а в противном случае — откатываться к sRGB.

oklch.fyi

Я написал небольшой инструмент oklch.fyi для работы с цветами OKLCH. Он помогает генерировать цветовые палитры OKLCH, преобразовывать переменные CSS в OKLCH и так далее.

Комментарии (0)