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é.
Čtení na 2 min
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 | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
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 ...).