Jak vybrat barvy pro web: barevný kruh, doplňkové barvy a kontrast

Barvy jsou první, čeho si návštěvník na webu všimne – dřív než textu i fotek. Rozhodují, jestli web působí klidně, nebo chaoticky, jestli sedí k firmě a hlavně jestli návštěvník najde tlačítko, na které má kliknout. Dobrá zpráva: nemusíte být grafik. Stačí pár pravidel, podle kterých barvy vybírám i u webových stránek pro firmy a živnostníky.

Barevný kruh: jak jdou barvy po sobě

Základní pomůcka je barevný kruh. Barvy v něm jdou po sobě jako v duze – červená, oranžová, žlutá, zelená, modrá, fialová – a na konci se kruh vrací zpátky k červené.

Obrazovka ve skutečnosti míchá barvy jinak, ze světla červené, zelené a modré (RGB). Pro hledání kombinací, které k sobě ladí, se ale používá právě tenhle malířský kruh.

Doplňkové barvy

Doplňkové (komplementární) barvy leží v kruhu naproti sobě: červená a zelená, oranžová a modrá, žlutá a fialová. Vedle sebe si navzájem dodávají sílu, a proto nejvíc přitahují pozornost.

Na webu to znamená jediné: doplňková barva k hlavní barvě webu je ideální pro tlačítka. Nesmí jich ale být stejně – dvě doplňkové barvy ve stejném množství vedle sebe „kmitají“ a unavují oči. Jedna vládne, druhá je akcent.

Příklad: JK Sped má hlavní barvu modrou, tlačítka žlutooranžová. Leží v kruhu skoro naproti sobě, takže tlačítka „Naše služby“ a „Kontakt“ jsou vidět na první pohled.

Doplňková barva na tlačítka, hlavní barva na všechno ostatní.

Další kombinace, které fungují

• Jedna barva v odstínech (monochromatická) – tmavší a světlejší varianty jedné barvy. Nejbezpečnější volba, působí klidně a jednotně. Na tlačítka pak stačí nejvýraznější odstín.
• Sousední barvy (analogické) – tři barvy vedle sebe v kruhu, třeba modrá, modrozelená a zelená. Přirozené a harmonické, hodí se pro přírodu, zdraví a wellness.
• Trojice (triáda) – tři barvy rovnoměrně rozložené v kruhu, třeba červená, žlutá a modrá. Pestré a hravé, ale těžko se ukočírují. Spíš pro dětské a zábavní obory.

Pravidlo 60-30-10

Víc než to, které barvy vyberete, rozhoduje, kolik jich kde použijete. Osvědčený poměr:

• 60 % neutrální základ – pozadí, velké plochy (bílá, krémová, světle šedá)
• 30 % hlavní barva – hlavička, patička, nadpisy, tmavé sekce
• 10 % akcent – tlačítka a pár důležitých detailů

Tenhle web to má zhruba takhle:

Podobně to má stavební firma You & Us: petrolejová jako hlavní barva a zlatá jen na drobné akcenty.

Barva tlačítek

Hlavní tlačítka (Poptat, Objednat, Zavolat) mají mít jednu barvu, která se jinde na webu skoro nepoužívá. Návštěvník se ji během pár vteřin naučí a ví, kam kliknout. Když má stejnou barvu nadpis, rámeček i ikona, tlačítko se mezi nimi ztratí. Víc o tom, co na webu přivádí poptávky, v článku Co musí obsahovat web, aby přiváděl zákazníky.

Kontrast: text se musí dát přečíst

Hezká kombinace barev je k ničemu, když se na ní nedá číst. Mezinárodní doporučení pro přístupnost webu (WCAG) říká, že běžný text má mít proti pozadí kontrast aspoň 4,5 : 1, velký text a tlačítka aspoň 3 : 1. Jak to vypadá v praxi:

Proto má limetková na tomhle webu dvě podoby. Na tmavém pozadí svítivou #c7cb36, na světlém tmavou olivovou #59600f (kontrast 6,8 : 1). Světlou limetkovou na bílém najdete jen jako podtržení odkazů a odrážky, nikdy jako text. A proto má JK Sped na žlutých tlačítkách tmavý text, ne bílý. Kontrast si ověříte zdarma ve WebAIM Contrast Checker (otevře se v novém okně).

Co barvy vyjadřují

• modrá – důvěra a spolehlivost (banky, technika, doprava)
• zelená – příroda, zdraví, ekologie
• červená – energie, naléhavost, jídlo
• oranžová a žlutá – pozornost, optimismus, akce
• černá a tmavé odstíny – luxus, elegance, prémiovost
• hnědá a zemité tóny – tradice, řemeslo, poctivost

Berte to jako vodítko, ne jako zákon. Víc než obecný význam barvy rozhoduje, aby seděla k vašemu logu a k tomu, co zákazník od oboru čeká.

Webové barvy: HEX, RGB a HSL

Na webu se barvy zapisují kódem. Stejná modrá z webu JK Sped má tři zápisy:

• HEX – #066594, nejčastější zápis, najdete ho v každém grafickém programu
• RGB – rgb(6, 101, 148), množství červené, zelené a modré od 0 do 255
• HSL – hsl(200 92% 30%), odstín, sytost a světlost; nejsnáz se v něm dělají světlejší a tmavší varianty

Barvy si zapište jako kódy a používejte je všude stejně – na webu, v tiskovinách i na sociálních sítích.

Jak na to krok za krokem

1. Vyjděte z loga. Pokud logo máte, hlavní barva webu je většinou daná.
2. Vyberte jednu hlavní barvu, ne tři.
3. Doplňte neutrální základ – světlé pozadí a tmavý (ne úplně černý) text.
4. Najděte akcent pro tlačítka – doplňkovou barvu, nebo výrazně jasnější odstín.
5. Ověřte kontrast textu i tlačítek.
6. Zapište si kódy a držte se jich.

S hledáním kombinací pomůže Adobe Color (otevře se v novém okně) – zvolíte barvu a vybarví vám doplňkovou, sousední i trojici. Rychlé nápady na celé palety dává Coolors (otevře se v novém okně).

Nejčastější chyby

• příliš mnoho barev bez jasné role
• tlačítka ve stejné barvě jako nadpisy a ikony
• světlý text na světlém pozadí, bílý text na žluté
• křiklavé barvy na velkých plochách
• na webu jiné barvy než v logu a na vizitkách

K barvám patří i písmo – jak ho vybrat, najdete v článku Jak zvolit fonty na web. S logem a vizuálem pomůžu i samostatně v rámci grafických a fotoeditačních prací. Chcete vidět, jak by mohl vypadat váš web ve vašich barvách? Začněte návrhem webu zdarma.