Защо очите ни се нуждаят от допълнителни схеми на цветовата палитра ... И къде можете да ги направите

Допълнителни схеми на цветовата палитра

Знаете ли, че всъщност има биологична наука зад това как два или повече цвята се допълват? Аз не съм офталмолог, нито оптометрист, но ще се опитам да преведа науката тук за прости хора като мен. Нека започнем с цвета като цяло.

Цветовете са честоти

Една ябълка е червена ... нали? Е, не наистина. Честотата на това как светлината се отразява и пречупва от повърхността на ябълката я прави откриваема, преобразувана от очите ни като сигнали, изпратена до мозъка ни, където я идентифицираме като „червена“. Уф ... това ме боли в главата, само като си помисля за това. Вярно е обаче ... цвят е просто честота на светлината. Ето изглед на електромагнитния спектър и честотите на всеки цвят:

Цветът и електромагнитният спектър

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

Призма
Кристалната призма разпръсква бялата светлина в много цветове.

Очите ви са честотни детектори

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

Забелязали ли сте, че можете дълго да се взирате в нещо с наистина висок контраст, да погледнете встрани и да продължите да виждате остатъчно изображение, което не съвпада с оригиналните цветове, които гледате? Да предположим, че това е син квадрат на бяла стена:

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

Теория на цветовете 101: Принуждаването на допълнителните цветове да работят за вас

Ако тази умора не се е случила, очите и мозъкът ни не трябва да работят толкова усилено, за да интерпретират множеството дължини на вълните (например цветове), които виждат.

Визуален шум срещу хармония

Нека направим аналогия на звука спрямо цвета. Ако слушате различни честоти и обеми, които не са взаимно допълващи се, бихте го помислили като шум. Това не е различно от цвета, където яркостта, контраста и цвета могат да бъдат открити визуално шумни или допълващи се. Във всеки визуален носител искаме да работим за хармония.

Ето защо не виждате статист на фона на филм, облечен в яркочервена риза. И затова интериорните декоратори работят усилено, за да намерят допълващи се цветове по стените, мебелите, изкуството и други характеристики на стаята, която проектират. Цветът е от решаващо значение за създаването на настроение, което посетителят получава, когато влезе в него въз основа на това колко лесно е за мозъка му да интерпретира цветовете.

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

Скоро повече за хармониите ... нека се върнем към теорията на цветовете.

RGB цветове

Пикселите в цифровия спектър са комбинации от червено, зелено и синьо. Червено = 0, зелено = 0 и синьо = 0 се показва като бял и червено = 255, зелено = 255, а синьо = 255 се вижда като черно. Всичко между тях е различен цвят, съставен от трите. Самите основи на изчисляването на допълнителен цвят са доста прости ... просто извадете RGB стойностите от 255 за новата RGB стойност. Ето пример:

Разликата в тази светлинна честота между оранжевото и синьото е достатъчно отдалечена, че е контрастна, но не толкова, че е трудно за нашите очи да ги интерпретират. Честотите на цветовете се допълват и радват на нашите рецептори!

Изчисляването на един цвят е лесно ... изчисляването на 3 или повече допълнителни цвята изисква да изчислите еквивалентни количества между всяка от опциите. Ето защо генератори на цветови палитри елате толкова удобно! С много малко изчисления, необходими, тези инструменти могат да ви предоставят няколко цвята, които се допълват.

Колелото на цветовете

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

Колелото на цветовете

Забавен факт: Сър Исак Нютон за първи път разработва цветното колело през 1665 г., основа за експериментите му с призми. Неговите експерименти доведоха до теорията, че червеното, жълтото и синьото са основните цветове, от които се получават всички останали цветове. Допълнителна нота ... той дори прилага музикални „ноти“ към всеки цвят.

Въоръжете ме с Хармония ...

нютонов цветен кръг

Видове цветни хармонии

Връзките между и как се изчисляват всеки набор от безплатни цветове са известни като хармонии. Ето страхотен обзорен видеоклип:

