# 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.

Źródło: https://pickshade.com/pl/gamut
Zaktualizowano: 2026-09-28

## 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 | #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) |

## 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 ...).

## Narzędzia

- [Konwerter HEX na Display P3](https://pickshade.com/pl/convert/hex-to-p3)
- [Próbnik kolorów OKLCH z ostrzeżeniem o gamucie](https://pickshade.com/pl)
- [Czym jest OKLCH](https://pickshade.com/pl/oklch)

## Powiązane poradniki

- [OKLCH: format koloru, który wreszcie zgadza się z tym, co widzi oko](https://pickshade.com/pl/oklch)
- [CSS color-mix() i kolory względne: rozjaśnienia, hover i przezroczystość](https://pickshade.com/pl/css-color-mix)
- [Formaty kolorów w praktyce: HEX, RGB, HSL, OKLCH i pozostałe](https://pickshade.com/pl/color-formats)