Proč je výběr barev důležitý?

---

---

Konzistence

Jednou z nejčastějších asociací s jakýmkoli brandem je právě barva. Víme, že Coca-Cola je červená, Facebook modrý, Alza zelená atd. Tyto a další příklady nám dobře ilustrují důležitost konzistentního výběru barevné palety pro snadnější identifikaci daného brandu.

---

Ukázka brandu Coca-Coly (Obrázek: Twitter)

---

Ukázka brandu Facebooku (Obrázek: Designweek)

---

Ukázka Alzáka v podobě uměleckého počinu českého umělce Jonáše Strouhala, který použil jeden z velmi rozpoznatelných charakteristik této značky (Obrázek: Interez)

---

• odkaz na epizodu s designérem Instagramu

---

Význam

Každá barva má svůj psychologický význam a vzbuzuje v nás různou paletu emocí. Platí to i pro vizuální komunikaci, kde je rozumné zvážit i tento aspekt, aby barevná paleta dobře komunikovala zaměření, vizi nebo celkový dojem ze značky.

---

Ukázka největších značek fastfoodů, které využívají červenou barvu jako barvu, která má potenciál vyvolávat hlad (Loga: Worldvectorlogo)

---

Ukázka největších hardwarových značek, které využívají modrou barvu jako barvu, jejíž racionální význam dobře reprezentuje technologický segment (Loga: Worldvectorlogo)

---

Modrou barvu využívá i mnoho policejních útvarů napříč zeměmi s cílem vzbuzovat důvěru (Foto: Idnes)

---

Zútulňování interiérů často probíhá v podobě využívání množství zelených rostlin (Foto: Aastivastore)

---

Na tento aspekt však platí množství výjimek, které jsou popsané níže.

---

Jak poskládat barevnou paletu?

---

Levandulově růžová nebo lososově krémová? Výběr správné barevné palety pro určitý projekt může být náročné rozhodování a může být do velké míry otázkou citu a intuice. Přesto existuje několik vodítek, jak k výběru barevné palety přistupovat prakticky a jak si zjednodušit rozhodování.

Ukázka celé barevné palety (Obrázek: Wikipedia)

---

2 základní otázky při výběru barevné palety

---

1. Psychologie barev – Jak bude barevná paleta působit ve vybraném prostředí?

Každá barva má jistý psychologický význam, který si s ní spojujeme. Pro každou kulturu však mohou být tyto významy odlišné, je proto dobré vědět:

• pro jaké prostředí/region vzniká náš design,
• s jakými barvami je náš produkt/služba v daném prostředí asociovaná

---

---

Základní psychologické významy primárních a sekundárních barev v západní kultuře:

---

Červená barva typická pro značku Ferrari (Foto: Carsup)

---

Červená barva je u nás asociovaná i s dopravním značením a zákazy (Foto: Automagazin)

---

---

Oranžová je často spojována s teplem (Foto: Skino2)

---

Oranžová barva v jejím výstražném významu (Foto: Nový čas)

---

---

Mailchimp využívá žlutou k budování pozitivního image značky (Obrázek: Big Cartel)

---

Žlutá barva je nejčastěji využívána pro výstražné piktogramy

• Odkaz na výstražná označení podle standardu ISO 7010

---

---

Zelená pomáhá dodávat přírodní charakter značkám, např. v kosmetice (Foto: Justmylook)

---

Zelená je bohužel také často využívaná jako falešný marketing s cílem vydělat na tématu ekologie (tzv. greenwashing) (Obrázek: Michigan Journal of Economics)

---

S herní komunitou je také asociovaná zelená barva (Obrázek: Gamespot)

---

---

Modrá jako symbol redesignu operačního systému Windows 11 technologického giganta Microsoft (Foto: Onlinesoft)

---

---

Ukázka konceptu prémiového brandu s využitím fialové barvy (Foto: Cosmos)

---

Pohádková fialová v podobě intra od Walta Disneyho (Gif: Tenor)

---

---

Většina módních značek využívá jen černou ve svých brandech (Foto: The CEO Malaysia)

---

