Kako doći do branja lijepih boja

Iako je odabir dobrih boja umjetnost, postoji nekoliko trikova kojima možete olakšati odabir lijepih boja. Ovaj članak dolazi u dva dijela: prvo ću pregledati što čini dobru paletu boja, a drugo, opisat ću formulu koju možete koristiti za postizanje dobre palete.

Izjava o odricanju odgovornosti: Ovo je daleko i jedini način da odaberete dobre boje i više je skup heuristike koji sam došao usvojiti. Nadam se da će vam ovo pomoći u odabiru pravih boja za vaše web mjesto / aplikaciju / igru ​​/ ono što imate.

Palete boja i kontrast

Prvo bismo trebali shvatiti da boje ne postoje izolirano. Lijepa boja nije svijetla ili tamna, zasićena ili zasićena. Kad razmišljamo o odabiru boja, ne bismo trebali razmišljati toliko o pojedinačnim bojama, koliko razmišljati o odabiru setova boja ili paleta boja.

Slijeva na desno: Super Mario Run, Dolina spomenika, Altova Odiseja, Lara Croft Go

Kad razmišljamo o skupinama boja, trebamo razmišljati o njihovoj međusobnoj interakciji: trebaju li se neke istaknuti ili se treba međusobno stopiti? To se naziva kontrast.

Odabir lijepih boja često se svodi na odabir pravih kontrasta vašeg dizajna.

Način na koji boje zajedno rade u vašem dizajnu određuje kako lijepo izgledaju. Ali kada je u pitanju kontrast boja, postoji nekoliko načina na koji on može postojati:

Svjetlina aka. Svijetlo tamno

Svjetlina je jedna vrsta kontrasta koju je lako vizualizirati. Na uređaju za odabir boja HSB to odgovara kretanju po okomitoj osi:

svjetlost

Općenito, količinu kontrasta između dvije boje možemo jednostavno povećati jednostavnim povećanjem razlike u njihovoj svjetlini.

Kontrast svjetline

Iako je ovo jednostavno, to nije dovoljno za stvaranje sjajnih paleta. Boje koje se razlikuju samo u količini bijele i crne u njima jednostavno nisu toliko zanimljive kao boje koje se prepliću u više dimenzija. Što nas dovodi do ...

Tonalni kontrast

Možemo razmišljati o tonalnom kontrastu u smislu nijanse boje i razine zasićenosti. Kao i kod svjetline, povećavanje razlike u nijansi ili zasićenosti općenito će povećati količinu kontrasta između boja.

Hue ContrastZasićenje (vodoravna os u HSB) i kontrast zasićenja

Uprkos tome, same ove vrijednosti ne oslikavaju cijelu sliku. Još uvijek možemo odabrati boje koje, čak i ako se razlikuju po nijansi ili zasićenju, ipak imaju slab kontrast.

Različite nijanse i loš kontrastRazličita zasićenost i loš kontrast

Što daje? Odgovor je da različite nijanse imaju različite svojstvene tonske vrijednosti. Mnogim ljudima (uključujući i mene) teško je zamisliti kakve tonalne vrijednosti mogu imati različite nijanse. Što me dovodi do mog najdražeg trika ...

Sjeckanje u sivim tonovima

Kad prikažete boje u sivim tonovima, svjetlina rezultirajuće sive boje može poslužiti kao dobar pokazatelj vrijednosti različitih tonova boja. I ne samo to, ono je također korisno kad dizajnirate za pristupačnost. To je jednostavan način vizualizacije količine kontrasta koja postoji u dizajnu neovisnom o nijansi.

Inherentne tonske vrijednosti za različite nijanse

Pogledajmo kako izgledaju ove tonske vrijednosti u alatu za odabir HSB boja. Također imajte na umu kako se vrijednosti tona mijenjaju u spektru svake nijanse, označene u desnom desnom stupcu:

Ako pogledamo neke od prethodnih uzoraka, ali u nijansama sive, lakše ćemo vidjeti koje boje imaju visoki i niski kontrast.

