Pravidlo 60-30-10
Toto je najužitočnejšie pravidlo na rozloženie farieb. Pochádza z interiérového dizajnu, ale funguje pre akýkoľvek projekt.
- 60 %: prevládajúca farba. Zvyčajne neutrálna alebo jemný odtieň. Pokrýva pozadie a veľké plochy.
- 30 %: vedľajšia farba. Dodáva osobnosť. Použi ju na bloky, menu alebo nábytok.
- 10 %: akcentová farba. Tá najvýraznejšia. Použi ju na tlačidlá, ikony alebo detaily.
Napríklad: lomená biela na 60 %, námornícka modrá na 30 % a oranžová na 10 %.
Nemusíš merať presne. Ide o to, že jedna farba vedie, jedna podporuje a jedna vyniká.
Úloha neutrálnych farieb
Neutrálne farby sú biela, čierna, sivá, béžová, krémová a svetlé hnedé. Hodia sa takmer ku všetkému.
Dávajú očiam oddýchnuť a nechávajú výrazné farby lepšie vyniknúť. Paleta bez neutrálnych farieb zvyčajne pôsobí unavene.
- Biela a lomená biela: čistota a priestor.
- Sivá: moderná a striedma. Vyber teplé alebo studené sivé, ktoré ladia so zvyškom palety.
- Béžová a piesková: teplo a prirodzenosť.
- Čierna alebo takmer čierna: elegancia a kontrast. Na text je veľmi tmavá sivá zvyčajne príjemnejšia než čistá čierna.
Kombinovanie podľa teploty
Farby sú teplé (červená, oranžová, žltá) alebo studené (modrá, zelená, fialová). Kombinovať ich môžeš tromi jednoduchými spôsobmi:
- Len teplé farby: útulné a energické. Ideálne pre reštaurácie alebo priateľské značky.
- Len studené farby: pokojné a profesionálne. Ideálne pre zdravotníctvo, technológie alebo financie.
- Studený základ s teplým akcentom: najuniverzálnejšia možnosť. Teplý akcent pritiahne pohľad na pokojnom pozadí.
Čo zvyčajne nefunguje: veľa výrazných teplých a studených farieb naraz, bez prevládajúcej farby.
Kontrast pre text
Krásna farba je nanič, keď sa text nedá prečítať. Kontrast medzi textom a pozadím je zásadný pre čitateľnosť a prístupnosť.
- Používaj tmavý text na svetlom pozadí alebo svetlý text na tmavom pozadí.
- Vyhni sa žltému, svetlozelenému alebo svetlosivému textu na bielej.
- Nedávaj sýte doplnkové farby cez seba, napríklad červenú na zelenú. Bliká to a unavuje oči.
- Pravidlá WCAG vyžadujú kontrastný pomer aspoň 4,5:1 pre bežný text a 3:1 pre veľký text.
Akúkoľvek dvojicu farieb si môžeš overiť v našej kontrole kontrastu.
15 kombinácií farieb, ktoré vždy fungujú
Tieto dvojice sú bezpečným východiskom. Použi ich ako základ a podľa potreby pridaj neutrálnu farbu alebo akcent.
- Námornícka modrá a krémová: klasická, seriózna a dobre čitateľná.
- Čierna a zlatá: luxus a elegancia.
- Modrá a oranžová: komplementárna a plná energie.
- Jedľová zelená a béžová: prirodzená a pokojná.
- Ružová a antracitová: moderná a vyvážená.
- Žltá a čierna: maximálny kontrast, ideálna na upozornenia.
- Bordová a piesková: hrejivá a prepracovaná.
- Tyrkysová a koralová: svieža a letná.
- Fialová a svetlá lila: monochromatická a kreatívna.
- Hnedá a šalviová zelená: zemitá, ideálna pre prírodné značky.
- Sivá a broskyňová: jemná a prívetivá.
- Petrolejová modrá a svetložltá: pokojná s nádychom svetla.
- Terakotová a lomená biela: hrejivá a stredomorská.
- Tmavá petrolejová a horčicová: retro a s charakterom.
- Biela a červená: priama, energická a dobre viditeľná.
Oveľa viac nápadov s HEX kódmi nájdeš na našej stránke kombinácie farieb.
Ktoré farby sa hodia ku ktorej farbe
Ak už máš hlavnú farbu, tento zoznam ti dá rýchle východisko:
- Červená: biela, čierna, sivá, námornícka modrá a béžová. Pre niečo odvážne: ružová alebo oranžová.
- Oranžová: námornícka modrá, tyrkysová, biela, krémová a hnedá.
- Žltá: sivá, čierna, námornícka modrá a biela. Horčicová sa dobre hodí k tmavozelenej.
- Zelená: béžová, biela, hnedá, zlatá a jemná ružová.
- Modrá: biela, oranžová, sivá, žltá a koralová. Námornícka modrá funguje takmer ako neutrálna farba.
- Fialová: sivá, lila, zlatá, šalviová zelená a biela.
- Ružová: sivá, námornícka modrá, olivovozelená, biela a zlatá.
- Hnedá: krémová, zelená, petrolejová modrá, oranžová a lomená biela.
Určite si si všimol, že neutrálne farby sú skoro v každom zozname. Sú najbezpečnejším partnerom pre výraznú farbu.
Ako zostaviť vlastnú kombináciu
- Vyber hlavnú farbu podľa toho, čo chceš vyjadriť.
- Nájdi vo farebnom kruhu vedľajšiu farbu: susednú pre niečo pokojné, protiľahlú pre niečo výrazné.
- Pridaj jednu alebo dve neutrálne farby.
- Vyber jednu akcentovú farbu pre to najdôležitejšie.
- Otestuj paletu na skutočnom príklade: webovej stránke, snímke prezentácie alebo fotke miestnosti.
Keď váhaš, použi menej farieb. Tri až päť farieb stačí skoro pre každý projekt.
Časté chyby s farbami
- Priveľa farieb. Výsledok pôsobí preplácane a nič nevynikne.
- Všetkým farbám rovnakú váhu. Bez prevládajúcej farby oko nevie, kam sa pozerať.
- Zabudnutý kontrast. Text, ktorý sa nedá prečítať, alebo tlačidlá, ktoré nikto nevidí.
- Všetko presýtené. Veľmi výrazné farby unavujú. Kombinuj ich s jemnejšími odtieňmi.
- Ignorovanie kontextu. Farba vyzerá inak pri dennom svetle, na obrazovke a na papieri.
- Kopírovanie bez úprav. Paleta, ktorá funguje pre jednu značku, nemusí sedieť tvojmu publiku.
- Miešanie neutrálnych farieb rôznej teploty. Studená sivá vedľa teplej béžovej môže pôsobiť špinavo. Vyberaj neutrálne farby z rovnakej rodiny.
- Netestovanie na viacerých obrazovkách. Farba môže byť na počítači krásna a na telefóne mdlá. Vždy ju skontroluj na viac než jednom zariadení.