Начин на работа за бране на красиви цветове

Въпреки че избирането на добри цветове е изкуство, има няколко трика, които можете да използвате, за да направите лесно избирането на красиви цветове. Тази статия се предлага в две части: Първо ще разгледам това, което прави добра цветова палитра, и второ, ще очертая формула, която можете да използвате, за да стигнете до добре изглеждаща палитра.

Отказ от отговорност: Това е много далеч от единствения начин за избор на добри цветове и е по-скоро набор от евристики, които съм дошъл да възприемам сам. Надявам се, че това може да ви помогне да изберете правилните цветове за вашия уебсайт / приложение / игра / какво да имате.

Цветни палитри и контраст

Първо, трябва да признаем, че цветовете не съществуват изолирано. Хубавият цвят не е този, който е светъл или тъмен, наситен или наситен. Когато мислим за избор на цветове, не бива да мислим толкова за отделните цветове, колкото да мислим за избора на набори от цветове или цветни палитри.

Отляво надясно: Super Mario Run, Monument Valley, Alys's Odyssey, Lara Croft Go

Когато мислим по отношение на набори от цветове, трябва да помислим за тяхното взаимодействие: трябва ли някои да се открояват или трябва да се смесват едно с друго? Това се нарича контраст.

Избирането на красиви цветове често се свежда до избора на правилните контрасти за вашия дизайн.

Как цветовете, които използвате, работят заедно в дизайна ви, определят колко красиво изглеждат. Но когато става въпрос за цветен контраст, има няколко начина, по които той може да съществува:

Яркост ака. Светло тъмно

Яркостта е един вид контраст, който е лесен за визуализиране. При избор на цвят HSB това съответства на движение по вертикалната ос:

яркост

По принцип можем просто да увеличим количеството на контраста между два цвята, като просто увеличим разликата в тяхната яркост.

Контраст на яркостта

Въпреки че това е лесно, това е недостатъчно за създаване на страхотни палитри. Цветовете, които варират само в количеството бяло и черно в тях, просто не са толкова интересни, колкото цветовете, които се преплитат в повече измерения. Което ни води до ...

Тонален контраст

Можем да мислим за тонален контраст по отношение на цветовите нюанси и нивата на насищане. Подобно на яркостта, увеличаването на разликата в нюанса или наситеността, като цяло, ще увеличи количеството на контраста между цветовете.

Нюанс контрастНасищане (хоризонтална ос в HSB) и контраст на насищане

Въпреки това, тези стойности сами по себе си също не рисуват цялата картина. Все още можем да изберем цветове, които дори и да се различават по нюанс или наситеност, все още имат лош контраст.

Различни нюанси и лош контрастРазлична наситеност и лош контраст

Какво дава? Отговорът е, че различните нюанси имат различни присъщи тонални стойности. За много хора (включително и аз) е трудно да си представят какви тонални стойности могат да приемат различните нюанси. Което ме довежда до любимия ми трик ...

Хакът в сивите

Когато показвате цветове в сиви цветове, яркостта на полученото сиво може да служи като добър показател за стойността на различни цветови тонове. Не само това, но е полезно и когато проектирате за достъпност. Това е прост начин за визуализиране на размера на контраста, който съществува в дизайн, независим от оттенъка.

Присъщи тонални стойности за различни нюанси

Нека да видим как изглеждат тези тонални стойности в избирателя на цветове HSB. Също така обърнете внимание как стойностите на тона се променят в спектъра на всеки оттенък, подчертани в най-дясната колона:

Ако разгледаме някои от предишните образци, но в сиви скали, можем по-лесно да видим кои цветове имат висок и нисък контраст.

Контраст на насищане: висок контраст отгоре, лош контраст отдолу.Нюанс на контраста: висок контраст отгоре, лош контраст отдолу.

Нека да разгледаме още игрите, показани по-горе, но сега в сиви скали.

Лесно можете да видите как предните фонове изскачат от фона, как интерактивните елементи контрастират значително с неинтерактивните елементи и как, ако игрите бяха през цялото сиво скали, все още вероятно ще се играят. Ключовото извличане тук е:

Използвайте хак за сиви скали, често и често, за да визуализирате контрастите, които съществуват във вашите дизайни.

Доста контрасти правят доста цветни палитри и затова ви представям ...

Формула за избор на красиви цветни палитри

Нека приложим анализа, който направихме по-горе, но обратното: започнете с дизайн на сиви скали и след това работим за избора на съответните цветове.

1: Определете къде се нуждаете от Контраст

Създайте телена рамка за вашия дизайн и след това решете кои области от вашата телена рамка се нуждаят от много контраст и кои се нуждаят от по-малко контраст.

2: Оцветете вашия дизайн, използвайки нюанси на сивото

Опитайте да оцветите дизайна на телените си рамки само в сиви нюанси. Уверете се, че областите на вашия дизайн, които се нуждаят от най-много контраст, имат най-голяма разлика в яркостта. Уверете се, че направите тази стъпка в окончателната резолюция на вашия дизайн. По-малките дизайни (например лога и икони на приложения) особено могат да изискват по-високи контрасти за дефиниране на по-фини елементи.

3: Изберете вашата основна цветни нюанси
Изберете базовите цветови нюанси, с които искате да работите. Това е субективната част и можете да използвате инструменти като пигмента на ShapeFactory или Adobe Color CC, за да изберете някои от тях. Забавен факт: Някои цветни комбинации са толкова популярни, че са достигнали статут на тропи.

4: Настройте цветовете си така, че да имат съвпадащи тонални стойности
След като разберете оттенъците си, намерете какъв диапазон от тонални стойности под този оттенък приблизително съответства на стойността на сивия тон, която сте скицирали преди. Превключвайте екрана си между цвят и сива скала, докато играете със стойностите на яркостта и наситеността във вашия избор на цвят. Вашата цел е да стигнете до цветова палитра, която, когато се гледа в сива скала, съответства на вашия дизайн в част 2.

Пример 1

(1) Кадър и (2) Предпочитани контрасти в нюанси на сивото(3) Нашият избор на основен цвят

Ако искахме да измислим цветова палитра за горното, щяхме да открием кои региони от всеки цвят приблизително отговарят на дизайна на сивите нива.

Съответстващи региони на тоналната стойност за нашите основни цветове

Вече можем да избираме комбинации от цветове от всяка точка на тези региони:

(4) Някои опции за цветни палитри

Пример 2

Ето как изглеждаше този процес при разработването на моето приложение Overlink:

Процес: отляво надясно, отгоре отдолу: телена рамка, сива скала, основни цветове, финал

Поздравления! Надяваме се, че това ви помага да изберете набор от цветове, които да контрастират там, където е необходимо, да се смесват там, където не са, и като цяло да изглеждат доста.

Контрастът сам по себе си няма да бъде основното решение дали дизайнът ви изглежда страхотно, но ще играе основна роля дали цветовите ви палитри изглеждат невероятно.

Overlink е проектът, който вдъхнови това преписване. Ако харесвате 3D логически пъзели, можете да го изтеглите (безплатно) на iOS: https://itunes.apple.com/au/app/overlink/id1453086788