Навіщо нашим очам потрібні додаткові схеми кольорової палітри ... І де їх можна зробити

Додаткові схеми кольорової палітри

Чи знали ви, що насправді існує біологічна наука за тим, як два або більше кольорів доповнюють один одного? Я не офтальмолог і не окуліст, але спробую перекласти науку тут для простих людей, таких як я. Почнемо з кольору взагалі.

Кольори - це частоти

Яблуко червоне ... так? Ну, не дуже. Частота того, як світло відбивається і заломлюється від поверхні яблука, робить його виявленим, перетворюється нашими очима як сигнали, і надсилається в наш мозок, де ми ідентифікуємо його як “червоне”. Тьфу ... це болить голову, коли я лише про це думаю. Це правда ... color це просто частота світла. Ось погляд на електромагнітний спектр і частоти кожного кольору:

Колір та електромагнітний спектр

Саме тому біле світло, спрямоване на призму, утворює веселку. Що справді відбувається, так це те, що кристал змінює частоту довжини хвилі під час заломлення світла:

Призма
Кристалічна призма розсіює біле світло на безліч кольорів.

Ваші очі - це детектори частоти

Ваше око - це справді просто детектор частоти для діапазону кольорових частот в електромагнітному спектрі. Ваша здатність розпізнавати кольори відбувається через різні типи колбочок у стінці ока, які потім з’єднуються із зоровими нервами. Кожен діапазон частот виявляється деякими з цих конусів, потім перетворюється у сигнал на ваш зоровий нерв, направляється у ваш мозок, де ідентифікується.

Ви коли-небудь помічали, що можете довго дивитись на щось дуже контрастне, відвести погляд і продовжувати бачити залишки зображення, які не відповідають оригінальним кольорам, на які ви дивились? Скажімо, це синій квадрат на білій стіні:

Через деякий час клітини вашого ока, які обробляють синє світло, втомляться, роблячи сигнал, який вони надсилають у ваш мозок, дещо слабшим. Оскільки ця частина зорового спектру трохи пригнічена, коли ви дивитесь на білу стіну, дивлячись на блакитний квадрат, ви побачите слабкий помаранчевий залишок зображення. Те, що ви бачите, - це білий спектр світла від стіни, мінус крихітка синього, яку ваш мозок обробляє як помаранчевий.

Теорія кольорів 101: Примусити додаткові кольори працювати саме для вас

Якщо цієї втоми не сталося, нашим очам і мозку не потрібно працювати так сильно, щоб інтерпретувати різні довжини хвиль (наприклад, кольори), які вони бачать.

Візуальний шум проти гармонії

Давайте зробимо аналогію звуку та кольору. Якби ви слухали різні частоти та гучності, які не доповнювали одна одну, ви думали б про це шум. Це не на відміну від кольору, де можуть бути виявлені яскравість, контрастність і колір візуально шумний або доповнює. У будь-якому візуальному середовищі ми хочемо працювати над гармонією.

Ось чому ви не бачите зайвого на задньому плані фільму у яскраво-червоній сорочці. І тому декоратори інтер’єру наполегливо працюють, щоб знайти додаткові кольори на стінах, меблях, мистецтві та інших особливостях приміщення, яке вони проектують. Колір має вирішальне значення для створення настрою, який відвідувач отримує, коли він заходить у нього, виходячи з того, як легко його мозку інтерпретувати кольори.

ваш кольорова палітра - це еквівалент складання тасьми в красивій гармонії. І як зібрані голоси та інструменти тісно співпадають за гучністю та частотою ... так і додаткові кольори вашої кольорової палітри. Дизайн палітри кольорів - це справді вид мистецтва для професіоналів, які тонко налаштували розпізнавання кольорів, але це також абсолютно обчислювальна наука, оскільки можна розрахувати додаткові частоти.

Незабаром докладніше про гармонії ... повернемось до теорії кольорів.

Кольори RGB

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

Різниця в цій частоті світла між помаранчевим і синім досить далека, що вона контрастна, але не настільки, що нашим очам важко інтерпретувати. Частоти кольорів доповнюють і радують наших рецепторів!

Обчислити один колір просто ... обчислення 3 або більше додаткових кольорів вимагає від вас розрахунку еквівалентних величин між кожним із варіантів. Ось чому генератори кольорової палітри заходьте так корисно! За допомогою дуже мало обчислень, ці інструменти можуть надати вам кілька кольорів, які доповнюють один одного.

Кольорове колесо

Розуміння взаємозв'язку між кольорами найкраще візуалізувати за допомогою кольорового круга. Кольори розташовані по колу, виходячи не з їх відносної частоти. Радіальна відстань - це насиченість кольору та азимутальне положення на колі як відтінок кольору.

Кольорове колесо

Смішний факт: Вперше сер Ісаак Ньютон розробив Кольорове колесо в 1665 році - основу для своїх експериментів з призмами. Його експерименти призвели до теорії, що червоний, жовтий та синій були основними кольорами, від яких походять усі інші кольори. Побічна нота… він навіть застосовував музичні «ноти» до кожного кольору.

Озброї мене Гармонією ...

коло Ньютона кольору

Види кольорових гармоній

Зв'язок між і тим, як обчислюється кожен набір безкоштовних кольорів, відомий як гармоній. Ось чудове оглядове відео:

