Цветовой охват: sRGB, Display P3 и цвета за пределами охвата
Охват это набор цветов, который может показать экран или описать цветовое пространство. Веб вырос на sRGB, но большинство телефонов и многие ноутбуки уже показывают Display P3, где заметно ярче красные, зелёные и оранжевые.
Что такое охват
Любой экран смешивает красный, зелёный и синий свет. Самые чистые красный, зелёный и синий, которые он может выдать, задают углы треугольника, и всё внутри этого треугольника и есть его охват. Цвета снаружи этот экран показать не может.
sRGB, Display P3 и Rec. 2020
sRGB это стандарт веба и большинства мониторов, выпущенных до 2016 года. HEX, rgb() и hsl() описывают цвета sRGB.
Display P3 охватывает примерно на четверть больше цветов, чем sRGB, в основном яркие зелёные, красные и оранжевые. Его используют iPhone, iPad, Mac, многие Android-смартфоны и дорогие ноутбуки. В CSS он пишется как color(display-p3 r g b) или как OKLCH с высокой насыщенностью.
Rec. 2020 ещё шире и используется в HDR-видео. Полностью его покрывают единицы экранов.
| Формат | Значение |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Что происходит с цветами вне охвата
Если цвет в CSS не помещается в охват экрана, браузер показывает что-то другое. Простое обрезание срезает каждый канал до предела и может сдвинуть тон. CSS Color 4 рекомендует вместо этого отображение охвата в OKLCH: сохранить светлоту и тон и снижать насыщенность, пока цвет не поместится.
PickShade отмечает каждый цвет за пределами sRGB и показывает замену, так что вы точно знаете, что увидят люди на старых экранах.
Как безопасно использовать P3 в CSS
Сначала пишите запасной цвет в sRGB, потом широкий, или оборачивайте яркое значение в медиазапрос color-gamut.
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}Вопросы и ответы
Как понять, что цвет помещается в sRGB?
Вставьте его в PickShade. Для любого цвета вне sRGB появится предупреждение об охвате и ближайший цвет, который помещается.
Работают ли P3-цвета в Windows?
Да, если монитор покрывает P3 и браузер знает профиль дисплея. На sRGB-экране браузер переведёт цвет в sRGB, так что ничего не сломается.
HEX ограничен sRGB?
Да. HEX, rgb(), hsl() и hwb() всегда описывают цвета sRGB. Для широкого охвата используйте oklch() или color(display-p3 ...).