От CIE XYZ до OKLCH: как менялось описание цвета

HEX, RGB, HSL и OKLCH не конкурируют за звание единственно правильного способа описать цвет. Они появились для разных задач: RGB управляет вкладом каналов дисплея, HSL облегчает ручной выбор внутри RGB-охвата, а перцептивные модели пытаются связать численные изменения с тем, что замечает наблюдатель. Путаница начинается, когда удобную координату принимают за физическое измерение или обещание одинакового визуального результата.

CIE XYZ создал общую измерительную основу

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

В 1931 году Международная комиссия по освещению закрепила результаты в виде стандартного наблюдателя и системы CIE XYZ. Современный стандарт CIE для колориметрических наблюдателей по-прежнему включает функции цветового соответствия наблюдателя 1931 года для небольшого поля зрения. Координаты X, Y и Z позволяют описывать измеренный стимул независимо от конкретного монитора, причём компонент Y связан с фотометрической яркостью.

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

CIELAB приблизил расстояние к видимой разнице

К 1970-м годам существовало несколько попыток построить равномерные цветовые пространства и несколько способов считать различие цветов. В 1976 году CIE предложила CIELAB, чтобы унифицировать эту практику. Как поясняет действующий стандарт CIE 1976 Lab*, простое евклидово расстояние в новых координатах должно было приблизительно описывать величину воспринимаемой разницы.

CIELAB использует светлоту L* и две оппонентные оси: a* проходит от зелёного к красному, b* от синего к жёлтому. Нелинейное преобразование XYZ делает шаги заметно более осмысленными для зрения, чем расстояния между исходными RGB-компонентами. Именно поэтому Lab стал важным промежуточным пространством в измерениях и управлении цветом.

LCH не заменяет Lab другой теорией восприятия, а записывает те же точки в цилиндрических координатах. Вместо a* и b* используются расстояние от нейтральной оси, называемое Chroma, и угол Hue. Такая форма удобна, когда нужно осветлить цвет, уменьшить его цветность или повернуть оттенок, не редактируя две оппонентные координаты по отдельности.

Однако слово «равномерный» всегда означало приближение. В CIELAB обнаружились области с неодинаковой чувствительностью, а изменение цвета возле насыщенного синего способно давать нежелательный уход в фиолетовый. Для более точной оценки различий появились формулы CIE94 и CIEDE2000, но они усложняли расчёт и не превращали интерполяцию в Lab в идеальное решение для графики.

Почему HSL удобен, хотя его Lightness не перцептивен

Параллельно развивалась компьютерная графика, где задача была другой. Художнику или оператору видеосистемы неудобно подбирать цвет непосредственным изменением трёх каналов RGB, поэтому в 1970-х появились преобразования, организующие RGB-куб вокруг знакомых понятий Hue, Saturation и Value либо Lightness. В статье 1978 года Color Gamut Transform Pairs такие модели описывались именно как альтернативные представления охвата RGB-монитора, пригодные для программ рисования.

Это объясняет и пользу HSL, и его ограничение. Оттенок можно вращать по кругу, насыщенность уменьшать до серого, а Lightness использовать для получения светлых и тёмных вариантов без ручного смешения каналов. Но HSL Lightness вычисляется из крайних значений кодированных RGB-компонентов и не моделирует чувствительность зрения к разным участкам спектра. Поэтому чистые синий и жёлтый при L=50% имеют одинаковое число, хотя жёлтый выглядит намного светлее.

CSS Color 4 прямо называет HSL интуитивнее RGB и одновременно предупреждает, что его оттенки распределены неравномерно, а изменение Hue меняет воспринимаемую светлоту. Значит, HSL не «врёт»: он позволяет удобно управлять геометрией sRGB, но не подходит для построения визуально ровной шкалы одним только одинаковым шагом по координате.

Что изменили Oklab и OKLCH

В 2020 году Бьорн Оттоссон опубликовал Oklab как компактное перцептивное пространство для обработки изображений. Он искал модель, в которой светлота, цветность и оттенок меньше влияют друг на друга, переходы между цветами выглядят ровнее, а вычисления остаются простыми, устойчивыми и совместимыми с белой точкой D65, используемой sRGB и Display P3.

Преобразование начинается с линейных RGB-значений, переводит их матрицей в промежуточные LMS-подобные компоненты, применяет нелинейное сжатие и затем второй матрицей получает L, a и b. Параметры подбирались по данным, описывающим светлоту, цветность и оттенок, а структура оставалась близкой к более раннему пространству IPT. Сам автор отдельно отмечает, что часть эталонных данных для светлоты и цветности была получена из CAM16, а не непосредственно из психофизического эксперимента, поэтому результаты нельзя считать доказательством абсолютного совпадения с человеческим восприятием.

