Цветовое гамут-маппинг: конвертация между цветовыми пространствами

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

Что такое гамут-маппинг?

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

Разные устройства и цветовые пространства имеют разные охваты:

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

Обратная операция — перемещение из меньшего охвата в больший — как правило, происходит без потерь, поскольку все исходные цвета вписываются в диапазон назначения. Файл sRGB, отображаемый на мониторе Display P3, просто использует подмножество его диапазона. Гамут-маппинг не требуется.

Проблема цветов вне охвата

Рассмотрим яркий голубой: #00FFFF (#00FFFF) в sRGB. Этот цвет находится вблизи края охвата sRGB. В Display P3 доступны более насыщенные голубые — цвета, которые sRGB вообще не может представить.

Представьте, что вы проектируете интерфейс в Display P3, используя яркий зелёный, выходящий за пределы sRGB: приблизительно color(display-p3 0.0 0.9 0.3) — зелёный значительно более насыщенный, чем #00E84A (#00E84A) в sRGB. Когда пользователь просматривает это на стандартном sRGB-мониторе, браузер должен принять решение: какой цвет sRGB должен представлять этот невоспроизводимый зелёный?

Это решение и есть гамут-маппинг, и для него существует несколько подходов с разными компромиссами.

Отсечение против перцептивного сжатия

Два основных стратегии обработки цветов вне охвата — отсечение и перцептивное (компрессионное) маппирование.

Отсечение

Отсечение — наиболее простой подход: цвета вне охвата привязываются к ближайшей точке на границе охвата. Это аналогично тому, чтобы взять значение 1,5 в шкале 0–1 и просто установить его равным 1.

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

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

Главная проблема отсечения — сдвиг оттенка. Многие цвета вне охвата отсекаются таким образом, что их оттенок заметно смещается. Яркий зелёный может отсечься до жёлто-зелёного; глубокий фиолетовый — до синего. Оригинальный оттенок не сохраняется.

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

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

Перцептивное намерение рендеринга (сжатие)

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

Представьте, что вы помещаете большую картину (охват Display P3) на меньший холст (охват sRGB), пропорционально уменьшая всю картину, а не обрезая её. Ни один цвет не обрезается; вместо этого сохраняются все взаимосвязи между цветами — только сжатые.

Преимущества перцептивного сжатия: - Гладкие градиенты остаются гладкими (без полосатости) - Относительные взаимосвязи между цветами сохраняются - В целом более приятно визуально для фотографии и градиентов

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

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

Относительное колориметрическое (с компенсацией чёрной точки)

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

Намерение рендеринга насыщенности

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

Гамут-маппинг в CSS

CSS поддерживает несколько цветовых пространств со времён спецификации CSS Color Level 4, и гамут-маппинг теперь встроен в алгоритм разрешения CSS-цвета.

Указание широкоохватных цветов в CSS

/* sRGB (традиционный) */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3 (широкий охват) */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020 (ультра-широкий) */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH (перцептивно равномерный, может обращаться к широкоохватным цветам) */
color: oklch(0.75 0.25 150);  /* Очень яркий зелёный — может быть вне sRGB */

Как CSS обрабатывает выход за пределы охвата

Когда значение CSS-цвета обращается к цвету, выходящему за пределы охвата дисплея, браузер применяет алгоритм CSS гамут-маппинга, определённый в CSS Color Level 4. Алгоритм использует бинарный поиск в цветовом пространстве OKLCH для нахождения наиболее схожего цвета в пределах охвата, используя deltaE 2000 (метрику перцептивного цветового различия) в качестве меры расстояния.

Результат — подход гамут-маппинга, приоритизирующий: 1. Сохранение яркости в первую очередь (сдвиги яркости наиболее заметны) 2. Сохранение оттенка во вторую очередь 3. Уменьшение насыщенности (chroma), пока цвет не впишется в целевой охват

Это значительное улучшение по сравнению с простым отсечением sRGB. Алгоритм CSS даёт результаты, близкие к перцептивному сжатию для цветов, лишь незначительно выходящих за пределы охвата, с изящной деградацией для цветов, находящихся далеко за пределами.

Медиазапрос color-gamut

CSS предоставляет медиазапрос для определения поддерживаемого охвата дисплея, позволяя подавать разные цвета в зависимости от возможностей:

/* По умолчанию: цвета sRGB для всех дисплеев */
.brand-color {
  color: #22C55E;
}

/* Улучшенный: более яркие цвета P3 для способных дисплеев */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* Ультра-широкий: максимальная яркость для дисплеев Rec. 2020 */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

Три значения для color-gamut: - srgb — дисплей покрывает приблизительно охват sRGB (наиболее распространённый) - p3 — дисплей покрывает приблизительно охват Display P3 (современные Mac, iPhone, высококлассный Android) - rec2020 — дисплей покрывает приблизительно охват Rec. 2020 (профессиональные и HDR-дисплеи)

OKLCH и широкий охват

OKLCH особенно хорошо подходит для работы с широким охватом, поскольку высокие значения насыщенности естественным образом обращаются к цветам за пределами sRGB. Значение насыщенности выше приблизительно 0,37 в OKLCH будет выходить за пределы охвата sRGB для большинства оттенков, попадая в Display P3 или дальше.

