Barvy na web: 5 milníků, které vás dovedou k výběru

9. 6. 2024

Stojíte před velkým krokem postavit si svůj web? Nejste si jistý/á, jaká barva je pro váš projekt nejvhodnější? Nebudu lhát, výběr barev je i pro mě na delší dobu. Pomáhají mi tato pravidla, která jsou vhodná dodržovat. Může vám v inspiraci pomoci, jedna či více z 5 aplikací, které sama používám pro výběr barevné palety. Jak tedy zvolit barvy na web?

Milníky pro výběr barev

1. Popřemýšlejte o psychologii barev

Každá barva vyzařuje různé energie, které pak působí na naší náladu, dojem či chování. Každý se již setkal s rudě červeným plakátem se žlutým nápisem „20% sleva!“. Co se stalo? Pravděpodobně jste běželi slevy okouknout. Stejná barevná kombinace působí i jinak. Jaký pocit se vám vybaví, když si představíte při cestě na dálnici žluté M s červeným pozadím na billboardu na dálnici? Zkrátka, barvy vám pomůžou prodat, zvýšit důvěru a pomohou vaší značce být zapamatovatelní. A samozřejmě na opak.

❤️ červená barva – Je velmi stimulující, má za úkol vyvolat silné emoce. Zvyšuje srdeční tep, neboť může vyjadřovat nebezpečí. Je symbolem lásky vášně, sexuální touhy, síly, moci, energie, odvahy a ochrany. Také je barvou krve. Často se používá ve výzvách k akci (CTA), výprodejích a upozorněních. Je vhodná pro značky, které chtějí působit energicky a vášnivě. Tuto barvu používá: Coca-Cola, Netflix, KFC, Zásilkovna.

🧡 oranžová barva – Je symbolem radosti a tvořivosti, dobrodružství, odvahy, energie, hravosti, úspěchu a štěstí. Oranžová kombinuje energii červené a radost žluté. Je stimulující a může povzbuzovat chuť k jídlu. Hodí pro produkty zaměřené na mládež a sportovní značky. Pomáhá vytvořit dynamický a přátelský dojem. Také je hojně využívaná u bohémských webů, ať už jsou to fotografové, blogeři či e-shopy s boho dekoracemi. Tuto barvu používá: Fanta, Allegro, Temu.

💛 žlutá barva – Symbolizuje slunce, touhu po svobodě, cestování, radost, zářivou energii, sebevědomí. Je vhodná pro produkty a služby, které chtějí vyvolat radost a energii. Používá se také pro varování a zvýraznění důležitých informací. Dávej na ní ale bacha, můžou z ní také pěkně bolet oči. Tuto barvu používá: McDonald’s, Česká Pošta, Fortuna, IKEA.

💚 zelená barva – Zelená je barva přírody. Podporuje pocit klidu a rovnováhy. Je spojována se zdravím a hojností. Je skvělou volbou pro ekologické produkty, wellness, zahradnictví a terapeuty. Pomáhá vytvořit pocit čerstvosti a přírodnosti. Tuto barvu používá: ŠKODA, Lesy ČR, Mapy.cz, Spotify.

💙 modrá barva – Používá se převážně u finančních a zdravotních institucí. Vyjadřuje čistotu, až sterilitu, zároveň důvěru, stabilitu a profesionalitu. Snižuje chuť k jídlu a krevní tlak. Připomíná nekonečnost nebe, přináší inspiraci a dává nám pocit svobody. Pomáhá také v komunikaci. Tuto barvu používá: PPL, České dráhy, Facebook, NASA.

💜 fialová barva – Je symbolem pro duchovno, tajemství, luxus. Kombinuje stabilitu a klid modré s energií a vášní červené. Světlejší odstíny fialové mohou působit jemně a romanticky, což je vhodné pro ženské značky. Tmavší odstíny fialové mohou vyvolávat pocit autority a moci, což je vhodné pro značky, které chtějí působit prestižně a exkluzivně. Tuto barvu používá: Whiskas, Discord, Milka, Košík.cz.

🩷 růžová barva – Růžová navozuje pocit lásky, péče a jemnosti. Působí uklidňujícím dojmem a často je spojována s ženskostí. Ideální pro produkty zaměřené na ženy a dívky, kosmetiku a péči o zdraví, sebelásku. Tuto barvu používá: Barbie, Foodora, T-Mobile, Badoo.

🤎 hnědá barva – Spojuje se se zvířaty, domovem a domácností, rovnováhy a bezpečím, uzemněním. Je uklidňující a přirozená. Je často používaná pro outdoorové produkty, zemědělství a ekologické značky. Tuto barvu používá: Nespresso, Kofola, UPS.

🖤 černá barva – Černá je silná a elegantní barva. Vyvolává pocit autority a sofistikovanosti. Často se používá v luxusním zboží, módě a technologických produktech. Pomáhá vytvořit elegantní a profesionální dojem, případně neutrální a minimalistický. Tuto barvu používá: Threads, Tesla, Apple, Adidas.

🤍 bílá barva – Symbolizuje čistotu, nevinnost, jednoduchost, svěžest. Je hlavní barvou minimalismu ve spojení s černou. Můžeš jí nakombinovat s jakoukoliv barvou a nikdy neuděláš chybu.

