Barevné modely, prostory a jejich využití v CSS

Barevné modely a prostory

Barevné modely jsou matematické předpisy (funkce), které popisují barvy na základě podílu jejich jednotlivých složek. Složkami mohou být základní barvy, což známe například z RGB, nebo to mohou být i složitější parametry. Všechny barvy, které lze daným modelem vyjádřit, jsou poté součástí barevného prostoru. Rozdíl mezi modelem a prostor je tedy v tom, že model je matematická funkce a prostor jsou všechny možné výsledky této funkce.

RGB a CMY(K)

Nejznámějším modelem, který je používaný, je bezesporu RGB. Jedná se o jeden ze dvou modelů, který je postavený na míchání základních barevných složek. Základními složkami RGB modelu jsou červená, zelená a modrá. Oproti tomu u modelu CMY(K) jsou to azurová, purpurová, žlutá a dost často se rozšiřuje i o černou. RGB model využívá součet jednotlivých složek na černém pozadí, proto když je hodnota barvy #000000 (žádná ze složek není ve výsledné barvě obsažena) je výsledná barva černá. CMY(K) je postavený na opačném principu, a to odečítání jednotlivých složek z bílého pozadí. RGB model se využívá především při vykreslování na obrazovce, naopak CMY(K) je ideální díky svému skládání barev na bílém pozadí pro tisk.

Každé RGB není jako RGB. RGB je obecný předpis, podle kterého jde skládat barvy, existují ale i další modely, které z něj vychází. Liší se tím, kolik barev dokáží obsáhnout. Ze zkušeností práce s CSS máme v RGB prostoru celkem 256³ možných barev. Prostor, který známe právě z CSS, je ve skutečnosti sRGB a je jeden z nejpoužívanějších. Co když ale chceme vyjádřit barvu přesněji, která její zahrnuta v prostoru sRGB? Pak musíme sáhnout po Adobe RGB nebo po ještě obsáhlejším prostoru ProPhoto RGB.

HSV, HSL a další

Mezi méně známější, ale přesto používané modely, patří HSV a HSL. Navzájem jsou si velmi podobné. To je zapříčiněné tím, že HSL vychází s HSV, přičemž odstraňuje nějaké jeho nedostatky. HSV je model, který je nejvíce intuitivní k lidskému pohledu na barvy. Obsahuje tři složky - odstín (hue), sytost (saturation) a jas (value). HSL se liší způsobem, jakým se barvy skládají a tím, že má místo jasu světlost. Oba modely se zapisují ve formátu tří hodnot. První je úhel, druhá a třetí je pak procento. V CSS se používá pouze HSL. Poslední barevný model, který zmíním, je HWB. Skládá se z odstínu (hue), bělosti (whiteness) a černosti (blackness). Odstín má opět hodnotu úhlu 0° - 360°, ostatní jsou procenta 0 - 100%.

Vyzkoušet si vzájemné rozdíly jednotlivých modelů a jejich zápis můžete například zde: https://colorpicker.me/.

HSV

HSL

Novinky v zápisu barev v CSS

Před nedávnem se v css objevila nová funkce s název color - využití barevného prostoru. Takto funkce je podle caniuse podporovaná ve všech moderních prohlížečích. Kromě funkce color byly představeny ještě dvě další rozšíření, konkrétně @media color-gamut (kontrola podpory barevného modelu prohlížečem) a @color-profile (definování vlastního barevného modelu).

Funkce color přebírá několik parametrů. Prvním je barevný prostor (profil), dále pak jednotlivé složky pro tvorbu barvy a posledním, který je volitelný, je alpha kanál - průhlednost. Nespornou výhodou této funkce je možnost vyjadřovat barvy v různých prostorech podle toho, jaké zařízení podporuje. Pak je možné barevně bohatěji poskytovat uživateli aplikaci či web. Jde například rozhodnout, zda se uživatel nachází na zařízení podporující prostor display-p3 (jedná se především o Apple zařízení) a pak mu může zobrazit barvu z tohoto prostoru. Pokud jsou jednotlivé složky RGB modelu větší než 1 nebo menší než 0, tak není barva daným prostorem vyjádřitelná. Například barva v prostoru ProPhoto color(prophoto-rgb 0.88 0.45 0.10) není v prostoru display-p3 obsažená, což se vyjádří po převodu hodnotou color(display-p3 1.0844 0.43 0.1).

Ukázka

Pro lepší představu jsem Vám připravil ukázku využití funkce color a @media color-gamut. Pokud máte například MacBook nebo jiné zařízení podporující rozšiřený prostor RGB, tak uvidíte více než jeden červený čtverec. Nejlepší je připojit si monitor, který má podporu pouze sRGB a okno prohlížeče si přesouvat mezi sRGB monitorem a monitorem, který má větší prostor.