Pravilo 60-30-10
Ovo je najkorisnije pravilo za raspodjelu boja. Potječe iz dizajna interijera, ali funkcionira za bilo koji projekt.
- 60 %: prevladavajuća boja. Obično neutralna ili nježna nijansa. Pokriva pozadinu i velike površine.
- 30 %: sporedna boja. Daje osobnost. Upotrijebi je za blokove, izbornike ili namještaj.
- 10 %: naglasna boja. Ona najupečatljivija. Upotrijebi je za gumbe, ikone ili detalje.
Na primjer: prljavobijela na 60 %, mornarskoplava na 30 % i narančasta na 10 %.
Ne moraš mjeriti točno. Poanta je da jedna boja vodi, jedna podržava i jedna se ističe.
Uloga neutralnih boja
Neutralne boje su bijela, crna, siva, bež, krem i svijetle smeđe. Pristaju gotovo uz sve.
Odmaraju oči i omogućuju izražajnim bojama da bolje dođu do izražaja. Paleta bez neutralnih boja obično djeluje zamorno.
- Bijela i prljavobijela: čistoća i prostor.
- Siva: moderna i umjerena. Odaberi tople ili hladne sive koje se slažu s ostatkom palete.
- Bež i boja pijeska: toplina i prirodnost.
- Crna ili gotovo crna: elegancija i kontrast. Za tekst je vrlo tamna siva obično ugodnija od čiste crne.
Kombiniranje prema temperaturi
Boje su tople (crvena, narančasta, žuta) ili hladne (plava, zelena, ljubičasta). Možeš ih kombinirati na tri jednostavna načina:
- Samo tople boje: ugodno i energično. Idealno za restorane ili prijateljske marke.
- Samo hladne boje: smireno i profesionalno. Idealno za zdravstvo, tehnologiju ili financije.
- Hladna osnova s toplim naglaskom: najsvestranija mogućnost. Topli naglasak privući će pogled na smirenoj pozadini.
Što obično ne funkcionira: mnogo izražajnih toplih i hladnih boja odjednom, bez prevladavajuće boje.
Kontrast za tekst
Lijepa boja ne vrijedi ništa ako se tekst ne može pročitati. Kontrast između teksta i pozadine ključan je za čitljivost i pristupačnost.
- Koristi tamni tekst na svijetloj pozadini ili svijetli tekst na tamnoj pozadini.
- Izbjegavaj žuti, svijetlozeleni ili svijetlosivi tekst na bijeloj.
- Ne stavljaj zasićene komplementarne boje jednu na drugu, na primjer crvenu na zelenu. Treperi i zamara oči.
- Pravila WCAG zahtijevaju omjer kontrasta od najmanje 4,5:1 za običan tekst i 3:1 za veliki tekst.
Bilo koji par boja možeš provjeriti u našoj provjeri kontrasta.
15 kombinacija boja koje uvijek funkcioniraju
Ovi parovi sigurno su polazište. Upotrijebi ih kao osnovu i po potrebi dodaj neutralnu boju ili naglasak.
- Mornarskoplava i krem: klasična, ozbiljna i dobro čitljiva.
- Crna i zlatna: luksuz i elegancija.
- Plava i narančasta: komplementarna i puna energije.
- Jelovozelena i bež: prirodna i smirena.
- Ružičasta i antracit: moderna i uravnotežena.
- Žuta i crna: maksimalan kontrast, idealna za upozorenja.
- Bordo i boja pijeska: topla i profinjena.
- Tirkizna i koraljna: svježa i ljetna.
- Ljubičasta i svijetla lila: monokromatska i kreativna.
- Smeđa i kadulja zelena: zemljana, idealna za prirodne marke.
- Siva i boja breskve: nježna i prijazna.
- Petrolej plava i svijetložuta: smirena s dozom svjetla.
- Terakota i prljavobijela: topla i mediteranska.
- Tamni petrolej i senf: retro i s karakterom.
- Bijela i crvena: izravna, energična i dobro vidljiva.
Mnogo više ideja s HEX kodovima pronaći ćeš na našoj stranici kombinacije boja.
Koje boje pristaju kojoj boji
Ako već imaš glavnu boju, ovaj popis daje ti brzo polazište:
- Crvena: bijela, crna, siva, mornarskoplava i bež. Za nešto odvažno: ružičasta ili narančasta.
- Narančasta: mornarskoplava, tirkizna, bijela, krem i smeđa.
- Žuta: siva, crna, mornarskoplava i bijela. Senf se dobro slaže s tamnozelenom.
- Zelena: bež, bijela, smeđa, zlatna i nježna ružičasta.
- Plava: bijela, narančasta, siva, žuta i koraljna. Mornarskoplava funkcionira gotovo kao neutralna boja.
- Ljubičasta: siva, lila, zlatna, kadulja zelena i bijela.
- Ružičasta: siva, mornarskoplava, maslinastozelena, bijela i zlatna.
- Smeđa: krem, zelena, petrolej plava, narančasta i prljavobijela.
Sigurno si primijetio da su neutralne boje gotovo na svakom popisu. One su najsigurniji partner izražajnoj boji.
Kako složiti vlastitu kombinaciju
- Odaberi glavnu boju prema onome što želiš izraziti.
- Pronađi u krugu boja sporednu boju: susjednu za nešto smireno, suprotnu za nešto upečatljivo.
- Dodaj jednu ili dvije neutralne boje.
- Odaberi jednu naglasnu boju za ono najvažnije.
- Isprobaj paletu na stvarnom primjeru: web-stranici, slajdu prezentacije ili fotografiji prostorije.
Kad si u nedoumici, upotrijebi manje boja. Tri do pet boja dovoljno je za gotovo svaki projekt.
Česte pogreške s bojama
- Previše boja. Rezultat djeluje pretrpano i ništa se ne ističe.
- Svim bojama jednaka težina. Bez prevladavajuće boje oko ne zna kamo gledati.
- Zaboravljen kontrast. Tekst koji se ne može pročitati ili gumbi koje nitko ne vidi.
- Sve prezasićeno. Vrlo izražajne boje zamaraju. Kombiniraj ih s nježnijim nijansama.
- Zanemarivanje konteksta. Boja izgleda drukčije na dnevnom svjetlu, na zaslonu i na papiru.
- Kopiranje bez prilagodbe. Paleta koja funkcionira za jednu marku ne mora odgovarati tvojoj publici.
- Miješanje neutralnih boja različite temperature. Hladna siva uz toplu bež može djelovati prljavo. Biraj neutralne boje iz iste obitelji.
- Neisprobavanje na više zaslona. Boja može biti prekrasna na računalu, a blijeda na mobitelu. Uvijek je provjeri na više od jednog uređaja.