← Zpět na výpis článků

Výběr barev pro web a psychologie barev v designu

Obsah

Výběr barev pro web a psychologie barev v designu

Barevnost je spolu s typografií jedním z klíčových prvků úspěšného designu. Přiblížíme si význam barev v rámci a psychologie, která hraje klíčovou roli ve vytváření dobrého uživatelského zážitku.
Magda Synovcová
28. 10. 2023
Palming: Uvolnění očí, klidná mysl

Články

Výběr barev pro web a psychologie barev v designu

Barevnost je spolu s typografií jedním z klíčových prvků úspěšného designu. Přiblížíme si význam barev v rámci a psychologie, která hraje klíčovou roli ve vytváření dobrého uživatelského zážitku.

HEX kód barvy

Pro identifikaci konkrétních barev v designu využívají designéři tzv. HEX kódy. Tyto kódy se skládají z šesti čísel a jsou základním kamenem jak pro designéry, tak pro vývojáře při implementaci barev do celkového designu.

Výběr barev pro web a psychologie barev v designu. HEX kód barvy

Psychologie Barev

Pro úspěšné využití barev v designu je klíčové pochopení významu jednotlivých barev a jejich spojení s firemní identitou. Každá barva vyvolává určité emoce a asociace. Můžeme identifikovat firemní odvětví pomocí konkrétních barev. Zde je přehled některých emocí spojených s konkrétními barvami:

Modrá – Svoboda, důvěra, věrnost, radost, moudrost
Odvětví – Bezpečnost, finance, technologie, účetnictví, bankovnictví, zdraví

Fialová – Představivost, citlivost, tajemnost
Odvětví Duchovní, humanitární, technologická

Červená Energie, vášeň, pozornost, odvaha
Odvětví Jídlo, sport, děti, produkty, zdraví

Zelená Růst, harmonie, laskavost, bezpečí
Odvětví Životní prostředí, bankovnictví, nemovitosti, neziskovky

Žlutá Štěstí, spontánnost, pozitivita, nadšení
Odvětví Jídlo, cestování, doprava, kreativní průmysl

Oranžová Optimistický, zábavný, kreativita, samostatný
Odvětví Umění, jídlo, sport, zábava

Bílá Čistota, jednoduchost, mír, přesnost
Odvětví Zdraví, luxus značky, móda, šperky

Černá Síla, kontrola, elegance, autorita
Odvětví Automobilový průmysl, luxusní značky, móda

Princip 60-30-10

Pro harmonické využití barev na stránce lze využít pravidlo 60-30-10, které určuje podíl dominantní, sekundární a akcentní barvy na rozhraní. Toto pravidlo nabízí vodítko pro rovnoměrné rozložení barev na stránce. Není však nutné měřit objekty na stránce, aby byl tento poměr přesně dodržen. Barvy lze přizpůsobit dle konkrétního designu a účelu stránky.

Barevné gradienty

V posledních letech zažívají barevné gradienty velký návrat v designu. Při vytváření barevných gradientů je důležité dbát na přirozený přechod mezi barvami a omezit počet barev na 2-3.

Dark mode rozhraní

Dark mode rozhraní je v současnosti populárním trendem. Při jejich návrhu je důležité vyhnout se příliš sytým barvám a správně zvolit pozadí. K dispozici jsou různé nástroje pro kontrolu kontrastu barev.

Závěr

Barevné palety a barvy – coolors.com, canva.com
Barevné gradienty – grabient.com, gradienthunt.com
Přístupnost barev – getstark.co, colourcontrast.cc

Magda synovcová - webdesigner

Magda Synovcová

Pomáhám podnikatelům a firmám vytvořit web, který nejen skvěle vypadá, ale hlavně přitahuje zákazníky.