Gamut barw w praktyce: sRGB, Display P3 i kolory spoza gamutu
Gamut to zbiór kolorów, które może pokazać ekran lub przestrzeń barw. Sieć powstała na sRGB, ale większość telefonów i wiele laptopów wyświetla dziś Display P3, w którym czerwienie, zielenie i pomarańcze są wyraźnie żywsze.
2 min czytania
Czym jest gamut
Każdy ekran miesza czerwone, zielone i niebieskie światło. Najczystsza czerwień, zieleń i niebieski, jakie potrafi wytworzyć, wyznaczają wierzchołki trójkąta, a każdy kolor wewnątrz tego trójkąta należy do jego gamutu. Kolorów spoza niego ten ekran po prostu nie pokaże.
sRGB, Display P3 i Rec. 2020
sRGB to standard sieci i większości monitorów sprzedawanych przed 2016 rokiem. HEX, rgb() i hsl() opisują kolory w sRGB.
Display P3 obejmuje mniej więcej o jedną czwartą więcej kolorów niż sRGB, głównie żywe zielenie, czerwienie i pomarańcze. Korzystają z niego iPhone’y, iPady, Maki oraz wiele telefonów z Androidem i laptopów z wyższej półki. W CSS zapisuje się go jako color(display-p3 r g b) albo jako wartość OKLCH z wysoką chromą.
Rec. 2020 jest jeszcze większy i służy do wideo HDR. Bardzo niewiele ekranów pokrywa go w całości.
| Format | Wartość |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Co się dzieje z kolorami spoza gamutu
Jeśli kolor w CSS wychodzi poza gamut ekranu, przeglądarka musi pokazać coś innego. Proste przycinanie obcina każdy kanał do limitu i może zmienić barwę. CSS Color 4 zaleca zamiast tego mapowanie gamutu w OKLCH: zachowaj jasność i barwę, a obniżaj chromę, aż kolor się zmieści.
PickShade oznacza każdy kolor spoza sRGB i pokazuje zmapowany zamiennik, więc wiesz dokładnie, co zobaczą osoby ze starszymi ekranami.
Bezpieczne używanie kolorów P3 w CSS
Najpierw wpisz zapasową wartość sRGB, a po niej wartość z szerokiego gamutu, albo umieść żywy kolor w zapytaniu media 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);
}
}Pytania i odpowiedzi
Jak sprawdzić, czy kolor mieści się w sRGB?
Wklej go do PickShade. Każdy kolor spoza sRGB dostaje ostrzeżenie o gamucie razem z najbliższym kolorem, który się mieści.
Czy kolory P3 działają w Windows?
Tak, jeśli monitor pokrywa P3, a przeglądarka zna profil wyświetlacza. Na ekranie sRGB przeglądarka sprowadza kolor do sRGB, więc nic się nie psuje.
Czy HEX jest ograniczony do sRGB?
Tak. HEX, rgb(), hsl() i hwb() zawsze opisują kolory w sRGB. Do kolorów z szerokiego gamutu używaj oklch() lub color(display-p3 ...).