Привет! Меня зовут Антон Романов, я старший Angular-разработчик в Т-Банке, занимаюсь платежными формами T-Pay QR.

Поведаю о цветовых пространствах спецификации CSS Color 4, объясню их уникальность и специфику, расскажу о сценариях применения и плюсах, которые можно от этого получить.

Пропустим классическое вступление про устройство глаза, светочувствительные палочки и колбочки (там ничего нового, свежих релизов не было). Перейдем сразу к CSS, добро пожаловать под кат!

Что такое цветовая гамма (и какие цвета CSS мы имеем)

На протяжении более 25 лет sRGB был единственной цветовой гаммой для градиентов и цветов CSS с такими цветовыми пространствами, как rgb(), hsl() и hex.

Времена меняются. В Chrome 111 появилась поддержка гамм и цветовых пространств CSS Color 4, сократив отставание от Safari, который поддерживает display-p3 с 2016 года. CSS теперь поддерживает цвета из гамм HD и новые цветовые пространства, расширив доступную нам палитру.

Гамма представляет размер чего-либо. Фраза «миллионы цветов» — это комментарий к гамме дисплея или диапазону цветов, из которых он может выбирать.

Пресловутое маркетинговое «16 миллионов цветов» — это как раз и есть 256×256×256, то есть число вариаций привычной для нас записи цветов. Правда, там получается 16 777 216, но, видимо, число 16 выглядит презентабельнее, чем 17. Или число осознанно округлили в меньшую сторону. 

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

Обсуждая CSS Color 4, рассмотрим список гамм:

• sRGB;

• Display p3;

• RGB 98 (Adobe RGB);

• Rec2020;

• ProPhoto;

• CIE;

• HVS (human visual gamut).

CIE и HVS немного отличаются от общего списка.

CIE-гамма, а точнее представленная CIE 1931 xyY — это полная гамма цветов, видимых человеческому глазу. Это и есть внешняя цветная эллипсовидная фигура на иллюстрации.

HVS, или Human Visual Gamut, — частный случай гаммы CIE, в котором цвета представлены не абсолютным градиентом от одного цвета к другому, а только теми цветами, которые человеческий глаз реально способен идентифицировать и различать. Ее можно представить в виде набора точек внутри CIE.

«RGB увидел, а где HSL и HEX?» Здесь мы вводим новое понятие — цветовое пространство.

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

Цветовое расположение внутри пространства определяет, какие цвета располагаются рядом друг с другом, а также как будет работать доступ к цветам и их интерполяция.

Спецификация CSS Color 4 вводит 12 новых цветовых пространств в дополнение к известным ранее.

Цветовое пространство HEX

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

HEX, Hexadecimal, — самое популярное цветовое пространство. HEX определяет R, G, B и A с помощью шестнадцатеричных чисел.

Цветовое пространство RGB

RGB, Red Green Blue, — цветовое пространство, которое обеспечивает доступ к красному, зеленому и синему каналам. Оно позволяет указать значение от 0 до 255 или в процентах от 0 до 100.  Кстати, запятую между значениями ставить необязательно.

 

Цветовое пространство HSL

HSL, Hue Saturation Lightness, — одно из первых цветовых пространств, ориентированных на человеческое восприятие. Предлагает все цвета гаммы sRGB, не требуя при этом понимания того, как взаимодействуют красный, зеленый и синий.

Цветовое пространство HWB

HWB, Hue Whiteness Blackness, — еще одно цветовое пространство sRGB, ориентированное на то, как люди описывают цвет (оттенок, белизна, чернота). В нем можно выбрать оттенок и смешать белый или черный, чтобы найти желаемый цвет.

Функция Color()

Прежде чем посмотреть новые цветовые пространства CSS Color 4, упомяну функцию Color(). Ее можно использовать для любого цветового пространства, которое определяет цвета с каналами R, G, B и A. Функция не работает с пространствами HSL, HWB, LCH, LAB, okLCH или okLAB.

Интенсивность канала определяется процентами или десятичными дробями.

Цветовое пространство sRGB-Linear

sRGB-Linear, линейный sRGB, — это линейная альтернатива RGB, которая обеспечивает предсказуемую интенсивность канала при интерполяции.

В линейном sRGB градиент получается более правильным: его середина — ровно 50% черного, а первая четверть не состоит из практически полностью черного цвета.

Цветовое пространство LCH

LCH, Luminance Chroma Hue, — цветовое пространство, которое смоделировано по образцу человеческого зрения. LCH предлагает синтаксис для указания цветов, в том числе выходящих за рамки восприятия глазом. 

Каналы LCH — это светлота, цветность и оттенок. Hue — угол, как в HSL и HWB. Luminance (которую иногда все равно называют Lightness) — значение от 0 до 100, но в отличие от светлоты HSL она другая, перцептивно линейная, ориентированная на человеческое восприятие. Chroma аналогична насыщенности в HSL и может варьироваться от 0 до 230, но технически не ограничена.

Цветовое пространство okLCH

