P3 огненный
Сверхнасыщенный красный
P3 яблочный
Сверхнасыщенный зелёный
P3 кино
Кинематографический оранжевый
P3 неон
Сверхнасыщенный розовый
P3 нефрит
Сверхнасыщенный голубой
P3 фиолет
Сверхнасыщенный фиолетовый
/* sRGB fallback */
color: #ff4500;
/* P3 улучшенный */
color: color(display-p3 1 0.3 0);
/* Media query */
@media (color-gamut: p3) {
.brand { color: color(display-p3 ...); }
}
P3 образцы ярче → Настоящая поддержка P3
P3 обрезан → Только sRGB
Профессиональный тест цвета DCI-P3
Точная проверка поддержки широкой гаммы P3: эксклюзивные P3-образцы, визуализация границы sRGB и поканальные тесты насыщенности.
Эксклюзивные P3-образцы
Отображает цвета, которые корректно рендерятся только на P3-мониторах: ультранасыщенный красный, Apple-зелёный, кинематографический оранжевый. На sRGB-дисплеях эти цвета обрезаются до ближайших sRGB-значений, теряя яркость.
Визуализация границы sRGB
Градиентные полосы переходят от границы гаммы sRGB к крайним значениям P3. На P3-дисплеях градиент продолжается за границу sRGB; на sRGB-дисплеях градиент останавливается на границе (цвета больше не меняются).
Верификация CSS P3
Все образцы рендерятся через синтаксис CSS color(display-p3 ...) — нативная поддержка P3-цветов браузером. В сочетании с запросами @media (color-gamut: p3) фронтенд-разработчики могут отдавать более яркие цвета интерфейса пользователям с широкой гаммой.
Что такое DCI-P3?
Происхождение и применение стандарта цветовой гаммы P3.
Стандарт киноиндустрии
DCI-P3 был разработан в 2005 году организацией Digital Cinema Initiatives для цифровой кинопроекции. Покрывает примерно 45% видимых человеком цветов — на 25% больше, чем 35% у sRGB.
Предпочтение экосистемы Apple
Apple полностью внедрила P3 с 2015 года: iMac 5K, iPhone 7+, iPad Pro, MacBook Pro и Pro Display XDR поддерживают P3. Цветовое управление macOS идеально обрабатывает P3-контент, что делает её самой зрелой P3-экосистемой.
Стандарт HDR-контента
HDR-форматы HDR10 и Dolby Vision используют P3 как цветовой контейнер. Netflix, Disney+ и Apple TV+ мастерят HDR-контент в гамме P3. Дисплеи без P3 не могут полностью отрендерить HDR-цвета.
Как определить поддержку P3
Три шага для проверки P3-возможностей дисплея.
Просмотрите результаты детекции
Страница автоматически определяет медиа-запрос color-gamut браузера при загрузке. Если показывает «P3 поддерживается», комбинация дисплей + ОС + браузер способна рендерить P3-цвета.
Сравните эксклюзивные образцы
Обратите внимание на область эксклюзивных P3-образцов. Если они выглядят заметно ярче соседних sRGB-контролей (особенно красные и зелёные), ваш дисплей действительно показывает расширенные P3-цвета, а не обрезает до sRGB.
Проверьте продолжение градиента
Найдите маркер границы sRGB на градиентных полосах. На P3-дисплеях градиент продолжает становиться ярче за маркером; на sRGB-дисплеях цвета перестают меняться за маркером — это физический предел гаммы sRGB.
Ключевая терминология P3
color(display-p3)
CSS-функция Level 4, позволяющая указывать P3-цвета напрямую на веб-страницах. Синтаксис: color(display-p3 r g b) со значениями RGB 0–1. Safari поддержал первым; Chrome 111+ и Firefox 113+ тоже поддерживают.
Медиа-запрос Color Gamut
@media (color-gamut: p3) определяет, поддерживает ли устройство пользователя P3. Используйте в CSS или JavaScript window.matchMedia для реализации graceful degradation или progressive enhancement для устройств с разной гаммой.
Клиппинг (обрезка)
Когда P3-цвета отображаются на sRGB-мониторе, значения за пределами sRGB обрезаются до ближайших граничных значений sRGB. Это вызывает потерю насыщенности — яркий P3-оранжевый становится обычным sRGB-оранжевым.
Широкая гамма (Wide Gamut)
Обобщённо — возможности гаммы, превышающие sRGB. DCI-P3 — самый распространённый стандарт широкой гаммы, следом Adobe RGB. Display P3 — дисплейный вариант DCI-P3 от Apple с точкой белого D65.
Какие устройства поддерживают P3
Поддержка гаммы P3 на основных устройствах.
Устройства Apple
Поддержка P3:
• iPad Pro (все): 100% P3.
• MacBook Pro 2016+: 100% P3.
• Pro Display XDR / Studio Display: 100% P3.
Мониторы Windows
Поддержка P3:
• Игровые мониторы (топовые): 90–95% P3.
• Стандартные офисные мониторы: обычно только sRGB.
• Примечание: управление цветом Windows требует поддержки ICC-профилей.
Устройства Android
Поддержка P3:
• Google Pixel 6+: поддержка гаммы P3.
• Устройства среднего класса: обычно только sRGB или чуть ниже.
• Управление цветом Android улучшено начиная с Android 10.
Поддержка браузеров
Рендеринг цвета:
• Chrome 111+: поддержка CSS P3 color function.
• Firefox 113+: поддержка CSS P3 color function.
• Edge: следует за Chromium, синхронизирован с Chrome.
Практики P3-цветов во фронтенде
CSS P3-цвета
Используйте color(display-p3 1 0.2 0.1) для ультранасыщенных брендовых цветов. Сочетайте с @supports и фоллбэк-значениями для обратной совместимости.
Детекция медиа-запросом
@media (color-gamut: p3) { } обеспечивает расширенные цвета для P3-устройств. В JS: matchMedia("(color-gamut: p3)") для динамической детекции.
Графические ресурсы
Отдавайте изображения с профилем Display P3 на P3-устройства. Используйте <picture> + медиа-запросы для загрузки изображений разной гаммы по возможностям устройства.
Graceful Degradation
Всегда предоставляйте sRGB-фоллбэк перед P3-значениями. CSS: color: #ff4500; color: color(display-p3 1 0.3 0); — вторая строка перезаписывает первую.
Часто задаваемые вопросы
Q.Браузер показывает «P3 поддерживается», но экран sRGB?
macOS конвертирует P3-цвета в sRGB-дисплей, поэтому браузер по-прежнему сообщает о поддержке P3 на уровне системы. Но экран физически не может показать расширенные P3-цвета — избыточные значения обрезаются. Сравнение образцов на этой странице помогает проверить реальные возможности дисплея.
Q.P3-цвета влияют на скорость загрузки?
Нет. color(display-p3) — нативное CSS-свойство, не требующее JS-библиотек или ресурсов. Единственное влияние на производительность — изображения со встроенными P3-профилями, которые обычно немного больше sRGB-версий.
Q.Скриншоты iPhone сохраняют P3-цвета?
Да. Скриншоты и фото iPhone по умолчанию используют цветовое пространство Display P3. При отправке на sRGB-устройства цвета конвертируются. Просмотр этих скриншотов на P3-совместимых устройствах показывает более яркие цвета.
Q.Зачем указывать и P3, и sRGB значения?
Подавляющее большинство дисплеев в мире — sRGB. Использование только P3-значений означает, что неподдерживаемые браузеры проигнорируют их или покажут некорректные цвета. Каскадность CSS позволяет написать sRGB-фоллбэк, затем P3-улучшение — браузер автоматически выбирает поддерживаемую версию.
Q.Достаточно ли «95% DCI-P3» у моего дисплея?
Да. 95%+ покрытия DCI-P3 показывает подавляющее большинство расширенных P3-цветов. Различия видны только в крайне насыщенных красно-зелёных пограничных областях. 100% покрытие — скорее маркетинговый аргумент — в реальном использовании 95% и 100% практически неотличимы.
Q.В чём разница между Display P3 и DCI-P3?
Display P3 — вариант Apple с точкой белого D65 (как у sRGB), подходящий для дисплеев. DCI-P3 использует слегка зеленоватую точку белого как стандарт кинопроекции. Оба имеют практически идентичные диапазоны гаммы — различается только точка белого.
Советы по разработке с P3-цветами
- • Синтаксис CSS: color: color(display-p3 1 0.3 0); — значения RGB в диапазоне 0–1, не 0–255.
- • Обратная совместимость: Всегда пишите sRGB-фоллбэк строкой выше P3-значения. Браузер автоматически выбирает поддерживаемое правило.
- • Инструменты отладки: Chrome DevTools color picker уже поддерживает предпросмотр и конвертацию P3-гаммы.
- • Совет дизайнерам: Используйте P3-улучшение только для брендовых цветов, CTA-кнопок и ключевых изображений — не для каждого цвета.