Teorie barev ve webdesignu: Jak najít správnou paletu barev pro vaše webové stránky

7 min.
An introduction to color theory for web designers

Asi si všichni nejasně vzpomínáme na teorii barev v hodinách výtvarné výchovy: význam primárních, sekundárních a terciárních barev. Jako webdesignéři a webdesignérky pracujete s teorií barev každý den – ať už podvědomě nebo vědomě. V tomto příspěvku vám ukážu, jak používat správné zásady a nástroje k vytvoření dobrých barevných kombinací pro váš příští webový projekt.

Teorie barev: Proč je oživení někdy nutné

První zmínky o teorii barev, nazývanou také color theory, a barevném kruhu pocházejí přinejmenším z počátku 17. století. Původ barev, odraz světla, proces v lidském oku – to vše zaměstává lidstvo již dlouho.

My designéři a designérky jsme často především vizuálními typy. Vytváření barevných kombinací často vychází z nitra. Neustále vidíme a analyzujeme barvy kolem sebe. Výsledkem je intuitivní způsob práce s barvami. 

Faktické znalosti o barvách a jejich účincích jsou však nezbytné nejen pro vysvětlení výběru a uspořádání barev. Je také důležité učinit rozhodnutí, která se odchylují od normy.

Chcete-li najít optimální barevné kombinace pro vaše zákazníky a webové stránky, je správná znalost teorie barev nevyhnutelná.

Ve srovnání s tiskovými médii máme jako designěři a designérky rozhodující výhodu: To, kolik barev nakonec použijeme a jaké tóny zvolíme, nemá žádný vliv na cenu produkt. To však platí pouze po dobu, kdy je náš projekt digitální.

Neplatí pro vás ani technická omezení, která platí pro tištěná média. To vám dává jako designérům a designérkám úžasnou svobodu plně se rozvíjet.

Barevný kruh, teplota a chroma

Naše obrazovky jsou obvykle založeny na RGB (red, green, blue) - také známé jako Additive Color System. Pravidlem je, že vše, co odráží světlo, je na Additive Color System založeno. V této struktuře používáme jako výchozí bod primární barvy. Bílá vzniká spojením všech barev, zatímco černá představuje absenci barev.

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

Vysvětleno na příkladu jednoduchého barevného kruhu: Primární barvy jso žlutá, červená a modrá. Sekundární barvy vznikají smícháním primárních barev. Terciární barvy znikají ze směsí, které obsahují primární a sekundární barvy.

Color theory in web design
Barevný kruh popisuje a rozděluje barvy.

Hues, tints, shade a chroma

Hues, neboli odstín, popisuje šest nesmíšených primárních a sekundárních barev:

  • Tints popisuje odstín, který vznikne přidáním bílé barvy.
  • Shades používá stejný princip jako tints – zde však přimícháme černou barvu.
  • Chroma, neboli sytost nebo tón, je to, co nazýváme míchání odstínů s šedými nebo neutrálními barvami, jako je bílá a černá. Pokud se budeme řídit touto definicí, pak patří shades a tints také do chroma.

Teplota a kontrast

Color theory in web design
Teplota a kontrast barev

Barvy můžete také rozdělit do teplot. Platí zde několik pravidel:

Teplé barvy působí dominantněji, když je kombinujete se studenými barvami. To vám také umožní navodit pocit hloubky. Studené barvy se proto zdají být vzdálenější než teplé. Intenzivní teplé barvy mohou také způsobit, že studené barvy budou působit ještě chladněji.

Šedá a odstíny šedé, bílé a černé patří do skupiny neutrálních barev. K neutrálním barvám se také často přiřazuje béžová a hnědá. Osobně s tím souhlasím jen částečně, protože odstín šedé může rozhodně působit jak teple tak chladně. Mezi teplé tóny řadím také béžovou a hnědou. Neutrální barvy definuji jako bílou a černou a všechny odstíny šedé mezi nimi, ke kterým nebyla přidána žádná další barva.

Neutrální barvy vypadají samy o sobě dost nezajímavě, a proto potřebují alespoň jednu barvu, aby vynikly. Výjimky zde potvrzují pravidlo, protože existují minimalistické černobílé layouty, které se obejdou bez dalších barev. Hnědá a béžová mohou vypadat atraktivně i jako dominantní barva, např. v monochromatickém designu.

Primární barvy jsou vzájemně kontrastní. Existuje ještě jeden způsob, jak vytvořit kontrast. Podívejte se na barvy, které jsou na barevném kruhu vzdáleny asi 3 čtverce od sebe. Tato spojení mohou snadno vyvolat disharmonii. Neladí k sobě. Pokud je však použijete správně, například jako call to action, mohou vašemu designu dodat zajímavý kontrast.

Osm zásad pro vytváření harmonických barevných palet

Komplementární barvy

Komplementární, neboli doplňkové, barvy, jsou dvě barvy, které se nachází přímo proti sobě, jsou kombinovány v tomto konceptu, jako v příkladu Youtube Culture & Trends Report.

Color theory in web design
Doplňkové barvy v barevném kruhu

Dvě doplňkové barvy se od sebe maximálně odlišují. Vznikne tak kontrastní, ale harmonické barevné schéma. Tyto designy se hodí k dynamickému designu, který upoutá pozornost. Proto byste se měli ujistit, že odráží i produkt, který chcete komunikovat.

Trojúhelníková kombinace

Trojúhelníková kombinace popisuje tři barvy, které jsou od sebe na barevném kruhu stejně vzdálené.

