CSS – míchání barev

Jednou z novějších vymožeností CSS je funkce color-mix(), která umožňuje míchat barvy. Může se vyskytnout všude tam, kde je očekávána barva. Její základní tvar je:

color-mix(metoda, barva_1, barva_2)

Metoda určuje především barevný prostor, ve kterém se bude míchat. Do něj se barvy převedou a v něm se spočítají barevné složky z příslušných složek obou výchozích barev v uvedeném poměru. Má-li míchání proběhnout v prostoru RGB, použijte in srgb, naproti tomu in oklch bude míchat v prostoru LCH.

Barevný prostor má významný vliv na výslednou barvu. Můžete si to vyzkoušet v interaktivním příkladu, kde zadáte výchozí barvy a můžete přepínat barevné prostory pro jejich míchání a sledovat výsledek.

Je-li prostor pro míchání barev polární, tedy pracuje s odstíny barev na barevném kruhu, můžete ještě přidat pokyn, kterou částí kruhu má procházet míchání odstínů. Na výběr jsou následující možnosti:

• shorter hue – kratší cestou mezi oběma odstíny
• longer hue – delší cestou
• increasing hue – od prvního odstínu směrem k vyšším hodnotám
• decreasing hue – od prvního odstínu směrem k nižším hodnotám

Jejich účinek znázorňuje následující obrázek:

Barvy lze zadat v libovolném formátu a za hodnotou barvy může následovat její mezerou oddělený podíl při míchání v procentech. Neuvedete-li procenta u jedné z barev, dopočítají se podle druhé, aby součet byl 100%. Neuvedete-li procenta ani u jedné, budou se míchat půl na půl:

Jestliže uvedete procenta u obou barev a jejich součet je větší než 100%, upraví se tak, aby jejich součet byl 100% a jejich vzájemný poměr zůstal zachován. Je-li součet menší než 100%, bude výsledná barva částečně průhledná.