okLCH, OK Luminance Chroma Hue, — это цветовое пространство корректирует LCH. Параметры аналогичны, но принципы измерения и интерполяции немного различаются. Есть мнение, что буквы OK в названии — искаженная аббревиатура от Optimal Color, но пруфов нет.

Luminance в okLCH определяется чуть иначе, с более линейной темнотой оттенка.

При плавном увеличении значения Luminance, в okLCH пропорционально увеличивается воспринимаемая светлота, а в LCH — нет.

Цветовое пространство LAB

LAB, Luminance A B, — еще одно цветовое пространство, созданное для доступа к гамме CIE с перцептивно-линейным измерением светлоты (L). Буквы A и B в LAB — это уникальные оси цветового зрения человека: красно-зеленая и сине-желтая. 

Положительное значение А добавляет красный цвет, отрицательное — зеленый. Положительное значение В добавляет желтый цвет, отрицательное — синий. Нулевое значение осей А и В оставляет цвет без оттенка, черный или белый, в зависимости от значения L.

okLAB OK Luminance AB,— это аналогичная корректировка пространства LAB.

Однородность восприятия в цветовых пространствах

LCH, LAB и их корректировки — это цветовые пространства, однородные для восприятия.

При работе с LCH одно и то же числовое изменение координат в цветовом пространстве дает одну и ту же воспринимаемую разницу между цветами. Такое свойство цветового пространства называют однородностью восприятия. Цветовые пространства RGB или HSL не однородны для восприятия.

Это можно продемонстрировать на примере. Если мы возьмем набор цветов, на 100% насыщенных и на 50% светлых в двух пространствах — HSL и LCH, — и переведем полученные цвета в монохромное (черно-белое) представление, то увидим, что цвета в LCH получились абсолютно одинаковыми, в то время как в HSL общий разброс в светлоте составил 67%.

RGB-подобные цветовые пространства 

Набор RGB-образных цветовых пространств:

• DISPLAY-P3;

• Rec2020;

• А98 RGB (Adobe 1998 RGB);

• ProPhoto RGB;

• XYZ.

В формате записи эти пространства отличаются друг от друга только указанием самого пространства, но персонального упоминания заслуживают.

DISPLAY-P3 — RGB-образное цветовое пространство от Apple. Это интерпретация более старого стандарта DCI-P3 с двумя отличиями: как точку белого оно использует Иллюминант D65 вместо ~6 300K у предшественника и гамму 2.2 вместо 2.6 (имеется в виду гамма-коэффициент).

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

Иллюминант (или стандартный источник света) — теоретический источник видимого света, основа для сравнения цветов или изображений. Введен Международной комиссией по освещению — СIE.

D65 примерно соответствует среднему дневному освещению в европейских широтах. Реальных источников света D65 нет — только имитаторы, в отличие от цветовой температуры в Кельвинах.

А точка белого — это определение того, какой цвет воспринимается как нейтрально белый в конкретных условиях освещения или в определенном цветовом пространстве. По большому счету это «нулевая точка» для всех остальных цветов.

Rec2020, ITU-R Recommendation BT.2020, — часть движения к UltraHD TV, обеспечивающему широкий диапазон цветов для использования в мультимедиа 4K и 8K.

А98 RGB (Adobe 1998 RGB) — цифровое пространство от Adobe для отображения большинства цветов, доступных на принтерах CMYK. Он предлагает больше цветов, чем sRGB и Display P3, особенно в голубых и зеленых оттенках.

ProPhoto RGB — пространство, созданное Kodak, с широкой цветовой гаммой уникально предлагает сверхширокий диапазон основных цветов и минимальное изменение оттенка при изменении светлоты.

XYZ, XYZ-d50, XYZ-d65. XYZ — эталонная цветовая модель, мастер-модель практически всех остальных цветовых моделей. Отличие вариаций только в белой точке: Иллюминант D65 для XYZ и XYZ-d65 и Иллюминант D50 для XYZ-d50. 

XYZ очень нелогична для восприятия, поэтому практически не используется в дизайне. Значения x, y и z завязаны на длину волны цветового спектра (номинально это можно назвать красным, зеленым и синим, но принципы образования цвета сильно отличны от RGB-пространств).

Цветовая интерполяция

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

Правила интерполяции напрямую задаются цветовым пространством, в котором она происходит. Это можно представить как соединение с помощью линии двух или более цветов внутри той самой трехмерной фигуры: куба, цилиндра и прочих. С добавлением новых гамм и цветовых пространств появились новые дополнительные возможности интерполяции. Например, переход цвета в пространстве HSL от синего к белому приводит к чему-то совершенно отличному от sRGB.

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

Новый дефолт для интерполяции в CSS Color 4 — OKLAB. После введения спецификации CSS Color 4 в популярные браузеры при интерполяции внутри новых цветовых пространств по дефолту будет применяться интерполяция OKLAB. А при использовании старых, привычных пространств — все также sRGB.

Градиент будет интерполирован в sRGB:

linear-gradient(to right, rgb(100 0 0), rgb(50 100 50))