OKLCH относится к Oklab так же, как LCH к CIELAB: координаты a и b заменяются на Chroma и Hue, а Lightness сохраняется. Для дизайнера это даёт знакомую цилиндрическую модель, но изменение L обычно лучше сохраняет характер оттенка, а градиенты и палитры меньше проваливаются в неожиданные тёмные или серые участки. Особенно заметно улучшение постоянства оттенка возле синей области, которая проблемна для CIELAB.

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

Как OKLCH вошёл в CSS

CSS долго ограничивался в основном цветами sRGB, заданными через HEX, rgb() или hsl(). CSS Color Module Level 4 добавил функции lab(), lch(), oklab() и oklch(), а также пространства вроде Display P3 через color(). Спецификация позволяет выбирать цветовое пространство для интерполяции, поэтому автор может явно попросить градиент или смешение идти через Oklab либо OKLCH вместо прежнего sRGB.

На 25 августа 2026 года CSS Color 4 остаётся Candidate Recommendation Draft, однако нужные функции давно реализованы. Они стали совместимы между основными браузерными движками в 2023 году: поддержку получили Chromium 111, Firefox 113 и Safari 15.4, что зафиксировано в обзоре Baseline 2023. Для старых устройств всё ещё разумно оставлять запасную декларацию, поскольку браузер просто отбросит неизвестное ему значение.

Сам синтаксис не расширяет физический охват экрана. Цвет oklch() может находиться внутри sRGB, внутри более широкого Display P3 или за пределами обоих пространств. При выводе браузеру приходится привести его к возможностям устройства, поэтому шкалу следует проверять на выход из gamut, особенно при высокой Chroma.

Как пользоваться Color Toolbox

Color Toolbox принимает HEX, RGB и HSL, синхронно обновляет выбранный цвет и показывает его представление в OKLCH. Строка OKLCH предназначена для просмотра и копирования, а не для обратного ввода, поэтому инструмент удобен прежде всего как быстрый переводчик существующего sRGB-цвета в современный CSS-синтаксис.

Генератор гармоний строит аналоговую, комплементарную, триадную, тетрадную, монохромную палитры и шкалу оттенков. Важно учитывать, что эти варианты рассчитываются через HSL, а OKLCH здесь служит информационным представлением выбранного цвета. Поэтому гармония помогает быстро получить отправную точку, но сама по себе не обещает одинаковой визуальной светлоты всех образцов.

В инструмент также входят более 160 готовых палитр брендов и дизайн-систем, личная палитра с редактируемыми названиями и сохранением в localStorage, а также извлечение от 2 до 12 доминирующих цветов из изображения. Изображение уменьшается и обрабатывается в браузерном canvas алгоритмом квантования, похожим на median cut; файл никуда не загружается.

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

Для знакомства введите #FF6B35, сравните его HSL Lightness с полученной OKLCH Lightness, затем выберите комплементарную гармонию и проверьте пару цветов в анализаторе контраста. Так инструмент показывает три разные операции без их смешения: конвертацию координат, эвристический подбор гармонии и проверку читаемости.

Похожие инструменты

Color ToolboxКонвертируйте HEX, RGB и HSL, смотрите значение OKLCH, собирайте палитры, извлекайте цвета и проверяйте контраст WCAG.Генератор QR-кодовСоздавайте QR-коды с проверкой сканирования, градиентами, плавными модулями, регулируемыми отступами, прозрачным фоном, подписями и логотипом, который сохраняет свои цвета или наследует заливку QR. Экспортируйте в PNG или автономный SVG и декодируйте QR из изображений.Оптимизатор изображенийПакетно сжимайте до 10 PNG, JPEG или WebP, задавайте максимальные размеры или целевой вес, сравнивайте до и после, скачивайте по одному либо ZIP-архивом — полностью локально.Pixel PainterРисуйте по пикселям, редактируйте и клонируйте выделения, трансформируйте весь холст, управляйте палитрами и экспортируйте SVG или PNG.OG Image GeneratorПеретаскивайте, масштабируйте и вращайте элементы прямо на холсте, чтобы собрать карточку с несколькими языками (включая автоматический RTL) в одном макете, сохраняйте свои шаблоны локально и экспортируйте PNG.