Černá je téměř univerzální a dokáže kultivovat veřejný prostor (Foto: Veronika Rút)

• Více o projektu Veroniky Rút a jejím manuálu dobré praxe pro Brno

---

Ukázka podobného přístupu na Zlínském Prioru (Foto: Leby)

---

Barvy mají ještě specifický význam v případě interaktivních uživatelských rozhraní.

---

2. Jaké je barevné zastoupení na cílovém trhu

V případě některých komerčních projektů může být výhodou, pokud znáte barevné palety, které využívá vaše konkurence. Zejména v případě velkých hráčů se silnými značkami na daném trhu.

---

• Žlutá kniha budování značky od Michala Pastiera poskytuje skvělý popis výběru vhodných barev pro značku

---

Jak pracovat s barevnou paletou?

---

Monochromatické barvy

Barevná škála v rámci jednoho odstínu.

---

Nejnovější redesign značky Škoda využívající primárně monochromatickou paletu (Obrázek: Skoda Storyboard)

---

Analogové barvy

Barva a její příbuzné barvy na barevném kruhu.

---

Mastercard využívá analogové barvy ve svém brandu od Pentagramu (Obrázek: Pentagram)

• Celá vizuální identita

---

Komplementární barvy

Protilehlé barvy na barevném kruhu.

---

Sportovní brand LA Lakers je postavený na komplementárních barvách (Obrázek: Sports Poster Warehouse)

---

Teplota barvy

Studený nebo teplý odstín?

---

Meditační aplikace Headspace a její brand orientovaný do příjemných teplých odstínů (Obrázek: UI Sources)

• Web Headspace

---

Hardwarová firma propagující svou čtečku zaměřenou na šetření očí

• Celý web Daylight Computer

---

Barevné přechody

Barevné přechody se začaly výrazněji využívat s příchodem počítačové grafiky.

---

Logo prohlížeče Mozilla Firefox

---

Pokud jsou využívány s citem, mohou dobře sloužit jako pozadí, vytvářet tekutý dojem, připomínat lom světla a jiné estetizující fyzikální jevy. Můžeme se s nimi často setkat v design systémech využívajících různé formy moderního skeuomorfismu.

Ukázka nového design systému Liquid Glass od značky Apple (Obrázek: Apple)

---

Pokud to s nimi ale designér přežene nebo zvolí nevhodnou kombinaci barev, může snadno dojít k vytvoření kýčovité estetiky, na což si třeba dávat pozor.

Přehnané využívání gradientů byl velký trend kolem roku 2015 (Obrázek: Creative Tim)

---

Vzájemné působení barev

Barvy na sebe vzájemně působí a v různých kombinacích mohou vyznít různě, případně pracovat s jejich různými variantami na základě pozadí, na kterém jsou umístěné.

---

Klasická ukázka barevné optické iluze (Obrázek: Pro Video Coalition)

---

Reálná ukázka téže animace (Gif: Pro Video Coalition)

---

Světlý a tmavý režim

To obzvlášť platí u světlého a tmavého režimu, kde je nezbytné využívat dvě různé palety. Saturované barvy v tmavém režimu většinou působí přepáleně, což zhoršuje jejich čitelnost a mohou být poměrně nepříjemné pro oči, a taky nedosahují dostatečný kontrast v pravidlech použitelnosti. Je proto vhodné používat jejich desaturovanou verzi.

---

---

---

Systémy s více paletami

U větších design systémů a brandů je běžné využívat celou paletu barev k odlišení různých sub-brandů, diverzifikaci produktu atd. Více v kapitole o design systémech.

---

FedEx a jeho subbrandy s různými barvami pro odlišení (Obrázek: A Dozen Eggs)

---

Pomůcky

---

HSL Color Picker

Jedná se jen o jeden z mnoha způsobů vizuálního výběru barvy, přesto je asi nejvhodnější při skládání barevné palety, jelikož umožňuje separátní výběr:

• odstínu (hue)
• sytosti (saturation)
• světlosti (lightness)

---

Výběr barvy pomocí HSL ve Figmě

---

Generátory barevných palet

