Barvy rozhodují o prvním dojmu dřív, než si člověk přečte jediné slovo. Neexistuje ale barva, která prodává sama o sobě. Funguje ta, která se hodí k tomu, co nabízíte, a ta, která je na stránce nebo v e-mailu dobře vidět. V článku najdete, co o působení barev říká výzkum, jak vybrat barvu tlačítka, jaký kontrast potřebuje text a jak se měnily barvy roku od roku 2000 do 2026.
V kostce
- Lidé si udělají názor během 90 sekund a 62 až 90 % tohoto hodnocení stojí na barvách.
- Univerzální význam barev neexistuje. Asociace se liší podle kultury, věku i osobní zkušenosti.
- Důležitější než konkrétní odstín je, zda se barva hodí k produktu.
- U tlačítka rozhoduje kontrast vůči okolí, ne to, zda je červené nebo zelené.
- Běžný text potřebuje kontrastní poměr alespoň 4,5 : 1. Bílá na žluté ho nesplní.
- Barvou roku 2026 je podle Pantone bílá Cloud Dancer. Barvy značky kvůli ní neměňte.
Stručně: co barvy dělají, co nedělají, na co si dát pozor a kde začít
- Co barvy dělají: odlišují značku a její produkty a vyvolávají u zákazníků emoce.
- Co nedělají: neprodávají samy. Červené tlačítko nezachrání nesrozumitelnou nabídku.
- Na co si dát pozor: na kontrast, na barvoslepé čtenáře, na tmavý režim a na jiný význam barev v zahraničí.
- Kde začít: jedna hlavní barva značky, jedna akcentní barva pro tlačítka a změřený kontrast textu.
Co se změnilo od vydání článku: Článek vyšel v roce 2020 a končil barvami roku 2021. Doplnili jsme přehled barev roku Pantone od roku 2000 do 2026 se vzorky, data o oblíbenosti barev, pravidla kontrastu a přístupnosti, tmavý režim v e-mailech a postup, jak barvy vybrat. Opravili jsme také údaj z původní infografiky. Správný rozsah ze studie je 62 až 90 %, ne 60 až 92 %.
Proč na barvách záleží
Červená a žlutá jsou barvy lásky a štěstí. Spolu s oranžovou patří mezi takzvané aktivační barvy, které dodávají optimismus a radostné emoce. Není divu, že tolik značek rychlého občerstvení vsadilo právě na žlutou a červenou.
Psychologie barev se ale zdaleka netýká jen fast foodů. Psychologie barev je obor, který zkoumá, jak barvy ovlivňují vnímání, náladu a chování lidí. Podle některých studií právě barva hraje zásadní roli při vnímání a hodnocení vašeho produktu. Je prostě jedním z nejdůležitějších faktorů k odlišení vaší značky a zároveň dělá první dojem.
Nejčastěji citované číslo pochází z přehledové studie Satyendry Singha z roku 2006. Lidé si podle ní udělají názor na člověka nebo produkt během 90 sekund od prvního setkání a 62 až 90 % tohoto hodnocení je založeno jen na barvách.
Co přesně barvy dělají? Slouží ke dvěma účelům. Odlišují značku a její produkty a jiskří emoce u zákazníků.
Co znamenají jednotlivé barvy
Následující přehled ukazuje, s čím si základní barvy spojuje většina lidí v Evropě a Severní Americe. Berte ho jako výchozí bod, ne jako zákon.
Osm základních barev a jejich nejčastější asociace
- Modrá #27348B Důvěra, bezpečí a serióznost
- Zelená #3AAA35 Klid, příroda a harmonie
- Červená #CD1719 Láska, vášeň a energie
- Fialová #8B1D82 Urozenost a výjimečnost
- Žlutá #FFDD00 Optimismus, štěstí a naděje
- Oranžová #F39200 Přátelskost a chuť jednat
- Bílá #FFFFFF Elegance a čistota
- Černá #000000 Luxus a autorita
| Barva | Jak působí | Kde se hodí | Na co si dát pozor |
|---|---|---|---|
| Modrá | Symbolizuje důvěru, bezpečí a serióznost | Finance, technologie, B2B služby | Je nejčastější, hůř se s ní odlišíte |
| Zelená | Má uklidňující efekt, navozuje pocit harmonie | Ekologie, zdraví, potvrzení a úspěch | V Číně má zelená pokrývka hlavy spojitost s nevěrou |
| Červená | Je synonymem pro lásku, vášeň a energii, povzbuzuje chuť k jídlu | Slevové akce, výprodeje, upozornění | Znamená také chybu a zákaz |
| Fialová | Bývá spojována s urozeností | Kosmetika, prémiové produkty | V některých částech světa je barvou smutku |
| Žlutá | Mezi ostatními barvami zaujme jako první, ztělesňuje optimismus | Zvýraznění, akce, dětské produkty | Je zrádná, unavuje oči a bílý text na ní není čitelný |
| Oranžová | V žebříčcích oblíbenosti neboduje, přesto působí pozitivně | Tlačítka s výzvou k akci (CTA) | S bílým textem mívá slabý kontrast |
| Bílá | V Americe a Evropě představuje eleganci a čistotu | Pozadí, volný prostor | V části Asie je barvou smutku |
| Černá | V kombinaci s bílou je známkou luxusu | Drahé značky, móda | Velké černé plochy v e-mailu působí těžce |
Červená probouzí nutkání včetně toho nákupního, proto je ideální pro slevové akce, výprodeje a podobná sdělení.
Proč univerzální význam barev neexistuje
Teorie je jedna věc, ale přiřadit barvě univerzální reakci komplikuje skutečnost, že barevné asociace se velmi liší jak člověk od člověka, tak i v různých kulturách.
Jan SpáčilCEO QuandaTvrzení, že modrá evokuje kompetentnost, platí jen do určité míry. Jak barvu vnímáte, ovlivňuje místo, kde jste vyrostli, vaše zkušenosti i to, s jakou značkou ji máte spojenou.
| Barva | Evropa a Severní Amerika | Jinde ve světě |
|---|---|---|
| Bílá | Čistota, svatba | V Číně a dalších zemích východní Asie barva smutku a pohřbů |
| Červená | Láska, ale také nebezpečí a pokles na burze | V Číně štěstí a prosperita, na tamních burzách růst |
| Zelená | Příroda, povolení, úspěch | V Číně je zelený klobouk symbolem nevěry |
| Žlutá | Optimismus, v Německu ale také závist | V Číně tradičně císařská barva |
| Fialová | Urozenost, luxus | V Thajsku a Brazílii barva smutku |
Liší se i obliba barev. Společnost YouGov se v roce 2015 zeptala lidí v deseti zemích čtyř kontinentů na nejoblíbenější barvu. Ve všech zvítězila modrá, s podílem od 23 % v Indonésii po 33 % ve Velké Británii. Druhá místa se už lišila. V Thajsku, Číně a USA skončila druhá zelená, v Německu, Británii, Singapuru a Indonésii červená a v Hongkongu fialová.
| Skupina | Podíl |
|---|---|
| Muži, USA |
40 %
|
| Muži, Velká Británie |
40 %
|
| Ženy, Velká Británie |
27 %
|
| Ženy, USA |
24 %
|
Modrá tedy vede u mužů i u žen, u mužů ale výrazněji.
Co o barvách říká výzkum
Jakou strategii by tedy měli zvolit marketéři, když univerzální význam barev neexistuje? Výzkum ukazuje, že barva ovlivňuje chování spotřebitele dvěma klíčovými způsoby.
Soulad se značkou. Spotřebitelé jednoznačně preferují značky a produkty, jejichž barvy jsou sladěné s jejich účelem, například zelená pro ekologické produkty. Paul Bottomley a John Doyle v roce 2006 ukázali, že u praktických produktů lidé čekají spíš střízlivé barvy a u produktů, které mají dělat radost, barvy výrazné. Lauren Labrecque a George Milne v roce 2012 popsali, že barva formuje i „osobnost“ značky. Červená v jejich studii zvyšovala dojem vzrušení, modrá dojem kompetentnosti.
Upoutání pozornosti. Spotřebitele nenalákají ke kliknutí červená tlačítka na webových stránkách přeplněných červenou barvou. Zato na stránkách s převládající bílou na ně budou klikat s mnohem větší pravděpodobností. Psychologie tomu říká efekt izolace. Prvek, který se od okolí liší, si zapamatujeme a všimneme si ho dřív.
| Co víme | Číslo | Zdroj |
|---|---|---|
| Čas, za který si člověk udělá názor | 90 sekund | Singh, Impact of color on marketing, 2006 |
| Podíl hodnocení založený jen na barvách | 62 až 90 % | Singh, Impact of color on marketing, 2006 |
| Podíl lidí, kteří mají nejraději modrou | 23 až 33 % podle země | YouGov, 2015 |
| O kolik červené tlačítko porazilo zelené | 21 % | HubSpot, test tlačítka na stránce Performable, 2011 |
| Domovské stránky s textem s nízkým kontrastem | 83,9 % | WebAIM Million, 2026 |
| Muži s poruchou barvocitu | zhruba 8 % | Birch, Worldwide prevalence of red-green color deficiency, 2012 |
Jakou barvu zvolit pro tlačítko
Hledáte barvu pro tlačítka s výzvou k akci na svém webu nebo v e-mailu? Dobře funguje červená či oranžová. Ne proto, že by byly kouzelné, ale proto, že na většině webů a e-mailů nejsou jinde použité.
Dokládá to nejznámější test barvy tlačítka. Společnost HubSpot v roce 2011 porovnala na stránce Performable zelené a červené tlačítko. Červené získalo o 21 % víc kliknutí. Stránka ale byla laděná do zelena, takže zelené tlačítko s ní splývalo a červené vyčnívalo. Autoři testu sami upozornili, že výsledek nejde přenést na jiný web.
Pro tlačítko proto platí tři pravidla:
- Barva tlačítka se v e-mailu nebo na stránce nesmí opakovat na jiných prvcích.
- Text na tlačítku musí být dobře čitelný. Rozhoduje kontrastní poměr, ne dojem.
- Kolem tlačítka nechte volné místo, aby nesoupeřilo s obrázky a dalšími odkazy.
Následující vzorky ukazují, jak stejná barva tlačítka obstojí s bílým a s tmavým textem. Číslo pod vzorkem je kontrastní poměr.
Text na tlačítku: co je čitelné a co ne
- Bílá na žluté #F5DF4D / #FFFFFF 1,3 : 1 Nevyhovuje
- Tmavá na žluté #F5DF4D / #1F2430 11,4 : 1 Vyhovuje
- Bílá na oranžové #F28C00 / #FFFFFF 2,4 : 1 Nevyhovuje
- Tmavá na oranžové #F28C00 / #1F2430 6,3 : 1 Vyhovuje
- Bílá na korálové #FF6F61 / #FFFFFF 2,7 : 1 Nevyhovuje
- Bílá na tmavě oranžové #C2410C / #FFFFFF 5,1 : 1 Vyhovuje
- Bílá na červené #BF1932 / #FFFFFF 6,1 : 1 Vyhovuje
- Bílá na modré #0F4C81 / #FFFFFF 8,8 : 1 Vyhovuje
Tip: Nevíte, zda zvolit oranžové nebo modré tlačítko? Nehádejte. V Quandě vytvořte kampaň s A/B testováním, ve dvou verzích e-mailu změňte jen barvu tlačítka a porovnejte prokliky.
Kontrast a přístupnost: aby text přečetl každý
Kontrastní poměr je číslo od 1 do 21, které vyjadřuje rozdíl jasu mezi textem a pozadím. Černý text na bílém pozadí má poměr 21 : 1, text stejné barvy jako pozadí 1 : 1.
Mezinárodní pravidla přístupnosti WCAG stanovují tyto hranice:
| Prvek | Minimální kontrastní poměr |
|---|---|
| Běžný text | 4,5 : 1 |
| Velký text, zhruba od 24 px nebo od 19 px tučně | 3 : 1 |
| Ovládací prvky a grafika nesoucí informaci, například obrys pole nebo ikona | 3 : 1 |
Zdroj: W3C, Web Content Accessibility Guidelines 2.2, kritéria 1.4.3 a 1.4.11.
Nízký kontrast je přitom nejčastější chyba přístupnosti vůbec. Organizace WebAIM každý rok testuje milion nejnavštěvovanějších domovských stránek.
| Rok | Podíl stránek |
|---|---|
| 2019 |
85,3 %
|
| 2020 |
86,3 %
|
| 2021 |
86,4 %
|
| 2022 |
83,9 %
|
| 2023 |
83,6 %
|
| 2024 |
81,0 %
|
| 2025 |
79,1 %
|
| 2026 |
83,9 %
|
Čtyři z pěti webů tedy mají text, který se části lidí čte špatně. Kdo kontrast hlídá, je čitelnější než většina konkurence.
Druhým důvodem je barvocit. Podle přehledové studie Jennifer Birch z roku 2012 se porucha vnímání červené a zelené týká zhruba 8 % mužů a 0,5 % žen severoevropského původu. Pro tyto čtenáře může červený a zelený text vypadat stejně.
Pozor: Nepředávejte informaci jen barvou. „Červeně označené termíny jsou obsazené“ část čtenářů nerozliší. Doplňte slovo, ikonu nebo podtržení. Odkazy v textu nechte podtržené.
Barvy v e-mailu: značka, tmavý režim a přistávací stránka
E-mail má oproti webu jedno specifikum. Nevíte, v jaké aplikaci a v jakém režimu ho příjemce otevře.
Držte barvy značky. Lidé se nejdřív dívají na to, kdo jim píše. Stejné barvy ve všech e-mailech pomáhají, aby vás poznali dřív, než začnou číst.
Počítejte s tmavým režimem. Některé poštovní aplikace v tmavém režimu samy mění barvy. Světlé pozadí ztmaví a tmavý text zesvětlí. Logo s průhledným pozadím a tmavým písmem pak může splynout s pozadím. Pomáhá logo se světlým obrysem nebo na vlastním podkladu a střední tóny barev místo čistě bílé a čistě černé.
Slaďte e-mail s přistávací stránkou. E-mail a stránka, na kterou vede, mají fungovat jako zrcadlo. Stejné obrázky, stejné barvy tlačítek, stejný nadpis. Čtenář pak po kliknutí ani na vteřinu nezaváhá, jestli je na správném místě.
Slaďte i formuláře. V Quandě si u aktivního formuláře v části Design přizpůsobíte barvu, pozadí, velikost a font písma. Víc v návodu Design formuláře.
Další chyby, které v e-mailech snižují počet kliknutí, popisuje článek 8 chyb, které ohrožují míru prokliku vašeho newsletteru.
Barvy roku Pantone od roku 2000 do 2026
Barva roku je odstín, který každoročně v prosinci vyhlašuje americký institut Pantone Color Institute jako symbol nálady nadcházejícího roku. Pantone je tvůrcem systému, podle kterého se barvy označují v tisku, módě a designu. Barvu roku vybírá od roku 2000.
Barvy roku Pantone 2000 až 2026
- 2000 Cerulean #9BB7D4 15-4020
- 2001 Fuchsia Rose #C74375 17-2031
- 2002 True Red #BF1932 19-1664
- 2003 Aqua Sky #7BC4C4 14-4811
- 2004 Tigerlily #E2583E 17-1456
- 2005 Blue Turquoise #53B0AE 15-5217
- 2006 Sand Dollar #DECDBE 13-1106
- 2007 Chili Pepper #9B1B30 19-1557
- 2008 Blue Iris #5A5B9F 18-3943
- 2009 Mimosa #F0C05A 14-0848
- 2010 Turquoise #45B5AA 15-5519
- 2011 Honeysuckle #D94F70 18-2120
- 2012 Tangerine Tango #DD4124 17-1463
- 2013 Emerald #009473 17-5641
- 2014 Radiant Orchid #B163A3 18-3224
- 2015 Marsala #955251 18-1438
- 2016 Rose Quartz #F7CAC9 13-1520
- 2016 Serenity #92A8D1 15-3919
- 2017 Greenery #88B04B 15-0343
- 2018 Ultra Violet #5F4B8B 18-3838
- 2019 Living Coral #FF6F61 16-1546
- 2020 Classic Blue #0F4C81 19-4052
- 2021 Ultimate Gray #939597 17-5104
- 2021 Illuminating #F5DF4D 13-0647
- 2022 Very Peri #6667AB 17-3938
- 2023 Viva Magenta #BB2649 18-1750
- 2024 Peach Fuzz #FFBE98 13-1023
- 2025 Mocha Mousse #A47864 17-1230
- 2026 Cloud Dancer #F0EEE9 11-4201
Při pohledu na celou řadu je vidět několik věcí:
- Modré a tyrkysové odstíny se vracejí nejčastěji. Cerulean, Aqua Sky, Blue Turquoise, Blue Iris, Turquoise, Serenity a Classic Blue. Odpovídá to tomu, že modrá je nejoblíbenější barvou na světě.
- Dvakrát vyhrála dvojice barev. V roce 2016 Rose Quartz a Serenity, v roce 2021 Ultimate Gray a Illuminating.
- Po syté dekádě přišlo zklidnění. Od roku 2024 vybírá Pantone tlumené, přírodní tóny: broskvovou, hnědou a bílou.
- Bílá vyhrála poprvé. Cloud Dancer pro rok 2026 je první bílý odstín v historii výběru.
Barvy roku 2021: šedá a žlutá
Pro rok 2021 zvolila společnost Pantone Color Institute kombinaci dvou barev, a sice šedé Ultimate Gray (PANTONE 17-5104, RGB 147, 149, 151, #939597) a zářivě žluté Illuminating (PANTONE 13-0647, RGB 245, 223, 77, #F5DF4D), jimiž nahradila modrou Classic Blue z roku 2020.
Spojení těchto dvou rozdílných, na sobě nezávislých odstínů má zdůraznit sílu, která vznikne jejich vzájemnou podporou a harmonií. Kombinace šedé a žluté vyjadřuje současně hřejivost a optimismus, má být příběhem, který v nás vzbuzuje příjemné pocity a dává naději do budoucna.
Je to zároveň dobrá ukázka toho, proč barvu roku nepřebírat bez rozmyslu. Bílý text na žluté Illuminating má kontrastní poměr jen 1,3 : 1 a šedý text Ultimate Gray na bílém pozadí 3 : 1. Ani jedna kombinace nestačí pro běžný text.
Barva roku 2026: Cloud Dancer
Pro rok 2026 vybral Pantone odstín Cloud Dancer (PANTONE 11-4201), teplou bílou. Institut ji popisuje jako symbol zklidnění ve společnosti, která znovu objevuje hodnotu tichého zamyšlení. Pro e-maily a weby to není žádná revoluce. Bílá je nejčastější barvou pozadí a volný bílý prostor kolem textu a tlačítek patří k nejlevnějším způsobům, jak zpřehlednit sdělení.
Jak vybrat barvy pro e-mail a web v 6 krocích
- Vyjděte z barev značky. Hlavní barvu berte z loga a používejte ji ve všech e-mailech, na webu i ve formulářích stejně.
- Ověřte, že barva odpovídá tomu, co prodáváte. Zeptejte se několika zákazníků, co jim vaše barvy připomínají.
- Vyberte jednu akcentní barvu jen pro tlačítka a odkazy a nepoužívejte ji na nic jiného.
- Změřte kontrast, například ve vývojářských nástrojích prohlížeče Chrome (pravé tlačítko myši, Prozkoumat, panel Styly, vzorek barvy). Text vůči pozadí má mít poměr alespoň 4,5 : 1, text na tlačítku také.
- Nespoléhejte jen na barvu. Důležitou informaci doplňte textem, ikonou nebo podtržením.
- Pošlete si testovací e-mail, prohlédněte ho na mobilu i v tmavém režimu a barvu tlačítka ověřte A/B testem.
Kontrola barev před odesláním e-mailu
- Barvy odpovídají značce a přistávací stránce.
- Akcentní barva je jen na tlačítkách a odkazech.
- Text na tlačítku je čitelný i na mobilu na slunci.
- Šedý text není světlejší, než je nutné.
- Žádná informace není předaná jen barvou.
- Logo je vidět ve světlém i tmavém režimu.
Závěrem
Barvy nejsou věda s jedním správným výsledkem. Vyplatí se ale znát pár pravidel, která platí vždy: barva se má hodit k tomu, co nabízíte, důležitý prvek má být vidět a text má jít přečíst. Všechno ostatní si ověřte na vlastních zákaznících.
Jak postavit e-mail od předmětu po tlačítko, vysvětluje online kurz Copywriting a design e-mailů, které se čtou. Pokud chcete probrat vzhled svých kampaní s námi, napište nám na support@onquanda.com nebo si domluvte konzultaci zdarma.
