Цветовой охват: sRGB, P3 и Rec. 2020

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

Это руководство объясняет, что такое цветовой охват, рассматривает sRGB, Display P3 и Rec. 2020 как три наиболее актуальных охвата для веб-разработки, и показывает, как именно использовать широкоохватные цвета в CSS с функцией @media (color-gamut).

Что такое цветовой охват?

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

Диаграмма цветности CIE 1931

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

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

• Маленький треугольник = узкий охват (меньше цветов)
• Большой треугольник = широкий охват (больше цветов)

Три основных цвета любого охвата определяют положение вершин треугольника. Смещение основных цветов к внешнему краю подковы (более насыщенные основные) расширяет треугольник и охват.

Почему охват важен для веб-дизайна

До недавнего времени это было академическим вопросом. Почти каждый дисплей был совместим с sRGB, а цвета в вебе были повсеместно sRGB-цветами. Но когда Display P3 стал стандартом на устройствах Apple (все iPhone с 2016 года, все новые MacBook, iMac, iPad Pro и Studio Display), а HDR-мониторы распространились в Windows и игровой индустрии, пейзаж дисплеев фрагментировался.

Веб-контент в sRGB по-прежнему корректно отображается на P3 и Rec. 2020 дисплеях — sRGB-цвета входят в эти более широкие охваты. Но контент в широкоохватных цветовых пространствах может использовать преимущества более насыщенных основных цветов, которые предлагают P3 и Rec. 2020.

sRGB: веб-стандарт с 1996 года

История и распространение

Цветовое пространство sRGB (standard Red Green Blue) было совместно разработано HP и Microsoft в 1996 году и стандартизировано IEC как IEC 61966-2-1. Его цель — обеспечить общий ориентир для потребительских мониторов, принтеров и веба, позволяя воспроизводить цвета согласованно без калибровки устройств.

sRGB стал цветовым пространством по умолчанию для: - Браузеров (все CSS-цвета — sRGB, если не указано иное) - Цифровых камер (JPEG по умолчанию использует sRGB) - Большинства потребительских мониторов 2000–2010-х годов - Подсистемы отображения Windows - Стандартного SDR-контента (стандартный динамический диапазон)

Покрытие sRGB

sRGB охватывает приблизительно 35% видимого цветового охвата согласно диаграмме цветности CIE 1931. Звучит ограниченно, но на практике это достаточно широкий диапазон, включающий разнообразие природных и искусственных цветов повседневной жизни.

Основные цвета sRGB: - Красный: примерно x=0.64, y=0.33 (слегка оранжево-красный) - Зелёный: примерно x=0.30, y=0.60 (желтовато-зелёный) - Синий: примерно x=0.15, y=0.06 (сине-фиолетовый)

sRGB в CSS

Каждый CSS-цвет, который вы когда-либо писали, является sRGB, если явно не указано иное. Это включает:

• Hex-коды: #3B82F6
• Именованные цвета: blue, coral, rebeccapurple
• rgb() и rgba(): rgb(59, 130, 246)
• hsl() и hsla(): hsl(217, 91%, 60%)

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

Display P3: современный стандарт Apple

Что такое Display P3?

Display P3 — цветовое пространство, разработанное Apple для дисплеев Retina. Оно основано на цветовом пространстве DCI-P3, используемом в цифровом кинопроекционировании. Display P3 использует ту же белую точку, что и sRGB (D65, стандартный дневной свет), и ту же гамму, но определяет другие, более насыщенные основные цвета.

Display P3 охватывает примерно 45% видимого цветового охвата — примерно на 26% больше площади, чем sRGB. Расширение наиболее выражено в областях красного и зелёного, с менее значительным расширением в синей части.

Какие устройства поддерживают Display P3?

Apple широко внедрила Display P3 начиная с 2015–2016 годов:

• iPhone 7 и новее — все последующие модели iPhone
• iPad Pro (9,7 дюйма, 2016) и новее — все последующие модели iPad Pro
• MacBook Pro (конец 2016) и новее с дисплеем Retina
• iMac (Retina 5K, конец 2015) и новее
• Apple Pro Display XDR, Studio Display

На стороне Windows и Android многие премиальные ноутбуки и телефоны также оснащены P3-совместимыми дисплеями, хотя внедрение менее однородно. По состоянию на 2025 год большинство высококлассных потребительских устройств поддерживают как минимум P3.