З кожним типом пов'язані різні характеристики:

  • Аналог - групи кольорів, які знаходяться поруч один з одним на кольоровому колі. 
  • Монохроматичний - групи, отримані з одного базового відтінку та розширені з використанням його відтінків, тонів та відтінків.
  • тріада - групи кольорів, рівномірно розташовані навколо color колесо
  • Додатковий - групи кольорів, які протистоять один одному на кольоровому колі.
  • Спліт Доповнює - варіація доповнення, де використовуються два кольори, суміжні з доповненням.
  • Прямокутник (тетрадичний) - використовує чотири кольори, розташовані у дві взаємодоповнюючі пари
  • Площа - подібний до прямокутника, але з усіма чотирма кольорами, розташованими рівномірно навколо кольорового кола
  • З'єднання - колір і два кольори, що сусідять з його додатковим кольором
  • Відтінки - коригування відтінку (збільшення яскравості) або відтінку (темряви) для основного кольору.

Це не суб’єктивні теми, це фактичні математичні обчислення з приємними назвами, які допомагають нам краще зрозуміти обчислення.

Генератори схем кольорової палітри

Використовуючи генератор кольорових палітр, ви можете отримати чудові, доповнюючі поєднання кольорів, як це:

Я часто використовую генератори схем кольорових палітр, коли працюю на клієнтських сайтах. Оскільки я не фахівець з кольорів, ці інструменти допомагають мені краще вибирати такі речі, як фони, межі, фони нижнього колонтитула, основні та додаткові кольори кнопок. Результат - веб-сайт, який набагато приємніший оку! Це тонка, неймовірно потужна стратегія застосувати до вашого дизайну що завгодно - від реклами до цілого веб-сайту.

Ось декілька чудових генераторів схем кольорових палітр в Інтернеті:

  • саман - фантастичний інструмент із до 5 кольорами, де ви можете тестувати різні типи, вносити коригування та навіть зберігати свою тему в будь-якому продукті Adobe.
  • BrandColors - найбільша колекція офіційних кольорових кодів брендів навколо.
  • Canva - завантажте фотографію, і вони використають її як основу для вашої палітри!
  • Colllor - створити послідовну палітру кольорів в Інтернеті всього за кілька кліків. 
  • Дизайнер кольорів - Просто виберіть колір або скористайтесь попередньо вибраними кольорами, а додаток зробить все інше. 
  • Полювання на кольори - безкоштовна і відкрита платформа для натхнення кольорами з тисячами модних підібраних кольорових палітр
  • Кольоровий кулер - створити кольорову палітру для Instagram, щоб зробити її більш естетичною.
  • Колмормінд - генератор кольорових схем, який використовує глибоке навчання. Він може навчитися кольоровим стилям із фотографій, фільмів та популярного мистецтва.
  • Кольоровий простір - просто введіть один-три кольори і сформуйте кілька схем!
  • Кольоровий код - справді крутий досвід на весь екран для створення вашої кольорової палітри з низкою стилів гармонії зліва.
  • COLOUR любов - творче співтовариство, де люди з усього світу створюють і діляться кольорами, палітрами та візерунками, обговорюють останні тенденції та досліджують барвисті статті.
  • Охолоджувачі - створіть ідеальну палітру або надихайтеся тисячами красивих колірних схем.
  • Вибір кольору даних - За допомогою засобу вибору палітри створіть серію кольорів, які є візуально рівновіддалений
  • Хрома - використовує ШІ, щоб дізнатись, які кольори вам подобаються, і створює палітри, які Ви можете знаходити, шукати та зберігати.
  • Матеріал Дизайн - створюйте, діліться та застосовуйте колірні схеми для вашого інтерфейсу. Він навіть постачається з експортом для вашого додатка!
  • Музлі кольори - додайте назву кольору або код і створіть красиву палітру.
  • Палеттон - виберіть основний колір і надихайтеся.
  • Веранда - надихайтеся тонами дивовижних кольорових палітр. 

Колір та доступність

Будь ласка, майте на увазі, коли ви вирішили розробити свою наступну схему палітри, що існує значна кількість людей з вадами зору та кольоровими дефіцитами, які повинні взаємодіяти з вашим досвідом.

  • Контрастність - Кожен незалежний колір має яскравість. Кольори накладок та сусідніх об’єктів повинні мати відносний коефіцієнт освітленості 4.5: 1, щоб люди з вадами зору могли їх розрізнити. Я б не намагався самостійно розрахувати коефіцієнти, ви можете перевірити свої коефіцієнти двох кольорів Кольоровий, Контраст, або Colorsafe.
  • Іконографія - Виділення поля червоним кольором не допомагає тому, хто має дефіцит кольору. Обов’язково застосуйте якесь повідомлення або піктограму, щоб повідомити їх, що також є проблема.
  • Сфокусувати - Багато людей орієнтуються за допомогою клавіатур або пристроїв для читання екрану. Переконайтеся, що ваш користувальницький інтерфейс правильно розроблений з усіма позначками доступності, щоб вони могли скористатися перевагами вашого сайту. Для людей із вадами зору використання пробілу та можливість збільшувати чи зменшувати розмір шрифту там, де це не руйнує макет, є критичним.

Ви очний експерт? Колірний експерт? Експерт з питань доступності? Будь ласка, надайте мені будь-які вказівки щодо вдосконалення цієї статті!

Розкриття інформації: Я використовую партнерські посилання в цій статті.

Що ви думаєте?

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.