# Цветовой охват: sRGB, Display P3 и цвета за пределами охвата

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

Источник: https://pickshade.com/ru/gamut
Обновлено: 2026-09-28

## Что такое охват

Любой экран смешивает красный, зелёный и синий свет. Самые чистые красный, зелёный и синий, которые он может выдать, задают углы треугольника, и всё внутри этого треугольника и есть его охват. Цвета снаружи этот экран показать не может.

## 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 | #ff5733 |
| Display P3 | color(display-p3 0.92577 0.38907 0.25797) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| Rec. 2020 | color(rec2020 0.81266 0.37868 0.19735) |

## Что происходит с цветами вне охвата

Если цвет в 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 ...).

## Инструменты

- [Конвертер HEX в Display P3](https://pickshade.com/ru/convert/hex-to-p3)
- [Пикер OKLCH с предупреждением об охвате](https://pickshade.com/ru)
- [OKLCH простыми словами](https://pickshade.com/ru/oklch)

## Похожие статьи

- [OKLCH простыми словами: формат цвета, который совпадает с глазом](https://pickshade.com/ru/oklch)
- [CSS color-mix() и относительные цвета: оттенки, hover и прозрачность](https://pickshade.com/ru/css-color-mix)
- [Форматы цвета: HEX, RGB, HSL, OKLCH и остальные](https://pickshade.com/ru/color-formats)