Podobně jako předchozí kombinace je i tato poměrně jednoduchá a snadno použitelná. Nabízí větší rozmanitost, ale stále neuděláte nic špatně. Neexistuje téměř žádná harmonická kompozice ze základního principu. Tyto barevné palety se hodí zejména pro webové stránky, které mají oslovit širokou škálu uživatelů.

Přesto byste měli zvolit barvu, která bude v designu dominovat. Tím je zajištěn jasný design a větší harmonie. To ukazuje také příklad Slaveryfootprint.org.

Color theory in web design
Trojúhelníková kombinace na příkladu webové stránky
Color theory in web design
Trojúhelníková kombinace v barevném kruhu

Rozdělené doplňkové barvy

Rozdělené doplňkové barvy popisují podobný koncept jako doplňkové barvy. Zde je rozdělena pouze jedna stránka. Místo doplňkové primární barvy nyní použijete okolní terciární barvy. Tato paleta nabízí více možností kombinací.

Přidání třetí barvy do doplňkového schématu dodá layoutu trochu více rovnováhy. Tato kombinace se na webu používá poměrně často. Barevné schéma nemusí být přitom tak výrazné jako v tomto příkladu

Třetí barvu používají často designéři a designérky jako akcentní barvu a používají ji velmi střídmě. Díky tomuto principu můžete svým webovým stránkám dodat jemný kontrast.

Color theory in web design
Rozdělené doplňkové barvy v barevném kruhu
Color theory in web design
Rozdělené doplňkové barvy na webu

Čtvercová kombinace barev

Podobně jako u třístranného konceptu kombinuje čtvercová kombinace barev čtyři barvy. Tato kombinace je ze všech dosud představených nejobtížnější na zvládnutí. 

I zde kombinujeme dva páry doplňkových barev. Je tu však vyžadován cit při rozdělování hierarchie. Na této webové stránce je červený tón použit střídmě, aby červená nepřevládala nad ostatními barvami. Místo toho byly jako dominantní barvy použity studená modrá a neutrální béžová.

Dbejte při použití tohoto principu na to, aby byly teplé a studené barvy ve vzájemném souladu.

Color theory in web design
Čtvercová kombinace barev v barevném kruhu
Color theory in web design
Čtvercová kombinace barev na webové stránce

Čtvercově rozdělené doplňkové barvy

Skládá se ze dvou sousedních barev a jejich doplňkových barev.

Pomocí těchto barev můžete vytvořit barevnou paletu, která vám poskytne přitažlivý kontrast doplňkových barev a zároveň bude rozmanitější, než v tomto příkladu.

Analogie

Analogové palety barev jsou dvě nebo více barev, které leží na barevném kruhu vedle sebe. Analogové barevné palety jsou méně kontrastní než výše popsané kompozice, ale přesto dosáhnou svého efektu. 

Pro vlastní webové stránky je dobré vytvořit hierarchii a používat barvy podle ní. V následujícím příkladu zvolilo Crips Studios fialovou jako svou dominantní barvu. Tato barva pak také určuje náladu na vašem webu.

Color theory in web design
Analogové palety barev v barevném kruhu
Color theory in web design
Analogové palety barev na webové stránce

Monochromatika

Monochromatika popisuje různé tóny a/nebo chroma téže barvy. Jedná se o nejjednodušší způsob, jak dosáhnout harmonického barevného schématu. Při dobrém použití mohou vaše stránky vyniknout mezi ostatními stránkami.

Použití monochromatických barev navíc zvyšuje emocionální efekt původní barvy a také vytváří eleganci. Minimální design těží z monochromatických barevných palet. Měli byste také vědět, že monochromatické webové stránky mají nízký kontrast.

Color theory in web design
Monochromatické barvy na webových stránkách

Chroma a odstín

Použití barev s podobnými hodnotami chromatu nebo odstínu. V příkladu Bliss byla harmonie vytvořena neustálým používáním pastelových tónů.

Color theory in web design
Chroma a odstín jsou ve webdesignu důležité.

Inspirace a online nástroje

Dnes už je to spíše klasika a stále jeden z mých nejoblíbenějších nástrojů pro vytváření barevných palet: Adobe Color Wheel.

Nově můžete také zkontrolovat, zda se výběr zobrazí dostatečně kontrastně i pro uživatele, kteří trpí barvoslepostí.

  • Eggradients poskytuje řadu inspirací pro gradienty a odpovídající styly CSS.
  • Khroma je aplikace prohlížeče založená na AI, která se učí, které barvy máte rádi a vytváří vhodné kombinace. Rozhodně doporučujeme jako rychlou inspiraci pro barvy a kombinace.
  • Coolors je platforma, kde se můžete inspirovat a vytvořit si vlastní barevné palety. Nabízí také rozšíření pro Chrome a Adobe.

Podobně jako Adobe Color Wheel funguje i Colourco. Můžete nastavit princip, podle kterého má být paleta barev vytvořena. Pomocí jednoduchého hoverování pak můžete testovat a vytvářet barevné kombinace. Výběr si můžete stáhnout jako sass stylesheet nebo .png.

Color theory in web design

Kromě toho vám https://emotivefeels.com/ nabízí atraktivně navržené webové stránky pro zkoumání široké škály barev a jejich efektů.

Vaše otázky týkající se teorie barev ve webdesignu

Jaké jsou vaše zkušenosti s barvami ve webdesignu? Jaké otázky máte na Sonju? Dejte nám vědět v komentářích! Chcete být informováni o nových příspěvcích u RAIDBOXES? Pak nás sledujte na Twitteru, Facebooku nebo přes náš Newsletter.

Po studiu designu počítačových her a kreativního psaní v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamifikaci a výzkum motivace uživatelů a jejích zkušeností, a s velkou vášní a zvědavostí na technologické trendy.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.