Задание P3-цветов в CSS

CSS Color Level 4 предоставляет функцию color() с цветовым пространством display-p3, позволяя напрямую задавать цвета в основных цветах P3:

/* P3-красный — более насыщенный, чем sRGB-красный */
color: color(display-p3 1 0 0);

/* Яркий P3-зелёный */
color: color(display-p3 0 1 0);

/* Насыщенный коралловый в P3 */
color: color(display-p3 0.95 0.42 0.37);

Три значения в color(display-p3 R G B) нормированы от 0 до 1 (не от 0 до 255). Это отличается от функции rgb().

Видимое различие

Практическое влияние P3 наиболее заметно в высоконасыщенных цветах. Яркий P3-красный (сопоставимый с color(display-p3 1 0 0)) заметно более насыщен, чем sRGB-красный #FF0000 на P3-совместимом дисплее. Для фирменных цветов и героических изображений, которым нужна максимальная яркость, P3 даёт ощутимое преимущество.

Rec. 2020: будущее HDR и кино

Что такое Rec. 2020?

Rec. 2020 (формально ITU-R BT.2020) — цветовой стандарт для телевидения сверхвысокой чёткости (UHDTV) и HDR-контента. Определён Международным союзом электросвязи в 2012 году и представляет значительно более широкий охват, чем всё, что сегодня распространено среди потребителей.

Rec. 2020 охватывает примерно 75% видимого цветового охвата — более чем вдвое превышая sRGB и существенно шире P3. Его основные цвета определены на спектральных границах конкретных лазерных длин волн, то есть теоретически являются максимально насыщенными возможными цветами.

Текущая поддержка дисплеями

Важная оговорка: практически ни один доступный сегодня потребительский дисплей не покрывает охват Rec. 2020 полностью. Высококлассные HDR-телевизоры могут покрывать 75–90% Rec. 2020; для полного покрытия необходимы профессиональные кинопроекторы и специализированные HDR-мониторы для мастеринга.

Однако Rec. 2020 является эталонным охватом для стандартов HDR-контента, включая HDR10, Dolby Vision и HLG. Даже если дисплей не может воспроизвести его полностью, контент в Rec. 2020 будет тонально преобразован для отображения на устройствах с меньшим охватом.

Rec. 2020 в CSS

/* Зелёный Rec. 2020 — чрезвычайно яркий, за пределами возможностей большинства дисплеев */
color: color(rec2020 0 1 0);

/* Глубокий красный в Rec. 2020 */
color: color(rec2020 0.8 0.1 0.1);

Для современной веб-разработки цвета Rec. 2020 будут отображаться как ближайший воспроизводимый цвет на охвате поддерживаемого дисплея. Это делает их совместимыми с будущим: браузеры с поддержкой Rec. 2020 показывают полный цвет; остальные — наилучшее приближение.

Широкоохватные цвета в CSS с @media (color-gamut)

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

@media (color-gamut: srgb) {
  /* Поддерживается практически всеми цветными дисплеями */
}

@media (color-gamut: p3) {
  /* Дисплей поддерживает как минимум охват P3 */
}

@media (color-gamut: rec2020) {
  /* Дисплей поддерживает как минимум охват Rec. 2020 */
}

Значения прогрессивны: p3 означает, что дисплей поддерживает как минимум P3 (значит, sRGB тоже включён), а rec2020 — как минимум Rec. 2020 (включая P3 и sRGB).

Паттерн прогрессивного улучшения

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

.hero-button {
  /* Фолбэк sRGB — работает на всех дисплеях */
  background-color: #E63946;
}

@media (color-gamut: p3) {
  .hero-button {
    /* Более яркий красный на P3-дисплеях */
    background-color: color(display-p3 0.95 0.17 0.23);
  }
}

@media (color-gamut: rec2020) {
  .hero-button {
    /* Ещё более яркий на Rec. 2020-дисплеях */
    background-color: color(rec2020 0.89 0.14 0.21);
  }
}

На стандартном sRGB-мониторе кнопка показывает hex-красный #E63946. На iPhone, MacBook Pro или современном широкоохватном мониторе — более яркую P3-версию. На дисплее с поддержкой Rec. 2020 — самую яркую версию.

Использование oklch() для широкого охвата

Цветовое пространство OKLCH не привязано к конкретному охвату, но естественно адресует цвета за пределами sRGB — значения, выходящие за диапазон 0–1 в терминах sRGB, автоматически становятся широкоохватными. Это делает OKLCH удобным для работы с цветом разных охватов:

.accent {
  /* OKLCH может выражать P3 и шире */
  color: oklch(60% 0.25 27deg);
}

Браузер сопоставляет заданный OKLCH-цвет с ближайшим воспроизводимым цветом в охвате поддерживаемого дисплея. Если дисплей P3-совместим — сопоставляет с P3-цветом; если sRGB — обрезает до ближайшего sRGB-эквивалента.

Это весомый аргумент в пользу OKLCH для дизайн-систем: вы задаёте целевое цветовое восприятие, а браузер автоматически управляет преобразованием охвата. Используйте Конвертер цветов ColorFYI для перевода между sRGB hex-значениями и их OKLCH-эквивалентами.

Базовый уровень color-gamut: srgb

Каждый цветной дисплей поддерживает как минимум color-gamut: srgb — это совпадает с любым нечёрно-белым дисплеем. Этот медиазапрос нужен только если вы хотите таргетировать цветные дисплеи в отличие от гипотетических монохромных, что редко бывает необходимым.

На практике полезен запрос color-gamut: p3, охватывающий экосистему Apple и всё большую долю устройств на Android и Windows.

Поддержка браузерами

По состоянию на 2025 год: - @media (color-gamut) — поддерживается всеми основными браузерами (Chrome, Firefox, Safari, Edge) - color(display-p3) — поддерживается всеми основными браузерами - color(rec2020) — поддерживается в Chrome и Safari; поддержка Firefox последовала - oklch() — поддерживается всеми основными браузерами

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

Практические рекомендации для веб-дизайн-проектов

Стоит ли сегодня использовать P3-цвета?

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

Наиболее эффективные сценарии применения: - Фирменные цвета и акценты, которые должны быть максимально насыщенными - Героические изображения и промографика, где яркость стимулирует вовлечённость - Визуализация данных, где более широкий цветовой диапазон позволяет использовать более различимые категориальные цвета

Какие цвета больше всего выигрывают от P3?

Прирост от P3 по сравнению с sRGB наиболее значителен для: - Ярких красных и оранжевых: красный основной P3 заметно более насыщен - Насыщенных зелёных: P3 значительно расширяется в зелёно-жёлтой области - Живых розовых и маджент: P3 лучше передаёт яркую модно-бьюти-палитру

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

Практический рабочий процесс

1. Спроектируйте цветовую систему в hex (sRGB) как обычно
2. Определите 2–5 цветов, для которых максимальная яркость критична (основной фирменный цвет, героический акцент, ключевые UI-состояния)
3. Используйте Конвертер цветов ColorFYI для поиска OKLCH-эквивалента каждого
4. В CSS задайте значение OKLCH (или эквивалент color(display-p3)) и позвольте браузеру управлять преобразованием охвата
5. Проверьте на P3-совместимом дисплее (любой современный MacBook или iPhone), чтобы убедиться в визуальном улучшении

Сравнение охватов

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

• Цветовой охват — это полный диапазон цветов, которые система может представить, визуализируемый как треугольник на диаграмме CIE. Более широкие основные цвета = больший треугольник = больше цветов.
• sRGB является универсальным веб-стандартом с 1996 года, охватывая примерно 35% видимых цветов. Все стандартные CSS-значения цвета (rgb(), hsl(), hex) — это sRGB.
• Display P3 охватывает около 45% видимых цветов и является стандартом на всех устройствах Apple с 2016 года (iPhone, MacBook, iPad Pro, iMac) и многих современных устройствах Windows и Android.
• Rec. 2020 охватывает около 75% видимых цветов и используется как эталонный охват для HDR-контента, но немногие потребительские дисплеи полностью воспроизводят его сегодня.
• Используйте @media (color-gamut: p3) для прогрессивного улучшения цветов на P3-совместимых дисплеях, с sRGB как базовым фолбэком.
• color(display-p3 R G B) задаёт цвета в цветовом пространстве P3 в CSS; значения нормированы от 0 до 1.
• oklch() естественно выражает широкоохватные цвета и всё больше предпочитается для дизайн-систем — браузер автоматически управляет преобразованием охвата в соответствии с возможностями дисплея.
• Используйте Конвертер цветов ColorFYI для перевода между hex, OKLCH и другими цветовыми пространствами при создании широкоохватных цветовых систем.