# Колірне охоплення простими словами: sRGB, Display P3 і кольори поза охопленням

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

Джерело: https://pickshade.com/uk/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/uk/convert/hex-to-p3)
- [Вибір кольору в OKLCH з попередженням про охоплення](https://pickshade.com/uk)
- [OKLCH простими словами](https://pickshade.com/uk/oklch)

## Схожі статті

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