Различни характеристики са свързани с всеки тип:

  • аналогичен - групи цветове, които са един до друг на цветното колело. 
  • Едноцветен - групи, получени от един основен оттенък и разширени, използвайки неговите нюанси, тонове и нюанси.
  • триада - групи цветове, които са равномерно разположени около цвят колело
  • допълнителен - групи цветове, които са противоположни един на друг на цветното колело.
  • Разделяне допълващо - вариация на допълващи, когато се използват два цвята в съседство с комплемента.
  • Правоъгълник (тетрадичен) - използва четири цвята, подредени в две допълващи се двойки
  • Площад - подобно на правоъгълника, но с четирите цвята, разположени равномерно около цветния кръг
  • Съединение - цвят и двата цвята, съседни на допълващия го цвят
  • Shades - регулиране на оттенъка (увеличаване на светлината) или сянка (тъмнина) за основния цвят.

Това не са субективни теми, те са действителни математически изчисления с приложени хубави имена, които ни помагат да разберем по-добре изчисленията.

Генератори на цветови палитри

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

Често използвам генератори на цветови палитри, когато работя на клиентски сайтове. Тъй като не съм специалист по цветовете, тези инструменти ми помагат да избера по-добре неща като фонове, граници, фонове на долния колонтитул, основни и вторични цветове на бутоните. Резултатът е уебсайт, който е много по-приятен за окото! Това е фина, невероятно мощна стратегия, която да приложите към вашия дизайн на каквото и да било - от реклама до цял уебсайт.

Ето няколко страхотни онлайн генератора на цветови палитри:

  • Кирпич - фантастичен инструмент с до 5 цвята, където можете да тествате различни видове, да правите корекции и дори да запазвате темата си във всеки продукт на Adobe.
  • BrandColors - най-голямата колекция от официални цветови кодове на марката наоколо.
  • Canva - качете снимка и те ще я използват като основа за вашата палитра!
  • Colllor - генерирайте последователна уеб палитра от цветове само с няколко щраквания. 
  • Цветен дизайнер - Просто изберете цвят или използвайте предварително избраните цветове и приложението прави останалото. 
  • Цветен лов - безплатна и отворена платформа за вдъхновение на цветовете с хиляди модерни ръчно подбрани цветови палитри
  • Colorkuler - генерирайте цветна палитра за Instagram, за да го направите по-естетически приятен.
  • Colormind - генератор на цветови схеми, който използва дълбоко обучение. Той може да научи цветови стилове от снимки, филми и популярно изкуство.
  • Цветово пространство - просто въведете един до три цвята и генерирайте няколко схеми!
  • Цветен код - наистина страхотно изживяване на целия екран за създаване на вашата цветова палитра с редица хармонични стилове вляво.
  • COLOURlovers - творческа общност, в която хора от цял ​​свят създават и споделят цветове, палитри и модели, обсъждат най-новите тенденции и изследват цветни статии.
  • Охладители - създайте перфектната палитра или се вдъхновете от хиляди красиви цветови схеми.
  • Избор на цвят на данни - Използвайте инструмента за избор на палитра, за да създадете серия от цветове, които са визуално равно разстояние
  • Хрома - използва AI, за да научи кои цветове харесвате и създава палитри, които да откривате, търсите и запазвате.
  • Материал Design - създавайте, споделяйте и прилагайте цветови схеми за вашия потребителски интерфейс. Той дори идва с износ за вашето приложение!
  • Музли Цветове - добавете име или код на цвят и създайте красива палитра.
  • Paletton - изберете основен цвят и се вдъхновете.
  • Веранда - вдъхновете се от тонове невероятни цветови палитри. 

Цвят и достъпност

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

  • Контраст - Всеки независим цвят има a яркост. Цветовете на наслагванията и съседните обекти трябва да имат относително съотношение на яркост 4.5: 1, за да могат хората със зрителни увреждания да ги различават. Не бих си направил труда да се опитам сам да изчисля съотношенията, можете да тествате съотношенията си от два цвята с правдоподобен, Contrast Ratio, или Colorsafe.
  • иконография - Маркирането на поле в червено не помага на някой, който има дефицит на цвят. Не забравяйте да приложите някакво съобщение или икона, за да ги уведомите, че има и проблем.
  • Фокус - Много хора се ориентират с клавиатури или четци на екрани. Уверете се, че вашият потребителски интерфейс е правилно проектиран с всички маркировки за достъпност, за да могат те да се възползват от вашия сайт. За хората със зрителни увреждания използването на празно пространство и възможността за увеличаване или намаляване на размера на шрифта, когато това не унищожава оформлението, е критично.

Очен експерт ли сте? Експерт по цветовете? Експерт за достъпност? Моля, чувствайте се свободни да ми дадете някакви насоки за подобряване на тази статия!

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.