C05 · Цвет и спектры
Цветовые модели и пространства
Три числа не задают цвет без правил. Разделим свет, кодирование и координаты.
Если нужны основы
Теория
RGB — модель, sRGB — конкретные правила
Экран складывает красный, зелёный и синий свет. Но три числа без правил ещё не задают цвет: нужно знать, какой свет означает каждый канал и как числа связаны с его количеством. Здесь используем sRGB — конкретный набор таких правил.
Возьмём один оранжевый цвет и будем описывать его тремя способами. RGB нужен, когда храним или показываем изображение; HSV — когда удобно выбирать оттенок; Lab — когда хотим отделить светлоту от цвета и оценить различие. Нажми на любую цветную карту: остальные покажут координаты того же цвета. Затем разберём, почему при смешивании важно отличать коды от количества света.
Один цвет — три системы координат
Меняй цвет в любой карте: метки и числа в остальных покажут тот же результат.
Нажми или проведи по цветной плоскости. Ползунок двигает срез по третьей оси. Стрелки на выбранной плоскости меняют обе координаты; Shift делает шаг крупнее.
RGB: сколько каждого канала
Три оси куба — красный, зелёный и синий от 0 до 1. Чёрный в начале, белый в противоположном углу. Это коды sRGB, которыми сохраняют и показывают цвет.
Плоскость ниже — R и G при выбранном B. Двигай B: срез проходит через куб.
HSV: как выбрать оттенок
Тон H идёт по кругу, насыщенность S — от серого центра к краю, V — снизу вверх. HSV переупаковывает те же коды RGB: удобнее выбрать цвет, но V не измеряет светлоту.
Круг развёрнут в плоскость: H идёт вправо, S — вверх. Ползунок V меняет высоту среза цилиндра.
Lab: светлота отдельно от цвета
L* — светлота, a* — от зелёного к красному, b* — от синего к жёлтому. Так удобнее менять светлоту и оценивать небольшие различия цвета. Равные расстояния лишь приближённо соответствуют восприятию.
Плоскость a* и b* — горизонтальный срез. Ползунок L* поднимает или опускает его.
Шахматка — цвет вне охвата sRGB. L* от 0 до 100; оси a* и b* здесь показаны от −128 до 128, но это не их универсальные границы.
Этот цвет входит в sRGB: во всех трёх картах показан один цвет.
Как связаны числа: sRGB → линейный RGB → XYZ → Lab
Коды sRGB не пропорциональны количеству света. Сначала снимаем их нелинейное кодирование. Затем матрица переводит линейные RGB в XYZ — общие координаты цвета. Lab сравнивает XYZ с белым образцом и нелинейно преобразует отношения. HSV получает координаты прямо из кодов sRGB: V — максимум, S — относительный размах, H — соотношение каналов.
- sRGB без ограничения
- Линейный RGB
- XYZ (D65)
- Lab (D65)
Здесь во всей цепочке белый D65, Y белого = 1. CSS lab() использует D50: это другой белый, и для сравнения нужна хроматическая адаптация. Мы не подставляем эти числа напрямую в CSS lab(). Реальный вид также зависит от дисплея и его цветового профиля.
Три проверки одного цвета
Сначала выберите серый в редакторе выше: в RGB компоненты равны, в HSV , в Lab a* и b* близки к нулю. Сдвигайте H при — образец не меняется. Так видно, почему число оттенка у серого не несёт информации.
Затем сравните чистый красный и зелёный: у обоих V = 1, но L* различается. V — наибольшая RGB-компонента, а не воспринимаемая светлота. Наконец, в Lab оставьте L* прежним и изменяйте a* и b*: вы меняете цветовые координаты. Если точка вышла за охват, отмеченный экранный образец уже является ограниченным приближением, а не точным заданным цветом.
Усреднять свет или коды
Кусочная нелинейная функция sRGB выделяет больше кодов тёмным уровням. Код 0,5 соответствует примерно 0,214 линейного света. Поэтому среднее кодов делает смесь чёрного и белого темнее среднего света.
Для физического смешения, размытия и уменьшения обычно декодируют свет, выполняют операцию и кодируют обратно. Творческая тоновая правка может намеренно менять коды, но это другая задача.
Половина света — не половина кода
Смешайте поровну чёрный и белый, затем красный и зелёный. В обоих вариантах доли одинаковы.
Точные значения — в разборе точки
RGB; диапазон показа 0…1
Точные значения — в разборе точки
RGB; диапазон показа 0…1
Разобрать выбранную точку
Что показывает график
На кривой отмечены два результата одной смеси. Среднее кодов и код среднего света оказываются в разных точках. На осях диапазон один и тот же: от 0 до 1.
- Декодирование
- Среднее кодов (R): 0.5; 0.214
- Среднее света (R): 0.7354; 0.5
Средний код 0,5 темнее среднего света. Разница влияет на смешивание, размытие и уменьшение.
Параметры и подробности
Обе картинки показаны как sRGB. Во втором способе сначала декодируем кусочную функцию sRGB, смешиваем линейный свет, затем кодируем обратно. 50% между чёрным и белым дают код около 0,735, а не 0,5. Это не настройка гаммы сайта и не модель смешения красок.
Выбери точку на изображении. Стрелки перемещают её; Home и End — к краям строки. Просмотр не изменяет вычисление.
Для изменения примера нужен JavaScript и Canvas. Рассчитанные изображения доступны выше.
HSV и воспринимаемые различия
Справка и следующие методы
В HSV тон H выбирает семейство цвета, насыщенность S — удаление от серого, V — наибольший из трёх кодов RGB. При все три канала одинаковы: изменение H уже ничего не меняет. Это удобные координаты цветовой палитры, а не три независимых вида света.
Оставьте V неизменным и выберите сначала зелёный, затем синий. Численно V одинаков, но зелёный даёт больше светимости Y. Значит, удобная ручка выбора цвета не обязана быть шкалой одинаково воспринимаемой яркости.
Сравнить цвет с нейтральным и найти границу
Справка и следующие методы
В срезе Lab выше фиксирована светлота L*, а две оси меняют цвет: a* идёт от зелёного к красному, b* — от синего к жёлтому. Рядом с центром лежат нейтральные серые цвета. Параметры Lab вычисляются через XYZ относительно заданного белого, здесь D65.
Шахматка на карте означает выход за охват sRGB: для выбранного Lab нужен отрицательный RGB-канал или канал больше 1. Числа Lab сохраняются, но экранный образец ограничен доступными цветами. Смена координат не увеличивает охват дисплея.
CIELAB и OKLab приближают зрительные различия, но используют разные шкалы и формулы. Расстояние ΔE76 в Lab — удобная оценка небольших различий, а не универсальная мера того, насколько любой человек отличит два цвета при любом освещении.
Охват, печать, HDR и спектры
Справка и следующие методы
Справка к координатам: XYZ — стандартные тристимульные координаты; xyY разделяет хроматичность xy и светимость Y. Luma Y′ в видео складывает закодированные компоненты, поэтому это не то же самое, что Y по линейным RGB. ICC-профиль связывает устройство с определённым цветовым переходом.
Расчёт использует белый D65 с . CIELAB здесь не адаптирован к D50 и потому не является готовым значением CSS lab(). Граница среза отмечает охват sRGB, а не все физически возможные цвета. У серого , поэтому тон H в HSV не определён: здесь для него показан условный 0°. Калибровка дисплея не выполняется.
Охват ограничивает представимые цвета, разрядность — количество кодов, динамический диапазон — отношение светлых и тёмных уровней. Обрезка цвета вне охвата и отображение в охват теряют разные свойства. CMYK зависит от красок, бумаги и профиля: 1−RGB не калибрует принтер.
PQ/HLG задают специальные правила HDR-сигнала и просмотра; этот sRGB-просмотр не становится HDR. Разные спектры могут выглядеть одинаково под одной лампой и разойтись под другой — метамеризм. Это объясняет, почему три канала не определяют спектр материала.
Практика
Проверь идею на другом условии. Следуй задаче над изображениями; разбор точки поможет объяснить результат. Эта практика не оценивается.
Выбрать цвет по смыслу координат
Не меняя V, сделайте образец серым одним регулятором. Проверьте: R, G и B стали равны, а H больше не меняет цвет. Верните S = 1 и V = 1; сравните красный H = 0° и зелёный H = 120°. У обоих максимальный код 1, но L* разное. Объясните, почему V нельзя использовать вместо светлоты. Затем выберите промежуточный цвет прямо на карте и прочитайте его RGB и Lab.
Точные значения — в разборе точки
RGB; диапазон показа 0…1
Точные значения — в разборе точки
RGB; диапазон показа 0…1
Разобрать выбранную точку
Что показывает график
H выбирает оттенок, S удаляет или возвращает цветность, V задаёт максимум кодов. Равное V не гарантирует одинаковое L*: это разные координаты одного цвета.
Параметры и подробности
Нажмите на карту: H растёт вправо, S уменьшается вниз; выбор обновляет регуляторы и образец справа. Справа однородный образец точного выбранного цвета, не результат попиксельной обработки левой картинки. HSV задан поверх закодированного sRGB. V — максимальный код, не светимость Y; смена координат не расширяет охват экрана.
Выбери точку на изображении. Стрелки перемещают её; Home и End — к краям строки. Просмотр не изменяет вычисление.
Для изменения примера нужен JavaScript и Canvas. Рассчитанные изображения доступны выше.
Игры
Проверь объяснение
Вопрос 1 из 5
В HSV насыщенность нулевая. Что произойдёт при изменении H?
Точные значения — в разборе точки
RGB; диапазон показа 0…1
Точные значения — в разборе точки
RGB; диапазон показа 0…1
Точные значения — в разборе точки
RGB; диапазон показа 0…1
Выбери один ответ. Он проверится сразу.
Ограничения и материалы
Границы этого примера
Живые вычисления — sRGB, HSV, относительный XYZ D65, CIELAB D65 и OKLab. Срез — небольшая конечная сетка; экранный preview вне охвата заменён явной маркировкой, а численные RGB не обрезаны. Нет ICC, D50-адаптации, CMYK-конверсии, HDR-вывода, полного цветового движка или калибровки экрана.