Pravidlo 60-30-10
Tohle je nejužitečnější pravidlo pro rozložení barev. Pochází z interiérového designu, ale funguje pro jakýkoli projekt.
- 60 %: převládající barva. Obvykle neutrální nebo jemný odstín. Pokrývá pozadí a velké plochy.
- 30 %: vedlejší barva. Dodává osobnost. Použij ji na bloky, menu nebo nábytek.
- 10 %: akcentová barva. Ta nejvýraznější. Použij ji na tlačítka, ikony nebo detaily.
Například: lomená bílá na 60 %, námořnická modrá na 30 % a oranžová na 10 %.
Nemusíš měřit přesně. Jde o to, že jedna barva vede, jedna podporuje a jedna vyniká.
Role neutrálních barev
Neutrální barvy jsou bílá, černá, šedá, béžová, krémová a světlé hnědé. Hodí se téměř ke všemu.
Dávají očím odpočinout a nechávají výrazné barvy lépe vyniknout. Paleta bez neutrálních barev obvykle působí unaveně.
- Bílá a lomená bílá: čistota a prostor.
- Šedá: moderní a střídmá. Vyber teplé nebo studené šedé, které ladí se zbytkem palety.
- Béžová a písková: teplo a přirozenost.
- Černá nebo téměř černá: elegance a kontrast. Na text je velmi tmavá šedá obvykle příjemnější než čistá černá.
Kombinování podle teploty
Barvy jsou teplé (červená, oranžová, žlutá) nebo studené (modrá, zelená, fialová). Kombinovat je můžeš třemi jednoduchými způsoby:
- Jen teplé barvy: útulné a energické. Ideální pro restaurace nebo přátelské značky.
- Jen studené barvy: klidné a profesionální. Ideální pro zdravotnictví, technologie nebo finance.
- Studený základ s teplým akcentem: nejuniverzálnější možnost. Teplý akcent přitáhne pohled na klidném pozadí.
Co obvykle nefunguje: hodně výrazných teplých a studených barev najednou, bez převládající barvy.
Kontrast pro text
Krásná barva je k ničemu, když text nejde přečíst. Kontrast mezi textem a pozadím je zásadní pro čitelnost a přístupnost.
- Používej tmavý text na světlém pozadí nebo světlý text na tmavém pozadí.
- Vyhni se žlutému, světle zelenému nebo světle šedému textu na bílé.
- Nedávej syté doplňkové barvy přes sebe, třeba červenou na zelenou. Bliká to a unavuje oči.
- Pravidla WCAG požadují kontrastní poměr nejméně 4,5:1 pro běžný text a 3:1 pro velký text.
Jakoukoli dvojici barev si můžeš ověřit v naší kontrole kontrastu.
15 kombinací barev, které vždy fungují
Tyto dvojice jsou bezpečným výchozím bodem. Použij je jako základ a podle potřeby přidej neutrální barvu nebo akcent.
- Námořnická modrá a krémová: klasická, seriózní a dobře čitelná.
- Černá a zlatá: luxus a elegance.
- Modrá a oranžová: komplementární a plná energie.
- Jedlově zelená a béžová: přirozená a klidná.
- Růžová a antracitová: moderní a vyvážená.
- Žlutá a černá: maximální kontrast, ideální pro upozornění.
- Bordó a písková: hřejivá a vytříbená.
- Tyrkysová a korálová: svěží a letní.
- Fialová a světle lila: monochromatická a kreativní.
- Hnědá a šalvějově zelená: zemitá, ideální pro přírodní značky.
- Šedá a broskvová: jemná a přívětivá.
- Petrolejová modrá a světle žlutá: klidná s nádechem světla.
- Terakotová a lomená bílá: hřejivá a středomořská.
- Tmavá petrolejová a hořčicová: retro a s charakterem.
- Bílá a červená: přímá, energická a dobře viditelná.
Mnohem víc nápadů s kódy HEX najdeš na naší stránce kombinace barev.
Které barvy se hodí ke které barvě
Pokud už máš hlavní barvu, tento seznam ti dá rychlý výchozí bod:
- Červená: bílá, černá, šedá, námořnická modrá a béžová. Pro něco odvážného: růžová nebo oranžová.
- Oranžová: námořnická modrá, tyrkysová, bílá, krémová a hnědá.
- Žlutá: šedá, černá, námořnická modrá a bílá. Hořčicová se dobře hodí k tmavě zelené.
- Zelená: béžová, bílá, hnědá, zlatá a jemně růžová.
- Modrá: bílá, oranžová, šedá, žlutá a korálová. Námořnická modrá funguje téměř jako neutrální barva.
- Fialová: šedá, lila, zlatá, šalvějově zelená a bílá.
- Růžová: šedá, námořnická modrá, olivově zelená, bílá a zlatá.
- Hnědá: krémová, zelená, petrolejová modrá, oranžová a lomená bílá.
Určitě sis všiml, že neutrální barvy jsou skoro v každém seznamu. Jsou nejbezpečnějším partnerem pro výraznou barvu.
Jak sestavit vlastní kombinaci
- Vyber hlavní barvu podle toho, co chceš vyjádřit.
- Najdi v barevném kruhu vedlejší barvu: sousední pro něco klidného, protější pro něco výrazného.
- Přidej jednu nebo dvě neutrální barvy.
- Vyber jednu akcentovou barvu pro to nejdůležitější.
- Otestuj paletu na skutečném příkladu: webové stránce, snímku prezentace nebo fotce místnosti.
Když váháš, použij méně barev. Tři až pět barev stačí skoro pro každý projekt.
Časté chyby s barvami
- Příliš mnoho barev. Výsledek působí přeplácaně a nic nevynikne.
- Všem barvám stejnou váhu. Bez převládající barvy oko neví, kam se dívat.
- Zapomenutý kontrast. Text, který nejde přečíst, nebo tlačítka, která nikdo nevidí.
- Všechno přesycené. Velmi výrazné barvy unavují. Kombinuj je s jemnějšími odstíny.
- Ignorování kontextu. Barva vypadá jinak za denního světla, na obrazovce a na papíře.
- Kopírování bez úprav. Paleta, která funguje pro jednu značku, nemusí sedět tvému publiku.
- Míchání neutrálních barev různé teploty. Studená šedá vedle teplé béžové může působit špinavě. Vybírej neutrální barvy ze stejné rodiny.
- Netestování na více obrazovkách. Barva může být na počítači krásná a na telefonu mdlá. Vždy ji zkontroluj na víc než jednom zařízení.