/* В sRGB: яркий зелёный */
color: oklch(0.75 0.22 145);

/* Вне sRGB, в Display P3: более яркий зелёный */
color: oklch(0.75 0.35 145);

/* Далеко за пределами sRGB: браузер применит гамут-маппинг */
color: oklch(0.75 0.5 145);

Когда цвет OKLCH выходит за пределы охвата, CSS автоматически применяет алгоритм гамут-маппинга. Вам не нужно обрабатывать это вручную — браузер разрешает это сам.

Используйте Конвертер цветов, чтобы конвертировать цвета между цветовыми пространствами и видеть, как смещаются значения при переходе между sRGB, Display P3 и OKLCH.

Практические решения для дизайнеров

Понимание гамут-маппинга меняет подход к работе с цветом для экранов:

1. Проектируйте в целевом охвате

Если ваш продукт ориентирован преимущественно на веб-пользователей со смешанными устройствами, проектируйте в sRGB. Если вы знаете, что ваша аудитория преимущественно использует современное оборудование Apple (Mac, iPhone), рассмотрите проектирование в Display P3 с запасными вариантами sRGB.

2. Знайте статус охвата ваших ярких цветов

Многие яркие цвета, которые «работают» в таких инструментах, как Figma (использующей Display P3 на оборудовании Apple), могут выглядеть иначе при экспорте в sRGB для веб-использования. Всегда проверяйте окончательные цвета с помощью явно определённого значения CSS, а не того, что Figma рендерит на вашем экране.

Некоторые чрезвычайно яркие зелёные, голубые и маджента в Display P3 не имеют эквивалентов в sRGB. Если ваш фирменный цвет — color(display-p3 0.0 0.9 0.3), зелёный более яркий, чем любой зелёный sRGB, вам нужно решить, какой запасной вариант sRGB использовать, или принять, что пользователи sRGB увидят менее яркую версию.

3. Тестируйте переходы градиентов между охватами

Градиенты между двумя широкоохватными цветами могут вызывать полосатость при отображении на мониторах sRGB, потому что промежуточные цвета, казавшиеся различимыми в P3, все отображаются на схожие значения sRGB (отсечение цвета в середине градиента). Если вы видите полосатость в градиенте, попробуйте:

• Снизить насыщенность обеих конечных точек до уровней, безопасных для sRGB
• Добавить промежуточные остановки градиента для распределения перехода
• Маршрутизировать градиент через OKLCH для перцептивно равномерного интервала

4. Используйте правильный формат экспорта

Для изображений, содержащих широкоохватные цвета: - JPEG: Встраивайте цветовой профиль (Display P3 или Adobe RGB) — браузеры будут использовать его для управления цветом - PNG: То же — встраивайте профиль - WebP: Поддерживает ICC-профили; встраивайте для точного цвета - SVG: Цвета указываются в CSS — используйте функцию color() для широкого охвата

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

5. Безопасный широкоохватный подход

Для дизайнеров, желающих более богатых цветов без сложности управления несколькими целями охвата, OKLCH с умеренной насыщенностью (0,18–0,25) остаётся преимущественно в пределах sRGB, обеспечивая при этом немного более яркие результаты по сравнению с типичными RGB-цветами в этом диапазоне. Гамут-маппинг CSS автоматически обрабатывает любые граничные случаи.

/* Яркие, но преимущественно безопасные для sRGB синие */
--color-primary: oklch(0.55 0.22 255);
--color-primary-hover: oklch(0.60 0.22 255);

Ключевые выводы

• Цветовой охват — это диапазон цветов, который может представить устройство или цветовое пространство. sRGB является стандартным для веба; Display P3 примерно на 26% больше и доступен на современных устройствах Apple и высококлассных устройствах.
• Цвета вне охвата — это цвета, выходящие за пределы целевого охвата и не поддающиеся точному воспроизведению на этом устройстве: что-то должно произойти, чтобы ввести их в пределы.
• Отсечение привязывает цвета вне охвата к границе охвата — быстро, но может вызвать сдвиги оттенка и полосатость. Перцептивное сжатие пропорционально масштабирует весь охват — медленнее, но сохраняет цветовые взаимосвязи и градиенты.
• CSS Color Level 4 определяет алгоритм гамут-маппинга, использующий OKLCH и deltaE 2000 для интеллектуального снижения насыщенности при сохранении яркости и оттенка — значительно превосходящий наивное отсечение sRGB.
• Медиазапрос color-gamut позволяет подавать более яркие цвета color(display-p3) на способные дисплеи, сохраняя запасные варианты sRGB для остальных.
• Подводные камни широкоохватного дизайна: Figma на оборудовании Apple по умолчанию рендерит в Display P3 — цвета, выглядящие ярко в Figma, могут выглядеть менее насыщенными при экспорте как sRGB для веб-использования. Всегда проверяйте с явными значениями CSS.
• Используйте Конвертер цветов, чтобы проверить, как любой цвет переводится между sRGB, Display P3 и OKLCH, чтобы понять его статус охвата и найти ближайший эквивалент в пределах охвата.