Система координат для цвета: оси, диапазоны и правило, связывающее числа с измеримым светом. Зрение человека трихроматично: колбочки бывают трёх типов (S, M, L), поэтому для описания любого видимого цвета нужно не меньше трёх координат. Один и тот же оранжевый – это rgb(255 128 0), oklch(0.732 0.186 53) и XYZ [49, 36.7, 4.5]. Палитра – это набор выбранных цветов; пространство – способ записать вообще любой цвет.

Цветовая модель определяет, какими компонентами описывается цвет: тремя основными цветами в RGB, цветовым тоном, насыщенностью и светлотой в HSL, четырьмя красками в CMYK. Цветовое пространство уточняет основные цвета, точку белого и передаточную кривую, чтобы каждому набору значений соответствовал измеримый цвет. Поэтому rgb(255 0 0) обозначает разный красный в sRGB, Display P3 и Adobe RGB: одна модель, три пространства.

В обиходе оба понятия называют пространствами, в том числе в CSS с color-mix(in hsl, …) и в этом каталоге. Модель можно связать с уже определённым цветовым пространством: здесь HSL и HSV основаны на sRGB, как в CSS.

Зависит от задачи:

• хранение изображений и обмен ими – sRGB, стандарт веба по умолчанию;
• подбор палитр и градиентов – OKLCH с визуально равномерным шагом;
• вычисления со светом (смешивание, размытие, 3D) – линейный RGB;
• съёмка и цветокоррекция видео: логарифмическое пространство камеры, итоговое видео – в Rec. 709 или Rec. 2100;
• оценка цветового различия – CIELAB или DIN99o.

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

OKLCH. Те же три параметра – цветовой тон, хрома, светлота, – но светлоте можно доверять: в модели HSL жёлтый при L=50 излучает примерно в 13 раз больше света, чем синий при L=50, так что равные L не означают одинаковой яркости на глаз. В OKLCH – означают. CSS поддерживает oklch() без дополнительных преобразований.

Введите или вставьте значение в поле цвета наверху, например #ff8000. Все пространства на странице сразу покажут этот цвет; в OKLCH это 0.732, 0.186, 53, а в CSS он записывается как oklch(0.732 0.186 53). На вкладке css каждой карточки есть запись для копирования, а в коде это space.rgb.oklch(255, 128, 0).

При усреднении значений в sRGB с гамма-кодированием получается более тёмный и тусклый цвет, чем при смешении соответствующих световых потоков. Интерполяция в OKLab позволяет избежать этого потемнения; в CSS это linear-gradient(in oklab, red, blue). Строка интерполяция в каждой карточке показывает один переход в двух пространствах рядом: можно сравнить результат и выбрать подходящее пространство.

Откройте логарифмическое пространство своей камеры, например S-Log3, LogC4 или Apple Log. В его блоке LUT выберите Rec. 709 и свой редактор: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg и другие. Файл .cube создаст ваш браузер. Это техническое преобразование без тонального отображения: света выше диффузного белого обрезаются, а художественную цветокоррекцию вы делаете сами.

Это цвет, который одно пространство может описать, а другое – или ваш экран – не может показать. Яркого зелёного цвета Display P3 в sRGB нет: при преобразовании его координаты выходят за допустимый диапазон. Атлас этого не скрывает: значок ⚠ у текущего цвета означает, что цвет выходит за выбранный «Предел»; если навести указатель на плоскость или полосу с нажатой клавишей Alt, подсказка покажет, какой более широкий охват нужен цвету в этом месте (P3, Rec. 2020); участки вне диапазона полупрозрачно проступают поверх шахматного фона.

Экран излучает свет, а бумага отражает то, что не поглотили краски. Охват печати меньше: насыщенные синие, зелёные и красные цвета RGB в него не попадают, поэтому на оттиске они тусклее. При допечатной подготовке цвета преобразуют через ICC-профиль, составленный для печатной машины и бумаги, например FOGRA39 для европейской мелованной бумаги или GRACoL в США. CMYK в этом каталоге – простая формула, по которой CSS вычисляет device-cmyk() без профиля: числа она даёт верные, но цветопробой печати не является.

Для веб-сайтов и обмена файлами подходит sRGB: браузеры и телефоны подразумевают его, если в файле нет профиля. Display P3 передаёт больше цветов яркой сцены на экранах Apple и многих Android, если профиль встроен в файл. Отправляйте Adobe RGB, когда его просит фотолаборатория. ProPhoto RGB оставьте для 16-битной обработки: его охват так широк, что в 8-битных файлах появляются полосы на градиентах.

Преобразования вычисляются по аналитическим формулам, а не по табличным приближениям; при прямом и обратном пересчёте значения совпадают с точностью до погрешности вычислений с плавающей запятой. Исключений немного, и они отмечены в описаниях: у OSA-UCS нет аналитического обратного преобразования, а в системах-атласах вроде Munsell значения интерполируются между опубликованными образцами. Значения в rgb никогда не ограничиваются: цвет за пределами sRGB возвращается со значениями ниже 0 или выше 255, поэтому ограничивайте их только при выводе на экран.

Для каждого пространства указана статья или спецификация, по которой реализовано преобразование. Результаты сверяются с colorjs.io для пространств, поддерживаемых обеими библиотеками, а логарифмические кривые камер – с официальными преобразованиями ACES от Киноакадемии. В formula-verification.md перечислены проверки и их источники, в том числе обнаруженные ошибки в опубликованных статьях.

Если числа расходятся с результатами другой библиотеки, сравните диапазоны: здесь у каждого пространства сохранены привычные диапазоны – RGB 0–255, светлота Lab 0–100, цветовой тон 0–360, – тогда как многие библиотеки сводят всё к 0–1. Диапазоны указаны в каждой карточке; в коде это space.oklch.range.

CSS поддерживает rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), а также color() для Display P3, Adobe RGB, ProPhoto, линейного sRGB и XYZ (D65 и D50). В CSS rec2020 использует степенную функцию с гаммой 2.4, а не кривую BT.2020 пространства Rec. 2020 из этого каталога. Поэтому одинаковые числа обозначают разные цвета. На вкладке css каждой карточки можно скопировать запись текущего цвета. Преобразования для пространств, которых нет в CSS, можно экспортировать как ICC-профили или таблицы LUT.

Откройте Вид и в разделе Зрение выберите режим: слепота к красному (протанопия), слепота к зелёному (дейтеранопия) или слепота к синему (тританопия). Каталог перерисуется так, как его видит такой глаз, и можно проверить, остаются ли цвета палитры различимыми. Нарушение цветового зрения есть примерно у 1 из 12 мужчин, по данным NEI.

Это лицензируемые продукты: их цвета задаются данными, которые продают владельцы, а не опубликованными формулами, – так что открытых формул для реализации нет, а распространять их таблицы было бы незаконно. В каталог входят сходные системы с опубликованными математическими определениями: Munsell (его ренотация 1943 года – общедоступный документ) и RAL Design (задан непосредственно в CIELAB). Любой системе, формулы которой когда-либо публиковались, место здесь; предложите недостающую.