2. Kdo je váš ideální zákazník?

Ve společnosti stále převládá názor, že nějaké barvy jsou pro kluky, ty další zase pro holky. Uff, už by se toto stigma mohlo zrušit. Nicméně, je faktem, že webové stránky cílící na ženy, používají jemnější tóny barev. Převážně broskvovou, lilu, starorůžovou, krémovou, lososovou, akvamarínovou, blankytnou. Právě jsem odradila od čtení článku zbytek mužů. 😄 Ty zase spíše táhne černá, modrá, zelená, hnědá. Raději prochází web v tmavém režimu (černé pozadí, bílý text).

Nedělejte stejnou chybu jako já. Určete si barvu webu dle návštěvníků, ne svou oblíbenou. Pak se vám také může stát, že budete měnit web podle toho, jak se budete vyvíjet. Ano, za poslední rok jsem měnila design 4x! Je pravda, že pokud máte svůj osobní web, měl by s vámi být v souladu. Pokud jste ale příznivcem/příznivkyní svítivých barev nebo mnoha barevných kreací, brzděte. To na web úplně nedávejte a raději se držte „barev v oboru“. Barva totiž pak nemusí ladit k vaším výrobkům a vznikl by cirkus, místo webu, který je naopak vyzdvihne.

3. Nezapomeňte na čitelnost!

Doteď občas vkročím na web, u kterého luštím obsah. Buď je text moc světlý na bílém pozadí, nebo je svítivý na jinak barevném pozadí. Pokud se přemůžete a podobný web přečtete, můžete si dojet rovnou na oční. Pro návštěvníky to příjemné počtení rozhodně není. Nečekejte, že si od vás pak něco koupí nebo objednají. Myslete i na návštěvníky, kteří oční navštěvují často a mohou mít zrakovou vadu. Pro ně může být text úplně neviditelný.

Doporučuji si zkontrolovat barevný kontrast přes rozšíření Color Contrast Checker. Pomůže vám identifikovat texty, které nemusí být čitelné pro různá zraková postižení.

Ukázka kontrastu na návrhu webu pro mého klienta. Tento audit byl vytvořen skrze Figmu a plugin Contrast.

4. Kolik barev potřebuji?

Můžete si na webu vystačit se 2 barvami (černá, bílá). Pokud chcete přidat barev více, budete potřebovat minimálně tyto:

  • barva pozadí (běžně bílá)
  • barva textu (běžně černá, tmavé odstíny šedé)
  • barva tlačítek (1-2 barvy, záleží, zda chcete při najetí myši změnit barvu pozadí nebo raději zvolíte animaci)
  • barva meta textu (většinou šedá, pro předvyplnění formuláře, datum publikace článku,…)

5. Kde se můžu inspirovat?

Pokud máte jednu barvu a nevíte, s jakými ji zkombinovat, můžete mrknout do těchto webových aplikací. Já sama je používám pravidelně při výběru barev pro klienty.

Pinterest

Platformu, na který každý najde to, co potřebuje. Od návodů na vyrábění, střihů na šití, zajímavých článků, outfitů, po barevné palety.

Coolors

Nechte si vygenerovat různé barevné palety, měňte si odstíny, přidávejte další barvy. Můžete vytáhnout barvy i z vlastní fotky. Skvělé je, že přímo v této aplikaci si můžete vyzkoušet, jak vámi zvolené barvy uvidí barvoslepí návštěvníci.

Canva

Stará známá Canva umí i generovat barvy. Bohužel po změně designu Canvy je tato stránka hůře dohledatelná, nebo jsem možná ještě nepřišla na to, kde je. 😄 Můžete si generovat barvy na barevném kole. Také se můžete začíst do významů barev, kde je obrovské množství odstínů.

ColorSpace

Super aplikace, která vám pomůže namixovat gradient (přechod) barev. Stačí zadat HEX kód barvy a aplikace vám již vybere vhodné barvy k namíchání.

Colorable

Troufnete si na odvážnější barvy? Zkus Colorable. Jako první vám vyhodí ostré barvy. Ty si ale můžete pomocí posuvníků nastavit dle sebe. Můžete si hrát se saturací a jasem.

Nyní už teoreticky víte, jaké barvy potřebujete. Utíkejte si je vygenerovat a složte si svou barevnou paletu pro váš nový web. Potřebuješte poradit? Napište mi.

Přečtěte si další články

27. 6. 2024 ·
6 min čtení

64 nápadů na letní blogové články

Každé léto je úžasné! Většina se dočká svých dovolenkových dní, školáci a studenti hodí tašku do kouta, a někteří v práci mají volněji, protože tam není šéf. Zapojte do své…

16. 10. 2024 ·
8 min čtení

Jak a proč si vytvořit firemní profil na Google

Ať jste firma nebo živnostník a chcete budovat povědomí o svém podnikání nejen mezi přáteli na Facebooku, vytvořte si firemní profil na Google. Tento profil vám umožní prezentovat své služby…

17. 12. 2024 ·
11 min čtení

Temná stránka online podnikání

Online podnikání je snem mnoha lidí – flexibilní pracovní doba, možnost pracovat odkudkoliv a příslib finanční nezávislosti zní lákavě. Ale je to opravdu taková idylka, jak se často prezentuje? Každá…