Barvy na web: základní teorie barev a co si pohlídat při výběru barevné palety

Úno 8, 2022 | Barvy na web, Branding, Tipy a triky, UX/UI design, Webové stránky

Teorie barev a barvy na web patří mimo jiné i pod disciplínu webdesignu. Mísí v sobě vědu a psychologii, využívá obrovského vlivu barev na lidskou mysl a zpráv, které mohou předávat. Každý zkušený tvůrce webu vám potvrdí, že správně vybrané barvy navodí požadované emoce a pomohou vaše zákazníky nebo čtenáře směrovat na webu přesně tam, kam potřebujete.

V tomto článku vám vysvětlím základy teorie barev nejen na web a poradím vám, jak vybrat harmonickou barevnou paletu pro vaše stránky i grafiku. Pochopení principů míchání barev a jejich vhodný výběr vám budou k užitku v libovolné fázi tvorby webu, ať už se chystáte vytvořit nové logo nebo potřebujete navrhnout rozsáhlou prezentaci.

Primární, sekundární a terciární barvy na web

V obecné teorii barev se pracuje s různými barevnými schématy. V základním rozdělení se barvy člení na primární, sekundární a terciární:

  • primárními barvami jsou modrá, červená a žlutá,
  • sekundární barvy vznikají mícháním primárních barev, jsou to fialová, oranžová a zelená,
  • terciární kombinováním těch sekundárních, např. růžová, tmavě fialovo-modrá, tyrkysová, světle oranžová.
barvy na web, teorie barev, primární barvy, sekundární barvy, terciální barvy
Základní členění barev. Trojúhelník uprostřed ukazuje primární barvy, barvy na jeho stranách jsou sekundární, které vzniknou kombinací primárních barev. Zbytek jsou kombinace sekundárních barev.

Dalším mícháním postupně získáte odstíny celého barevného spektra, které mohou být umístěny například do známého barevného kola (color wheel).

barvy na web, teorie barev, barevné kolo, colour wheel, color wheel, barevné kombinace na web
Příklad barevného kola (color wheel)

Barevné schéma na web

Barevné schéma webu definuje kombinaci barev, které se k sobě hodí a webdesigner i grafik je zvolí pro návrh konkrétní stránky nebo grafiky. Každá z těchto barev by měla mít přesně definované využití, od pozadí stránky přes logo až k tlačítkům a dalším komponentám.

Pomocí vybraného barevného schématu definujete svou osobní či firemní značku i celou vizuální identitu. Proto by se zvolené barvy měly objevovat například i na vašich vizitkách, polepu auta či ve stylu e-mailů, které svým zákazníkům pravidelně zasíláte.

Harmonické barvy na web: analogické, komplementární a triadické schéma

Výběr kombinace barev na web má jasná pravidla. Volbu odstínů, které spolu harmonicky ladí, vám ulehčí barevná schémata. Mezi ta nejznámější patří analogické, komplementární a triadické schéma (dále se dá zařadit jednoduché monogromatické nebo třeba tetradické schéma, které má čtyři barvy).

Analogické barvy

Sousední barvy barevného kola se označují jako analogické. Navozují dojem harmonie, kontinuity a uvolnění. Můžete je kombinovat ve dvoj- nebo trojkombinaci, protože hlavní barvy vždy sousedí s další barvou na pravé i levé straně. Na příklady harmonických kombinací analogických barev se můžete podívat níže. Vybrali jsme kombinace pro primární barvy červenou a modrou.

Příklad kombinace analogických barev (červená)
barvy na web, teorie barev, analogické barvy
Příklad kombinace analogických barev (modrá)

Komplementární barvy

Protější barevné odstíny jsou komplementární. Jsou navzájem v kontrastu a často se používají pro prvky či sekce webu, které mají přitáhnout pozornost uživatele a podpořit akci z jeho strany. Uvedené příklady jsou vybrány se sekundární zelenou a oranžovou barvou.

barvy na web, teorie barev, komplementární barvy
Příklad kombinace komplementárních barev (zelená)
barvy na web, teorie barev, komplementární barvy
Příklad kombinace komplementárních barev (oranžová)

Triadické barvy

Schéma s odstíny, které v barevném kole vzájemně tvoří rovnostranný trojúhelník, se nazývá triadické. Z pohledu využití leží někde uprostřed mezi analogickým a komplementárním schématem a dává tvůrcům větší prostor pro kreativitu. Podobných barevných schémat existuje celá řada. Na příklady se můžete podívat opět níže. Jako hlavní barvy jsme vybrali fialovou a růžovou barvu.

barvy na web, teorie barev, triadické barvy
Příklad kombinace triadických barev (fialová)
barvy na web, teorie barev, triadické barvy
Příklad kombinace triadických barev (růžová)

Jakým barvám a barevným kombinacím se na webu vyhnout?

Ve webovém designu najdete i barvy, kterým se designéři z různých důvodů vyhýbají. Patří mezi ně například čistě černá, která na většině webů působí příliš silně. Při pozorném pohledu  zjistíte, že v reálném světě je jen málokterý objekt čistě černý. Své o tom ví i návrháři webů, kteří místo černé používají raději temně šedé odstíny, vhodnější pro lidské oko.

