handl_ /lab/barvy
← Všechny nástroje

Barvy, harmonie a přechody

Co jednotlivé barvy evokují, které spolu ladí a proč, a k tomu generátor přechodů, ze kterého si stáhnete obrázek v přesné velikosti nebo CSS pro web.

Co barvy evokují

Běžné asociace v evropském a českém prostředí. Každá barva má světlou i stinnou stránku a o tom, která převáží, rozhoduje odstín, okolní barvy a obor.

Červená#E5383B
Plus: energie, vášeň, láska, naléhavost Pozor: nebezpečí, agrese, chyba Slevy, jídlo, sport, výstrahy a chybové hlášky.
Oranžová#FF7A2E
Plus: přátelskost, kreativita, energie bez agrese Pozor: v přemíře levná a hlučná Výzvy k akci, kreativní obory, produkty pro děti.
Žlutá#FFD23F
Plus: optimismus, slunce, pozornost Pozor: varování, úzkost, špatná čitelnost na bílé Upozornění, doprava, stavebnictví, akcenty.
Zelená#2EAA5C
Plus: příroda, zdraví, růst, „v pořádku“ Pozor: nezralost, v odstínu zeleno-šedé nemoc Ekologie, finance, zdraví, potvrzení akce.
Tyrkysová#20B2AA
Plus: svěžest, klid, čistota, voda Pozor: chlad, odstup Wellness, cestování, technologie, zdravotnictví.
Modrá#2D6CDF
Plus: důvěra, spolehlivost, profesionalita, klid Pozor: chlad, odměřenost, smutek Banky, IT, pojišťovny, korporace. Nejčastější barva značek.
Fialová#7B4FD6
Plus: luxus, kreativita, tajemno, fantazie Pozor: umělost, výstřednost Kosmetika, prémiové produkty, kreativní služby.
Růžová#F06FA8
Plus: něha, hravost, romantika, odvaha Pozor: infantilnost, stereotyp Kosmetika, móda, cukrárny i odvážné moderní značky.
Hnědá#8B5A3C
Plus: zemitost, tradice, řemeslo, jistota Pozor: nuda, zašlost Káva, dřevo, řemeslné a farmářské produkty.
Černá#18181B
Plus: elegance, síla, luxus, autorita Pozor: tíha, smutek, odstup Móda, luxus, prémiová technika, typografie.
Bílá#F7F5F2
Plus: čistota, jednoduchost, prostor Pozor: sterilita, prázdnota Zdravotnictví, minimalismus, technologie, pozadí.
Šedá#8A8A90
Plus: neutralita, rovnováha, profesionalita Pozor: nevýraznost, nuda Pozadí, texty, pomocné prvky, technika.

Význam barev není univerzální. V části Asie je bílá barvou smutku, v Číně červená znamená štěstí a v jednom oboru působí zelená jako „zdravé“, v jiném jako „levné“. Ber to jako odrazový můstek, ne pravidlo.

Barevný kruh a co ladí dohromady

Vyberte základní barvu a typ harmonie. Kruh ukáže, kde barvy leží, a pod ním dostanete hotovou paletu i ukázku, jak by vypadala na webu.

#FF7A2E
Harmonie
Kruh
Malířský kruh znáte ze školy: k červené patří zelená, k modré oranžová, ke žluté fialová. Lépe odpovídá tomu, jak barvy vnímáme a jak se míchají v tisku a malbě.
protilehlé

Komplementární

Dvě barvy naproti sobě v kruhu. Nejvyšší kontrast a energie: jednu použijte jako hlavní a druhou jen jako akcent, třeba na tlačítka.

Kliknutím na vzorek zkopírujete jeho kód.
Pravidlo 60 – 30 – 10
Studio UkázkaSlužby · Kontakt
Nadpis, který zaujme Hlavní barva drží plochu, doplňková dává strukturu a akcent jen tam, kam má jít pozornost. Hlavní akce
Zhruba 60 % plochy tvoří neutrální nebo hlavní barva, 30 % doplňková a 10 % akcent na tlačítka a důležité prvky.
Pozor na vibrování
Doplňkové barvy vedle sebe
Stejné barvy, jiná světlost
Komplementární barvy se vzájemně zesilují. Když mají podobnou světlost, hrana mezi nimi „bliká“ a text se špatně čte. Jednu z nich zesvětlete nebo ztmavte, nebo je oddělte neutrální barvou.

Generátor přechodů

Poskládejte přechod, vyberte přesnou velikost v pixelech a stáhněte obrázek, nebo si zkopírujte CSS pro web.

Předvolby
Typ
Barvy přechodu
0 %
100 %
Velikost obrázku
×
poměr 16 : 9
background: linear-gradient(135deg, #FF7A2E 0%, #3D8BFF 100%);