Kontrast zasićenja: visok kontrast na vrhu, slab kontrast na dnu.Kontrast nijanse: visok kontrast na vrhu, slab kontrast na dnu.

Pogledajmo još prikazane igre, ali sada u sivim tonovima.

Jednostavno možete vidjeti kako pozadine iskaču iz pozadine, kako se interaktivni elementi jako kontrastu s neaktivnim elementima i kako bi se, ako su igre cijelo vrijeme bile u sivim tonovima, još uvijek moglo igrati. Ključni korak ovdje je:

Koristite sjecku sive boje, bočno i često, da biste vizualizirali kontraste koji postoje u vašim dizajnom.

Prilični kontrasti čine lijepe palete boja, i zato vam predstavljam ...

Formula za odabir lijepih paleta boja

Primijenimo analizu koju smo gore napravili, ali obrnuto: započnite s dizajnom sive boje, a zatim nastavite s odabirom odgovarajućih boja.

1: Odredite gdje trebate Contrast

Napravite žičani okvir za svoj dizajn, a zatim odlučite koja područja u vašem žičnom okviru trebaju puno kontrasta, a koja trebaju manje kontrasta.

2: obojajte svoj dizajn pomoću nijansi sive

Pokušajte bojati dizajn žičanog okvira u samo nijanse sive. Pazite da područja vašeg dizajna koja trebaju najviše kontrasta imaju najveću razliku svjetline. Obavezno napravite ovaj korak u konačnoj rezoluciji vašeg dizajna. Manji dizajni (npr. Logotipi i ikone aplikacija) posebno mogu zahtijevati veće kontraste za definiranje sitnijih elemenata.

3: Odaberite svoju osnovnu nijansu u boji
Odaberite nijanse osnovne boje s kojima želite raditi. Ovo je subjektivni dio, a za izdvajanje možete koristiti alate poput ShapeFactory-ovog pigmenta ili Adobe Color CC. Zabavna činjenica: Neki su kombinacije boja toliko popularne da su dostigle status tropa.

4: Prilagodite svoje boje tako da imaju odgovarajuće tonske vrijednosti
Jednom kada shvatite svoje nijanse, pronađite koji raspon tonskih vrijednosti ispod te nijanse otprilike odgovara vrijednosti sive boje koju ste prethodno nacrtali. Prebacujte zaslon između boja i sivih tonova dok se igrate sa vrijednostima svjetline i zasićenosti u vašem biraču boja. Vaš je cilj postići paletu boja koja, kada se gleda u sivim tonovima, odgovara vašem dizajnu u drugom dijelu.

Primjer 1

(1) Žičani okvir i (2) Preferirani kontrasti u nijansama sive(3) Naš izbor boja u boji

Ako bismo željeli smisliti paletu boja za gore navedeno, otkrili bismo koja područja svake boje otprilike odgovaraju našem dizajnu sive boje.

Odgovarajuće regije tonalne vrijednosti za naše osnovne boje

Sada možemo odabrati kombinacije boja bilo gdje u tim regijama:

(4) Neke mogućnosti palete boja

Primjer 2

Evo kako je izgledao ovaj postupak prilikom razvoja moje aplikacije Overlink:

Postupak: slijeva udesno, odozdo prema dolje: žičani okvir, nijanse sive, osnovne boje, završni

Čestitamo! Nadamo se da će vam ovo pomoći odabrati skup boja koji će biti kontrastni tamo gdje trebaju, stopiti ih tamo gdje ih nema, i da, u cjelini, izgledaju lijepo.

Sam kontrast neće biti ključna odluka hoće li vaš dizajn izgledati sjajno, ali će igrati glavnu ulogu u tome izgledaju li vaše palete boja nevjerojatno.

Overlink je projekt koji je potaknuo ovo pisanje. Ako vam se sviđaju 3D logičke zagonetke, možete ih preuzeti (besplatno) na iOS-u: https://itunes.apple.com/au/app/overlink/id1453086788