Pamatujeme si teorii barvy v hodinách umění: důležitost barevného kola, teploty a chromy. Jako webový designér pracujete s teorií barev každý den - ať už nevědomě nebo vědomě. V tomto příspěvku vám ukážu, jak používat správné principy a nástroje k vytvoření dobrých barevných kombinací pro váš další webový projekt.

Teorie barev: pořadí barev

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 jsme často především vizuální typy. Tvorba barevných kombinací často vzniká ze střeva. Neustále vidíme a analyzujeme barvy kolem nás. Výsledkem je intuitivní způsob zacházení 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í.

Také se na vás nevztahují technická omezení, která máme s tištěnými médii. Jako designérovi vám to dává úžasnou svobodu rozvinout se všude kolem.

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

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.

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.

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

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

Teplé barvy vypadají dominantněji, když jsou spárovány se studenými barvami.

To vám také umožní vyjádřit pocit hloubky. Studené barvy proto vypadají dále než teplé. Barvy intenzivního tepla mohou také způsobit, že studené barvy vypadají ještě chladnější.

Š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 samy o sobě se zdají být spíše nezajímavé, a proto potřebují alespoň jednu barvu, aby vynikly. 

Výjimky potvrzují pravidlo zde, protože existují některé minimalistické černobílé rozložení, které se obejdou bez dalších barev. Hnědá a béžová může také vypadat velmi atraktivně jako dominantní barva, e.B. v monochromatickém designu.

Primární barvy jsou ve vzájemném kontrastu.

Existuje další způsob, jak vytvořit kontrast. Při pohledu na barvy, které se pohybují asi tři pole od sebe na barevném kole. Tyto páry mohou snadno vytvořit disharmonii. Protože se navzájem kousají. Při správném použití, například jako výzva k akci, však mohou vašemu návrhu poskytnout zajímavý kontrast.

8 principů pro harmonické barevné palety

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.

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.

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.

Č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.

Č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.

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.

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ů.

Inspirace a nástroje pro teorii barev

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 prohlížečová aplikace založená na AI, která se učí, které barvy vám mají konkrétně říct, a vytváří odpovídající kombinace. Rozhodně doporučujeme jako rychlou inspiraci pro barvy a kombinace.
• Coolors je platforma, kde se můžete inspirovat a vytvářet barevné palety sami. Nabízí také rozšíření pro Chrome a Adobe.

Podobně jako Adobe Color Wheel, Colorco také funguje. Můžete nastavit princip, podle kterého má být paleta barev vytvořena. Jednoduchým najetím myší pak můžete testovat a vytvářet barevné kombinace. Svůj výběr si můžete stáhnout jako šablonu stylů Sass nebo .png.

Kromě toho, atraktivně navržená webová stránka pro zkoumání různých barev a jejich efektů, vám nabízí emotivní pocity.