CSS – odvozené barvy

Na stránkách se docela často vyskytují barvy odvozené od určité základní. Typický příklad: organizace má ve své vizuální identitě definovánu „firemní barvu“ a na webu se vyskytuje také její tmavší a světlejší variace, případně barva doplňková.

Toho se dá dosáhnout několika způsoby. Jednotlivé barvy lze samozřejmě nastavovat ručně, smíchat s černou či bílou, nebo lze vytvořit CSS proměnné pro jednotlivé barevné složky, z nich barvy skládat a příslušnou složku vždy vhodně upravit. Zde se podívejme na jednu z novějších schopností CSS, která je pro tento účel přímo určena: relativní barvy.

Dělají přesně to, co potřebujeme. Když definujete relativní barvu, určíte výchozí barvu a způsob, jakým mají být upraveny její barevné kanály. Úprava probíhá v určitém barevném prostoru, který lze určit dvěma způsoby: Buď použijete barevnou funkci pro daný prostor, nebo použijete obecnou funkci color a barevný prostor uvedete za výchozí barvou. Například odvození v prostoru RGB zajistí jedna z následujících možností:

rgb(from výchozí_barva kanálR kanálG kanálB)
color(from výchozí_barva rgb kanálR kanálG kanálB)

Odvozovat lze v libovolném barevném prostoru, který je v CSS podporován. Řekněme si otevřeně, že RGB není pro tento účel ideální. Vhodnější jsou prostory, které pracují s odstínem, sytostí a světlostí barvy, protože právě s nimi obvykle chceme pracovat. Nejčastěji se proto odvozuje v prostorech HSL nebo LCH.

Při definici kanálů máte k dispozici písmena, která odpovídají barevným kanálům daného prostoru. Představují hodnotu příslušného kanálu výchozí barvy. Odvozujete-li v prostoru RGB, máte tedy k dispozici r pro intenzitu červené složky původní barvy, g pro zelenou a b pro modrou. Analogicky v prostoru HSL přistupujete ke kanálům h, s a l pro odstín, sytost a světlost.

V následující skupině příkladů ještě zůstanu u prostoru RGB, který sice není ideální, ale je dobře známý. Budu experimentovat s naší univerzitní fialovou barvou #5948ad. V prvním příkladu jsem barevné kanály ponechal beze změny, takže dostanu původní barvu. Ve druhém jsem červený kanál přepsal konstantou na maximální možnou hodnotu 255, ve třetím prohodil zelený a modrý kanál, ve čtvrtém nastavil všem kanálům stejnou intenzitu podle původního červeného a v pátém zmenšil červený kanál původní barvy na polovinu:

Právě kombinace funkce calc() s barevným prostorem typu HSL nebo LCH představuje ideální nástroj pro vytváření variací původní barvy. Vrátím se k naší univerzitní fialové (všimněte si, že nijak nevadí, když výchozí barvu zadám v RGB, ale odvozování provádím v HSL) a vytvořím její tmavší, světlejší, rozjásanější a inverzní odvozeninu.

Do hry lze vždy zapojit ještě průhlednost. Uvádí se za kanály a odděluje od nich lomítkem. Hodnotou může být reálné číslo od 0 (zcela průhledná) do 1 (zcela neprůhledná), nebo procenta. Není-li průhlednost definována, převezme se z výchozí barvy. Na původní průhlednost se lze odkázat jako na kanál alpha.

V následujících příkladech naší výchozí fialové upravím průhlednost na 60% nejprve konstantou a následně výpočtem z původního alfa kanálu, jehož hodnotou je 100%. V dalších třech příkladech jsem 60% průhlednost zařadil již do výchozí barvy. Nejprve ji zachovám, následně změním na 100% a v posledním příkladu vypočtu 60% z 60%, čili hodnotou bude 36% a barva je velmi průhledná: