Vytváření barevné palety krok za krokem
Jak sestavit harmonickou paletu pěti až osmi barev, která funguje na všech zařízeních a respektuje WCAG standardy.
Proč je správná paleta důležitá
Barvy nejsou jen věc estetiky. Správná paleta ovlivňuje čitelnost, dostupnost a jak se lidé cítí na vašem webu. Když se do toho pustíte pořádně, není to tak složité, jak se zdá.
Budeme pracovat s minimalistickým přístupem — pět až osm barev je ideální počet. Víc není lépe. Mít sedm dobře vybraných barev, které spolu hrají, je lepší než dvacet chaotických.
Pět kroků k vaší paletě
Následujte tuto metodiku a vybudujete paletu, která bude fungovat ve všech situacích.
Vyberte si základní barvu
Začněte s jednou barvou, kterou máte rádi. To bude váš primární accent. Nemusí to být barva loga — může to být cokoliv, co vás inspiruje. Třeba tmavá modrá, teplý terracotta nebo lesní zelená. Tato barva bude základ všeho.
Vytvořte variace vaší barvy
Vezměte si barvu a udělejte z ní tři verze — světlejší, normální a tmavší. Nepoužívejte jen černou nebo bílou pro ztemnění. Pracujte se saturací a jasem. Právě tímto způsobem vznikne přirozené spektrum, které vypadá promyšleně.
Přidejte doplňkovou barvu
Zvolte barvu, která je na barevném kruhu opačně od vaší primární. Nemusí být přímo opačná — může být jen komplementární. Pokud máte modrou, zkuste oranžovou nebo teplou žlutou. Tato barva přidá kontrast a zajímavost.
Zvolte neutrály
Potřebujete dvě až tři neutrální barvy — ideálně grayscale tóny. Jedna světlá (pro pozadí), jedna tmavá (pro text), jedna střední (pro prvky). Není to o bílé a černé. Pracujte s přirozenými šedivkami nebo velmi slabě nasycenými barvami.
Testujte dostupnost
Vezměte si dva barvy a ověřte si, zda mají dostatečný kontrast. WCAG AA standard vyžaduje poměr alespoň 4,5:1 pro text. Používejte WebAIM nebo Contrast Ratio nástroje. Není to zbytečná byrokracie — je to o tom, aby vás všichni četli.
Praktický příklad — od teorie k praxi
Pojďme si ukázat na konkrétním příkladu. Řekněme, že pracujete na webu pro startup zabývající se vzdělávacími kurzy. Chcete, aby web vypadal důvěryhodně, ale také přívětivě.
Primární barva: Hluboká indigová modř (#3F51B5) — přirozená, vědecká, důvěryhodná.
Z indigové si vytvoříte světlejší verzi pro tlačítka a akcenty (#5C6BC0) a velmi světlou pro pozadí sekcí (#EEF0F7). Pak přidáte doplňkový tón — teplou oranžovou (#FF7043) — pro varovné zprávy a zvýraznění důležitých informací.
Pro neutrály si zvolíte tmavou šedou (#263238) pro text, světlou šedou (#ECEFF1) pro pozadí a střední šedou (#90A4AE) pro méně důležité prvky. Zkontrolujete si, že indigová s tmavou šedou má kontrast 8,2:1 — vítěz. Oranžová s bílou má 5,1:1 — také v pořádku.
Nástroje, které vám pomohou
Nemusíte být barvař. Jsou nástroje, které to zvládnou za vás — nebo vás aspoň pošlou správným směrem.
Coolors.co
Generátor palet. Stisknete spacebar a dostanete novou kombinaci. Není to dokonalé, ale je to skvělý začátek. Můžete zamknout barvy, které se vám líbí, a regenerovat zbytek.
Adobe Color
Pokud chcete více kontroly, Adobe Color vám dá barevný kruh a různé harmonické schéma — doplňkové, analogické, triadické. Můžete vidět, jak spolu barvy hrají.
WebAIM Contrast Checker
Nejdůležitější nástroj. Zkontrolujete, zda vaše barvy mají dostatečný kontrast. Vlepíte hex kódy a hned vidíte, zda to splňuje WCAG AA nebo AAA.
Figma Color Picker
Pokud pracujete v Figmě, máte všechno na jednom místě. Kontrastní poměry vidíte přímo, můžete měnit barvy a vidět efekt v reálném čase.
Chyby, kterých se vyvarujete
Nemusíte si projít všechny chyby sami. Tady jsou ty nejčastější, které vidíme znovu a znovu.
Příliš mnoho primárních barev
Lidé si často myslí, že víc barev = víc zájímavosti. Není to tak. Pět až osm barev je maximum. Pokud máte dvanáct, web vypadá chaoticky a návštěvník neví, na co se koukat.
Ignorování kontrastu
Když dáte světlou šedou text na světle šedé pozadí, není vidět. Testujte, testujte, testujte. Vaši uživatelé s slabším zrakem vám budou vděční.
Nekonzistence napříč zařízeními
Barva na počítači vypadá jinak než na mobilu. Normální věc. Ale když si to neověříte, překvapí vás. Otestujte paletu na telefonech, tabletech a monitoru.
Máte paletu?
Není to nejlehčí práce, ale je to práce, kterou stojí za to udělat pořádně. Správná paleta vám usnadní celý proces designu. Budete mít jasné pravidlo, které bude říkat — tuto barvu tady používáme, tuto tam.
Začněte s jednou barvou, kterou máte rádi. Postupujte podle kroků. Testujte. Nebuďte tak úzkostliví — barvy se dají vždy změnit. Ale když si to do teď vypracujete, všechno ostatní bude snazší.
Zpět na články
Poznámka k obsahu
Tento článek slouží čistě pro vzdělávací a informační účely. Postupy a doporučení jsou založeny na běžných praktikách v designu a web vývojářství. Každý projekt je unikátní a výběr barev by měl vycházet z konkrétních potřeb vaší značky a cílové skupiny. V případě profesionálního návrhu doporučujeme konzultaci s kvalifikovaným designérem nebo designérkou, který či která má zkušenost s vašimi specifickými požadavky.