Na internetu existují pravděpodobně stovky generátorů, které vám různým způsobem umožní poskládat barevnou paletu, případně ji rovnou importovat do vybraného grafického editoru:

• Coolors
• Adobe Colors
• případně množství pluginů přímo ve Figmě

Dobře poslouží i AI.

---

Barevné módy 101

---

RGB (digitál)

Všechny digitální obrazovky využívají mód RGB (red – green – blue), který je založený na působení světlosti jedné ze tří barev, případně jejich vzájemné kombinaci – maximální hodnota všech tří barev je bílá.

---

CMYK (tisk)

Základ každé tiskárny je barevný mód CMYK (cyan – magenta – yellow – black (K)), který je založený na opačném principu než RGB, kde kombinací všech 4 barev vzniká sytá černá. Nejsvětlejší plochou je proto odstín plochy, na kterou se tiskne.

---

Vizuální identita MUNI v rgb a běžném cmyk provedení

---

Fotografie polární záře v rgb a běžném cmyk provedení (Foto: Trip Advisor)

---

Jak zachovat co nejvíce barev v tisku?

• Nechat si poradit přímo od tiskaře
• Vybrat si lesklý nebo pololesklý papír
• Podklady nechat přímo v RGB a nechat převod barev na tiskárnu (pokročilé)
• Na velmi svítivé části použít přímou barvu (pokročilé)

---

Vizuální hierarchie barev

---

Barevná paleta nemusí být definitivně hotová předtím, než začneme proces navrhování. Je běžné, že se v průběhu ladí, upravuje nebo rozšiřuje na základě nových zjištění, která v průběhu navrhování vyvstanou. V případě, že se barvy řádně dokumentují (v případě Figmy v podobě barevných stylů nebo tokenů), je jejich dodatečná úprava velmi jednoduchá.

Přesto je ale důležité myslet a uplatňovat některé principy a standardy, které fungují bez ohledu na vybranou barevnou paletu, a mají zásadní význam pro uživatelskou zkušenost.

---

Pravidlo 60–30–10

---

Ukázka pravidla 60-30-10 na uživatelském rozhraní mobilní aplikace (Foto: Medium)

---

Ukázka pravidla 60-30-10 v interiéru (Foto: Let’s talk color)

---

Toto pravidlo je dobrá pomůcka, jak dosáhnout čistšího, přehlednějšího a uživatelsky přívětivějšího designu. Pravidlo pojednává o rozdělení barev v následujících poměrech na:

Dominantní barvu (60 %)

• Většinou neutrální barva
• Na velké plochy jako pozadí

Sekundární barvu (30 %)

• Kontrastní barva vůči pozadí
• Vhodná pro typografii, ikony

Barevný akcent (10 %)

• CTA tlačítka
• Zvýraznění nejdůležitějších částí

Nemusí být řešením pro každý typ projektu, ale je to dobré vodítko, jak nad uplatňováním barev přemýšlet.

---

Barvy a interaktivita

Je dobré myslet na to, že barvy také mohou sloužit k odlišení aktivních od neaktivních ploch, případně mohou mít další funkční význam, jako např.:

---

Výstraha, chyba (červená)

Ukázka výstrahy v uživatelském rozhraní

---

Potvrzení, úspěšná akce (zelená)

Ukázka úspěšné akce v uživatelském rozhraní

---

Odkaz (modrá)

Ukázka odkazu v uživatelském rozhraní

---

Nefunkční, neaktivní (šedá)

Ukázka neaktivního prvku v uživatelském rozhraní

V tomto případě je třeba opět myslet i na kulturní kontext, ve kterém tyto barvy uplatňujeme.

---

Přístupnost ve vizuálním designu

---

Ne každý má to štěstí, že dokáže vnímat plnou barevnou škálu našeho designu nebo ocenit výběr typografie, proto v rámci digitálních produktů a služeb vznikla pravidla přístupnosti, která pomáhají designérům a vývojářům vytvářet produkty, které takovým uživatelům usnadňují jejich používání.

---

---

