Získali jsme 2. místo v AI Digital Data Hackathonu
PŘEČÍST ČLÁNEK
Cornsilk, thistle, seashell, gainsboro, levanderblush, beige, siena ... To nejsou žádná zaklínadla, ale jména barev. Je jich dohromady 140 a je to jen jedna z mnoha možností, jak můžeme v CSS zapsat barvu. Je to sice hodně omezená množina, ovšem pro zápis velice uživatelsky přívětivá.
Najdou se tu ale i paradoxy, které vznikly v průběhu času. Například barva darkgray je ve skutečnosti světlejší než barva gray.
Nejstarší barevný formát v CSS je zápis RGB (red / green / blue). Barva se tvoří pomocí takzvaného aditivního míchání barev. Jednotlivé složky barev se sčítají a vytváří světlo větší intenzity. Je to podobné, jako u formátu CMYK (cyan / magenta / yellow / black), který známe spíše ze světa tisku, kde je proces obrácený (subtraktivní míchání barev).
color: rgb(255 0 0 / 0.5);
nebo pomocí hex kódu.
color: #FFFF0050;
Tento poslední způsob je bezkonkurenčně nejkratší, takže ho nejdeme v drtivé většině CSS souborů. Je ale také bohužel bezkonkurenčně nejméně čitelný. Obzvláště ve variantě se zapsaným alfa kanálem (kanálem průhlednosti). V tomto ohledu je daleko přívětivější následující formát.
Tento formát je v CSS už poměrně dlouho, od IE verze 9. Barevný model, ze kterého je formát HSL odvozen je také poměrně starý. Vytvořil ho už v roce 1978 Alvy Ray Smith.
Jako první parametr funkce hsl() zapisujeme barvu, druhý je saturace a pak světlost.
color: hsl(0deg 100% 50%);
Takový zápis dává v dnešní době možnost použít CSS custom properties a definovat jednotlivé složky barvy nezávisle. To nám umožňuje, že bychom měli definovanou barvu pomocí hue a saturation a její odstíny vytvářeli ad hoc, podle potřeby.
:root {
--primary-hs: 250 30%;
}
color: hsl(var(--primary-hs), 30%);
Podobné barevné schéma, jako HSL používá formát HSB (hue / saturation / brightness). S ním se můžeme setkat především v různých grafických softwarech, např. Figma. Na to si dejte pozor. V CSS totiž funkce pro hsb neexistuje.
Pamatujete ještě dobu, kdy polovinu stolu zabíral obrovský CRT monitor? Klasická "CRTéčka" dlouho dominovala v reprezentaci barev. V dnešní době jdou ale OLED a QLED displeje daleko dál. A proto ani barevný prostor sRGB, který býval standardem pro zobrazení barev na webu, a ve kterém se pohybují výše zmíněné formáty, už přestává stačit. sRGB a 16,7 milionů barev je už dnes prostě málo.
Do nových barevných prostorů můžeme v CSS proniknout pomocí funkce color(), kterou podporují všechny moderní prohlížeče.
color: color(display-p3 1 0 0);
Od letošního roku začínají prohlížeče implementovat nové barevné formáty založené na rozsáhlejších barevných prostorech. Konkrétně se jedná o LAB (lightness / a-axis / b-axis) a LCH (lightness / chroma / hue).
color: lab(80% -80 -100);
color: lch(80% 100 50);
Oba vychází z barevného prostoru CIE LAB, který vznikl už v roce 1976. Co je na něm pro nás přelomové je fakt, že zde barvy odpovídají přirozenému lidskému vnímání barev. Co to znamená?
Představte si, že budete chtít nakódovat jednoduchou alert komponentu, která bude mít barevné pozadí, levý okraj tmavším odstínem a ještě tmavší text, s dostatečným kontrastem. Typ alertu by se měnil pouze změnou hue parametru. V případě staršího formátu hsl() je tento koncept nepoužitelný, protože se lidskému vnímání přirozená světlost mění podle konkrétní barvy. U nového formátu lch() tento problém odpadá.
Lea Verou (známá osobnost ve světě CSS a členka W3C konsorcia) vytvořila tento komplexnější příklad, kde pomocí css custom properties řeší podobnou komponentu v několika barevných variantách, a to dokonce pro light i dark téma.
Na použití lch() formátu v praxi si budeme muset ještě chvilku počkat. V době vzniku tohoto článku měl 85% podporu. Vzhledem k tomu, s jako dynamikou a rychlostí probíhá vývoj na všech majoritních prohlížečích, domnívám se, že nebudeme čekat moc dlouho.
.png)
.jpg)
