Barevný prostor (color space)

Příklady z praxe

1. 01

   Web s wide gamut fotografiemi

   E-shop s produktovými fotkami chce na moderních displejích ukázat sytější barvy, ale zachovat správný vzhled na starších monitorech. V CSS se hodí zápis přes funkci color() v Display P3 s fallbackem v sRGB. Prohlížeče, které P3 neznají, použijí první deklaraci, ostatní přepíší druhou.

   .badge {
     background: rgb(230 40 20);              /* fallback sRGB */
     background: color(display-p3 0.92 0.16 0.08);
   }
   
   @media (color-gamut: p3) {
     .hero { --accent: color(display-p3 0 0.6 0.4); }
   }

2. 02

   Tmavé okraje textur ve hře

   Textura načtená jako lineární data, přestože byla uložena v sRGB, vypadá po vykreslení vybledle a osvětlení sedí špatně. Řešení je označit sampler formátem se sRGB, aby grafická karta provedla dekódování při čtení a míchání probíhalo ve fyzikálně lineárním prostoru. Normálové a roughness mapy se naopak nahrávají bez sRGB, protože nenesou barvu.

   // barevná (albedo) mapa: sRGB -> GPU dekóduje při čtení
   glTexImage2D(GL_TEXTURE_2D, 0, GL_SRGB8_ALPHA8, w, h, 0,
                GL_RGBA, GL_UNSIGNED_BYTE, albedo);
   
   // normálová mapa: čistě lineární data
   glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, w, h, 0,
                GL_RGBA, GL_UNSIGNED_BYTE, normals);

Časté omyly

MýtusRGB je barevný prostor.

Ve skutečnostiRGB je barevný model, tedy způsob zápisu barvy třemi složkami. Barevným prostorem se stane teprve tehdy, když se doplní primární barvy, bílý bod a přenosová funkce: sRGB, Adobe RGB a Display P3 jsou různé prostory nad stejným modelem.

MýtusVětší gamut je vždy lepší, takže je nejlepší pracovat rovnou v Rec. 2020.

Ve skutečnostiVětší gamut při stejné bitové hloubce znamená hrubší kvantizaci, takže v 8 bitech vznikne pásování v přechodech. Široké prostory dávají smysl až od 10 bitů na kanál a při správně deklarovaných metadatech.

MýtusGama korekce je jen zesvětlení obrazu.

Ve skutečnostiPřenosová funkce je kódovací mechanismus, který nelineárně rozděluje dostupné bity ve prospěch tmavých tónů. Displej ji na výstupu ruší, takže výsledný jas odpovídá záměru; nejde o kosmetickou úpravu jasu.

Časté dotazy

Jaký barevný prostor zvolit pro obrázky na web?

Pro běžnou webovou grafiku zůstává sRGB bezpečnou volbou, protože prohlížeče i starší displeje ho předpokládají jako výchozí. Fotografie s výraznými sytými odstíny má smysl exportovat v Display P3 s vloženým ICC profilem a nechat prohlížeč provést převod. Klíčové je profil skutečně vložit nebo alespoň nastavit metadata v PNG či AVIF: nedeklarovaný wide gamut obrázek se zobrazí přesycený. U ikon a UI prvků naopak profily jen zvětšují soubor a nic nepřinášejí.

Proč gradient mezi modrou a žlutou obsahuje šedý pás?

Šedé místo uprostřed gradientu vzniká interpolací v sRGB, kde se míchají nelineární kódované hodnoty. Cesta mezi dvěma komplementárními odstíny prochází blízko neutrální osy a výsledek působí vybledle. Interpolace v percepčně uniformním prostoru, například Oklab nebo LCH, vede přechod po hraně barevného kruhu a šedé místo zmizí. Moderní CSS to umožňuje zápisem interpolačního prostoru přímo v deklaraci gradientu, takže není potřeba generovat mezikroky ručně.

Co dělá ICC profil a kdy ho potřebuji?

ICC profil je soubor s popisem barevného chování konkrétního zařízení nebo prostoru: obsahuje primární barvy, bílý bod a tónovou křivku, případně převodní tabulky. Systém správy barev podle něj počítá převod mezi vstupem a výstupem. Profil je potřeba všude, kde obrázek putuje mezi zařízeními s odlišnými vlastnostmi, tedy při tisku, fotografické retuši nebo publikaci wide gamut materiálu. U interní grafiky, která nikdy neopustí sRGB workflow, přidaná hodnota profilu klesá.

Jak souvisí HDR s barevným prostorem?

HDR rozšiřuje barevný prostor o rozsah jasu. Vedle širších primárních barev, obvykle Rec. 2020, mění hlavně přenosovou funkci: místo klasické gama křivky se používá PQ (SMPTE ST 2084) nebo HLG, které kódují jas v absolutních nitech až do řádu tisíců. Proto nelze HDR obraz jen tak zobrazit na SDR displeji; potřebuje tone mapping, který vysoké jasy stlačí do dostupného rozsahu, a zároveň mapování gamutu.

Zdroje

1. CSS Color Module Level 4(otevře se v novém okně)W3C, 2024
2. Applying color: HTML, CSS and SVG(otevře se v novém okně)MDN Web Docs
3. Color space(otevře se v novém okně)Wikipedia
4. OpenGL Registry(otevře se v novém okně)Khronos Group

Související pojmy

• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.
• PixelPixel je nejmenší adresovatelný prvek rastrového obrazu, kterému lze přiřadit jednu barvu. Digitální fotografie, obsah obrazovky i textura ve hře jsou mřížkou pixelů uspořádaných do řádků a sloupců. Ve webovém designu navíc CSS pixel neznamená fyzický bod displeje, ale referenční jednotku délky nezávislou na hustotě zobrazovače.
• RozlišeníRozlišení je počet rozlišitelných vzorků obrazu, displeje nebo vykreslovací plochy, nejčastěji vyjádřený v pixelech na šířku a výšku. Určuje, kolik detailu lze zobrazit nebo zpracovat, ale samo o sobě neříká nic jistého o fyzické velikosti, ostrosti, kvalitě panelu ani výkonu aplikace.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Alt atributAlt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.
• Ambient occlusionAmbient occlusion je technika stínování, která u každého bodu povrchu odhaduje, jak velká část okolní polokoule oblohy je zastíněna blízkou geometrií, a podle toho ztlumí rozptýlené okolní světlo. Výsledkem jsou tmavší kouty, spáry, záhyby a místa dotyku objektů, díky nimž scéna působí prostorově a objekty vypadají skutečně položené na podložce.