Градиент будет интерполирован в OKLAB:

linear-gradient(to right, color(srgb 100 0 0), color(srgb 50 100 50)

Кратчайшее расстояние между двумя точками всегда представляет собой прямую линию. Рассмотрим это на примере градиента в sRGB. 

Если мы создадим привычный градиент от начального к конечному цвету, внутри цветового спектра он будет представлять собой линию, которая тянется напрямую, не пытаясь захватить яркие участки переходных цветов:

linear-gradient(to right, rgb(100 0 0), rgb(50 100 50))

Но если мы запишем этот градиент подробнее, с указанием промежуточных ярких точек переходных цветов, он у нас получится намного более насыщенным:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242)

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

Пример составления в CSS длинной интерполяции:

linear-gradient(
	to right in hsl longer hue,
	hsl(180deg 100% 75%),
	hsl(240deg 100% 75%)
  )

Градиенты в разных цветовых пространствах

 

Каждое цветовое пространство, учитывая его уникальную форму и цветовое расположение, дает свой градиент. Для градиента существует понятие «сдвиг оттенка» во время интерполяции, например появление фиолетового цвета в градиенте от синего к белому.

Рассмотрим несколько простых градиентов, интерполированных в разных цветовых пространствах.

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

Градиенты в некоторых пространствах более яркие, чем другие, или меньше проходят через мертвые зоны. Такие пространства, как LAB, объединяют цвета таким образом, чтобы оптимизировать насыщенность, в отличие от пространств, оптимизированных для записи цвета людьми, например HWB.

Мы можем вручную указать, интерполяцию какого пространства хотим применить, независимо от пространства, в котором мы используем цвета:

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.oklab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

Рассмотрим еще один любопытный пример. Составим два градиента в двух дефолтных интерполяциях: sRGB и OKLAB:

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
  // вспоминаем, что интерполяция для legacy-RGB цветов без явного ее указания — sRGB
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
  // используются цвета нового цветового пространства, интерполяция без явного указания — OKLAB
}

На выходе получим два градиента, которые визуально не сильно различаются, по крайней мере на первый взгляд.

Но если в полученных градиентах с помощью коррекции выставить максимальную контрастность и экспозицию, увидим, что интерполяция в okLAB выглядит более предсказуемо.

Цвета CSS Color 4 на практике

Для имеющегося цвета мы можем изменить цветовое пространство прямо в Color-picker внутри DevTools. При переходе с меньшего на большее (по охвату) цветовое пространство на панели цветов отрисуется кривая линия, помеченная как sRGB — это и есть граница гаммы sRGB. Выйти за нее мы можем, но при возврате обратно на sRGB цвет сбросится до ближайшего доступного внутри гаммы.

Отображение цвета из гаммы sRGB:

color(srgb 0 1 0)

Конвертируем цвет в sRGB в Rec2020, переключив цветовое пространство в Color-picker:

color(rec2020 .57 .96 .27)

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

Рассмотрим сценарий. Укажем в коде цвет, который явно выходит за рамки цветового пространства:

rgb(320 255 255)

Сценарий, когда цвет описан шире, чем позволяет текущая гамма, называется «Зажим гаммы». В случае выхода цвета за рамки цветового пространства лишняя информация удаляется и внутри системы цветопередачи значение 300 преобразуется в ближайшее доступное — 255. Цвет оказывается зажат в своем пространстве. То же самое происходит и с дисплеями, и с человеческим глазом.

Без паники: браузер нас заботливо об этом предупредит.

Цвета из спецификации CSS Color 4 давно поддерживаются всеми популярными браузерами и входят в Baseline. Но все же стоит упомянуть, что плавно перейти к новым цветовым пространствам можно двумя способами.

Graceful degradation. Мы заранее пишем фолбэк цвета:

color: red;
color: color(display-p3 1 0 0);

Progressive enhancement. Мы отталкиваемся от поддержки браузером цветового пространства, для этого есть несколько инструментов:

• @media (dynamic-range: high): — самый неконкретный способ, но покрывает большинство кейсов;

• @media (color-gamut: rec2020): — проверяем конкретное цветовое пространство;

• @supports (background: oklch(0 0 0)): — проверяем конкретное свойство;

• Проверка из JavaScript через window.matchMedia():.

window.matchMedia('(color-gamut: p3)').matches

В завершение предлагаю подумать о том, что наши «технические предки» испытывали такой же страх и неуверенность, переходя от веб-цветов к sRGB в конце 1990-х.

Эпилог

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

Но мы близимся к переходному моменту, когда в вебе и смежных сферах гамма sRGB перестанет быть вездесущей и безальтернативной. sRGB был в вебе единственной гаммой более 25 лет, а теперь близится Рубикон, когда в браузерах начнут массово использовать другие гаммы и sRGB станет одной из, а не основной гаммой.

Ученье — цвет!

Давайте не бояться нового, рассказывать о широких CSS-гммах дизайнерам, родителям, соседям.

И помним: на sRGB цвет клином не сошелся ?