# Barevný gamut srozumitelně: sRGB, Display P3 a barvy mimo gamut

Gamut je množina barev, kterou obrazovka nebo barevný prostor dokáže zobrazit. Web vznikl na sRGB, ale většina telefonů a mnoho notebooků dnes zobrazuje Display P3, který má znatelně živější červené, zelené a oranžové.

Zdroj: https://pickshade.com/cs/gamut
Aktualizováno: 2026-09-28

## Co je gamut

Každá obrazovka míchá červené, zelené a modré světlo. Nejčistší červená, zelená a modrá, které umí vytvořit, tvoří vrcholy trojúhelníku a každá barva uvnitř tohoto trojúhelníku leží v jejím gamutu. Barvy mimo něj na dané obrazovce zobrazit prostě nejde.

## sRGB, Display P3 a Rec. 2020

sRGB je výchozí prostor webu i většiny monitorů prodaných před rokem 2016. HEX, rgb() i hsl() popisují barvy v sRGB.

Display P3 pokrývá zhruba o čtvrtinu více barev než sRGB, hlavně živé zelené, červené a oranžové. Používají ho iPhony, iPady, Macy a mnoho telefonů s Androidem a prémiových notebooků. V CSS se zapisuje jako color(display-p3 r g b) nebo jako hodnota OKLCH s vysokou hodnotou chroma.

Rec. 2020 je ještě větší a používá se pro HDR video. Plně ho pokrývá jen velmi málo obrazovek.

| Formát | Hodnota |
| --- | --- |
| 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 se stane s barvami mimo gamut

Pokud je barva z CSS mimo gamut obrazovky, prohlížeč musí zobrazit něco jiného. Prosté oříznutí (clipping) seřízne každý kanál na hranici a může změnit barevný tón. CSS Color 4 místo toho doporučuje mapování gamutu v OKLCH: zachovat světlost a tón a snižovat chroma, dokud se barva nevejde.

PickShade označí každou barvu, která leží mimo sRGB, a ukáže namapovanou náhradní barvu, takže přesně víte, co uvidí lidé se staršími obrazovkami.

## Jak bezpečně používat barvy P3 v CSS

Nejdřív napište záložní hodnotu v sRGB a až za ni hodnotu se širokým gamutem, nebo živou hodnotu zabalte do media query 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);
    }
}
```

## Otázky a odpovědi

### Jak poznám, jestli barva leží v sRGB?

Vložte ji do PickShade. Každá barva mimo sRGB dostane varování o gamutu spolu s nejbližší barvou, která se do něj vejde.

### Fungují barvy P3 ve Windows?

Ano, pokud monitor pokrývá P3 a prohlížeč zná profil displeje. Na obrazovce se sRGB prohlížeč barvu převede do sRGB, takže se nic nerozbije.

### Je HEX omezený na sRGB?

Ano. HEX, rgb(), hsl() a hwb() vždy popisují barvy v sRGB. Pro barvy se širokým gamutem použijte oklch() nebo color(display-p3 ...).

## Nástroje

- [Převodník HEX na Display P3](https://pickshade.com/cs/convert/hex-to-p3)
- [Výběr barvy OKLCH s varováním o gamutu](https://pickshade.com/cs)
- [OKLCH srozumitelně](https://pickshade.com/cs/oklch)

## Související návody

- [OKLCH srozumitelně: barevný formát, který konečně odpovídá vašemu oku](https://pickshade.com/cs/oklch)
- [CSS color-mix() a relativní barvy: světlejší varianty, hover a průhlednost](https://pickshade.com/cs/css-color-mix)
- [Barevné formáty srozumitelně: HEX, RGB, HSL, OKLCH a další](https://pickshade.com/cs/color-formats)