Pravidla přístupnosti jsou čerstvě, díky regulaci European Accessibility Act, povinná pro většinu digitálních služeb, aplikací a webových stránek. Pravidla přístupnosti definují Web Content Accessibility Guidelines (WCAG) a většina z nich se týká zejména technického zpracování, ale obsahují i několik důležitých částí týkajících se vizuálního designu. Ve zkratce se jedná zejména o dostatečný kontrast barev, přístupné formuláře a správnou práci s písmem tak, aby návrh vyhovoval většině zrakových postižení (nebo například přímému slunci!), jako jsou:

• Dalekozrakost
• Barvoslepost (až 5 % všech mužů)
• Tunelové vidění
• Diabetická retinopatie (tmavé fleky)
• Šedý zákal

---

Pravidla přístupnosti jsou poměrně složitá na interpretaci, přesto existují ve zjednodušené podobě nebo v podobě různých checklistů:

• WCAG in Plain English
• Checklist od Pecka Design
• Designing for Accessibility

---

Dostatečný kontrast

Nejdůležitější pravidlo je dodržování minimálního kontrastu u všech částí obsahu, které nesou informační hodnotu:

• Text
• Grafické prvky (např. ikonky)

Minimální kontrast pro grafické prvky a velké texty (nad 24 px při regular řezu nebo nad 19 px při bold řezu):

Ukázka špatného a dobrého kontrastu

---

3:1 (popředí:pozadí)

Ukázka minimálního kontrastu u nadpisu

Pro menší texty (které nesplňují výše uvedené pravidlo):

---

4.5:1 (popředí:pozadí)

Ukázka minimálního kontrastu u textu

---

Jak si ověřit dostatečný kontrast?

Základní nástroj

• WebAIM

Přímo ve Figmě:

• Zabudovaný color-checker
• Stark (trochu sofistikovanější, s rozšířeními mimo Figmu)

Přímo na analýzu funkčních webových stránek:

• Google Lighthouse (přímo zabudovaný v prohlížeči Google Chrome) nebo Page Speed Insight

Oba nástroje jsou od Googlu, takže kromě accessibility reportují i chyby relevantní pro SEO a optimalizaci výkonu.

---

Nespoléhat se jen na barevnou logiku

V případě grafických prvků, které se spoléhají na barevnou logiku, je vždy dobré myslet i na lidi s barvoslepostí (nebo uživatele s černobílým režimem), kteří tento barevný význam nebudou moci rozklíčovat, a mít pro ně k dispozici pochopitelnou alternativu.

---

Ukázka problému s barevnou logikou jako jediným indikátorem výběru sedadel (Obrázek: Leo Vogel)

---

Ukázka redesignu problému výše (Obrázek: Leo Vogel)

---

Ukázky využívání ikonek a dalších indikátorů kromě barevné logiky

---

Barevná logika semaforu funguje jen pro lidi bez barevného postižení. Semafor lze ale rozklíčovat podle pořadí. (Foto: Ajda Gregorcic)

---

Přístupné formuláře

V případě, že pracujete s formuláři, je důležité dodržet tato základní pravidla:

---

Používat labely

Nestačí se spolehnout na umístění placeholderů do jednotlivých polí. Kromě toho, že je to nepřístupné, je to i frustrující pro většinu uživatelů.

Ukázka správného používání labelů

---

Navrhovat pochopitelné chybové hlášky

Každý se občas splete při vyplňování formuláře, proto je důležité pomoct takovou chybu efektivně vyřešit. Špatně vyplněnému poli by neměla chybět:

• pochopitelná chybová hláška,
• chybová hláška se musí nacházet v bezprostředním okolí daného pole,
• chyba nesmí být označena jen barvou, ale musí být označena i dalším vizuálním prvkem, např. ikonkou

Ukázka správného používání chybové hlášky ve formuláři

---

Správně označovat povinná pole

Povinná pole je důležité označit znakem hvězdičky s případným barevným akcentem pro lepší odlišení. Je to dnes úplně zaužívaný standard, který zároveň splňuje pravidla přístupnosti. Případnou alternativou ještě může být označování volitelných políček, což ale v případě, že žádné není volitelné, může být nesrozumitelné.

Ukázka správného označení povinného pole