Система координат для цвета: оси, диапазоны и правило, связывающее числа с измеримым светом. Один и тот же оранжевый – это 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 нет: преобразуйте его – и числа выйдут за допустимый диапазон. Атлас этого не скрывает: плашка рядом с текущим цветом называет самый узкий стандартный охват, который его вмещает, а участки вне диапазона проступают полупрозрачно поверх шахматного фона.

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

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

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

Для каждого пространства указана статья или спецификация, по которой реализовано преобразование. Результаты сверяются с 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). Любой системе, чью математику когда-либо публиковали, место здесь; предложите недостающую.