Stejně tak se vyvarujte kombinace zelené a červené ve zvolené barevné paletě. Červená většinou znamená ne, zelená ano. I proto se tyto barvy často objevují u tlačítek, chybových hlášení a jiných důležitých upozornění. Chcete-li červenou a zelenou použít společně, slaďte je vždy s dalšími odstíny. Dobře se kombinují například s bílou, šedou či černou.

Pozor dejte také na:

  • světlé barvy na světlém pozadí a tmavé na tmavém,
  • kombinaci tmavého pozadí s barevným textem, který může být špatně čitelný,
  • neonové texty, které unavují oči čtenáře a těžko se kombinují se světlým i s tmavým pozadím,
  • duhová a jiná výrazná pozadí, která působí rušivě a odvádí pozornost od textů na webu.

Na příklady neharmonických kombinací barev, se můžete podívat na příkladech níže. Pokud hledáte další inspiraci pro kombinaci barev, kterým je lepší se vyhnout, můžete se podívat třeba na tento článek.

barvy na web, teorie barev, neharmonické barvy
Příklad neharmonické kombinace barev – líbí se vám?
barvy na web, teorie barev, neharmonické barvy
Příklad neharmonické kombinace barev – líbí se vám?

Při výběru webových barev nevynechte uživatelské testování

Možná už jste si vybrali barvy, které se vám líbí a chcete je použít na svých stránkách. Jak ale zjistit, zda jsou optimální a harmonickou volbou, která vaše uživatele vhodně provede webem a přiměje kliknout, kam potřebujete? Nejlépe uživatelským testováním, které za vás můžu zajistit i já. Testování je obvykle součástí kompletního návrhu webu, redesignu stávající stránky nebo její analýzy, ale je možné jej realizovat i samostatně.

Do uživatelského testování se můžete pustit i sami. Vytipujte si přátele či kolegy, kteří odpovídají vaší cílové skupině nebo s ní mají alespoň některé společné znaky (jinak nebude testování příliš relevantní). Nechte je proklikat celý web, zadejte dva až tři úkoly a pečlivě sesbírejte všechny jejich postřehy. Tito testeři vám pomohou dosáhnout lepšího výsledku.

Na barevné kombinací záleží, i když váš návštěvník není mistr barev

Pokud si říkáte, že to s aplikací teorie barev pro výběr barevné kombinace nemusíte tak přehánět, protože váš zákazník přece není odborník na barvy a nebude barevné schéma zase tak moc řešit, zadržte. I běžný zákazník totiž harmonickou kombinaci s jistotou pozná.

Pro účely tohoto článku jsem na svém FB profilu udělala krátký test. Sestavila jsme výběr tří barevných kombinací, z nichž dvě byly neharmonické a jen jedna harmonická, a zeptali se přátel, která kombinace jim dává největší smysl. Jak to dopadlo? 100% lidí, kteří se zapojili, jednoznačně označili harmonickou kombinaci.

barvy na web, teorie barev, neharmonické barvy
Kombinace barev pro testování.

Jediná harmonická je Kombinace 3. Ostatní jsou vytvořené z kombinací harmonických barev, v nichž jsem vyměnila jednu barvu z původního návrhu a nahradila ji barvou, která není v souladu s teorií kombinace barev. Někteří respondenti dokonce dokázali definovat i vyměněnou barvu, která nebyla v harmonii s ostatními.

Co to znamená v praxi? Když se rozhodnete namíchat si barevnou paletu sami a netrefíte harmonickou kombinaci, budete ztrácet důvěru zákazníka ještě předtím, než vůbec stihnete něco říct. Pokud vaše paleta není vyloženě průšvih, nejspíš se nestane, že navštěvník z webu odejde rovnou. Bude mít ale pocit, že něco nehraje a tím ztrácíte body.

Při výběru kombinace barev na web se držte pravidel a zohledněte cílovou skupinu

Při výběru barvy na web a vizuální identity nikdy nezapomínejte na cílovou skupinu, základní poznatky teorie barev a testování. Správně zvolené barvy mohou udělat velký rozdíl ve vnímání webu a brandu uživatelem a výrazně ovlivnit konverze, ať už se jedná o koupi vašeho produktu, vyplnění kontaktního formuláře nebo jakoukoliv jinou interakci. Více inspirace a nástroje pro generování barevné palety najdete v článku Barevné kombinace na web: nástroje pro výběr palety, která vás vystihuje a zároveň přitahuje zákazníky

Potřebujete s výběrem pomoct?

Pokud si se svou barevnou paletou nevíte rady, můžete její volbu svěřit mně. Ráda vám pomůžu i s výběrem té správné kombinace, aby byla nejen harmonická a atraktivní, ale aby také ladila i s vaší osobní nebo firemní značkou a podpořila interakce uživatelů webu. Dejte mi vědět, jistě najdeme řešení, které vás bude skvěle reprezentovat.