Колірне охоплення простими словами: sRGB, Display P3 і кольори поза охопленням
Охоплення це набір кольорів, які може показати екран або колірний простір. Веб будувався на sRGB, але більшість телефонів і багато ноутбуків тепер показують Display P3, де помітно яскравіші червоні, зелені й помаранчеві.
2 хв читання
Що таке охоплення
Кожен екран змішує червоне, зелене й синє світло. Найчистіші червоний, зелений і синій, які він може видати, стають вершинами трикутника, і кожен колір усередині цього трикутника входить в охоплення. Кольори поза ним цей екран просто не може показати.
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 ...).