Зачем нашим глазам нужны дополнительные схемы цветовой палитры… и где их можно сделать

Дополнительные схемы цветовой палитры

Знаете ли вы, что на самом деле за тем, как два или более цвета дополняют друг друга, стоит биологическая наука? Я не офтальмолог и не оптометрист, но я постараюсь перевести научные данные здесь для таких простых людей, как я. Начнем с цвета в целом.

Цвета - это частоты

Яблоко красное… да? Ну не совсем. Частота отражения и преломления света от поверхности яблока делает его обнаруживаемым, преобразуемым нашими глазами в сигналы, отправляемые в наш мозг, где мы определяем его как «красный». Ух… у меня болит голова при одной мысли об этом. Хотя это правда ... цвет это просто частота света. Вот вид электромагнитного спектра и частот каждого цвета:

Цвет и электромагнитный спектр

Именно поэтому белый свет, направленный на призму, дает радугу. Что действительно происходит, так это то, что кристалл меняет частоту длины волны при преломлении света:

Призма
Хрустальная призма рассеивает белый свет на множество цветов.

Ваши глаза - частотные детекторы

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

Вы когда-нибудь замечали, что можете долго смотреть на что-то очень контрастное, отводить взгляд и продолжать видеть остаточное изображение, которое не соответствует исходным цветам, на которые вы смотрели? Допустим, это синий квадрат на белой стене:

Через некоторое время клетки вашего глаза, которые излучают синий свет, устают, и сигнал, который они посылают в мозг, немного слабее. Поскольку эта часть визуального спектра немного подавлена, когда вы смотрите на белую стену после того, как смотрите на синий квадрат, вы видите слабое оранжевое остаточное изображение. То, что вы видите, - это белый спектр света от стены за вычетом небольшого кусочка синего, который ваш мозг воспринимает как оранжевый.

Теория цвета 101: заставляем дополнительные цвета работать на вас

Если бы этой усталости не произошло, нашим глазам и мозгу не пришлось бы так усердно работать, чтобы интерпретировать различные длины волн (например, цвета), которые они видят.

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

Давайте проведем аналогию звука и цвета. Если бы вы слушали разные частоты и громкости, которые не дополняли друг друга, вы бы подумали об этом как о шум. Это мало чем отличается от цвета, где обнаруженные яркость, контраст и цвет могут быть визуально шумный или дополнительный. В любой визуальной среде мы хотим работать в направлении гармонии.

Вот почему вы не видите статиста на фоне фильма в ярко-красной рубашке. И именно поэтому декораторы интерьера стараются найти дополнительные цвета для стен, мебели, предметов искусства и других элементов комнаты, которую они проектируют. Цвет имеет решающее значение для создания настроения, которое возникает у посетителя, когда он входит в него, в зависимости от того, насколько легко его мозгу интерпретировать цвета.

ВЕСЬ Ваш цветовая палитра эквивалентно сборке группы в красивой гармонии. И точно так же, как голоса и инструменты, собранные близко друг к другу по громкости и частоте, совпадают с дополнительными цветами вашей цветовой палитры. Дизайн цветовой палитры - это действительно искусство для профессионалов, которые точно настроили свое обнаружение цвета, но это также и целая вычислительная наука, потому что можно вычислить дополнительные частоты.

Подробнее о гармониях скоро ... вернемся к теории цвета.

Цвета RGB

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

Разница в этой частоте света между оранжевым и синим достаточно велика, чтобы контрастировать, но не настолько, чтобы нашим глазам было трудно ее интерпретировать. Цветовые частоты дополняют друг друга и приятны для наших рецепторов!

Вычислить один цвет легко… вычисление 3 или более дополнительных цветов требует, чтобы вы вычислили эквивалентные количества между каждым из вариантов. Поэтому генераторы схем цветовой палитры так пригодится! С минимальным количеством вычислений эти инструменты могут предоставить вам несколько цветов, которые дополняют друг друга.

Цветовое колесо

Понимание взаимосвязи между цветами лучше всего визуализировать с помощью цветового круга. Цвета расположены по кругу в зависимости от их относительной частоты. Радиальное расстояние - это насыщенность цвета и азимутальное положение на круге как оттенок цвета.

Цветовое колесо

Интересный факт: Сэр Исаак Ньютон впервые разработал Цветовое колесо в 1665 году, что послужило основой для своих экспериментов с призмами. Его эксперименты привели к теории, что красный, желтый и синий были основными цветами, из которых произошли все остальные цвета. Боковое примечание ... он даже применил музыкальные «ноты» к каждому цвету.

Вооружи меня Гармонией…

цветовой круг ньютона

Типы цветовых гармоний

Отношения между каждым набором дополнительных цветов и способы их вычисления известны как созвучий. Вот отличный обзорный видеоролик:

С каждым типом связаны разные характеристики:

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

Это не субъективные темы, это реальные математические вычисления с красивыми названиями, которые помогают нам лучше понять вычисления.

Генераторы схемы цветовой палитры

Используя генератор схемы цветовой палитры, вы можете получить красивые дополняющие цветовые комбинации, подобные этой:

Я часто использую генераторы схемы цветовой палитры, когда работаю на клиентских сайтах. Поскольку я не эксперт по цветам, эти инструменты помогают мне лучше выбирать такие вещи, как фон, границы, фон нижнего колонтитула, основные и дополнительные цвета кнопок. В результате веб-сайт становится намного приятнее для глаз! Это тонкая, невероятно мощная стратегия, которую можно применить к вашему дизайну чего угодно - от рекламы до целого веб-сайта.

Вот несколько отличных онлайн-генераторов цветовой палитры:

  • саман - фантастический инструмент, содержащий до 5 цветов, где вы можете тестировать различные типы, вносить корректировки и даже сохранять свою тему в любом продукте Adobe.
  • БрендЦвета - самая большая коллекция официальных цветовых кодов бренда.
  • Canva - загрузите фото, и они будут использовать его как основу для вашей палитры!
  • Colllor - создать согласованную цветовую палитру всего за несколько кликов. 
  • Цветовой дизайнер - Просто выберите цвет или используйте предварительно выбранные цвета, а приложение сделает все остальное. 
  • Цветная охота - бесплатная и открытая платформа для вдохновения цветов с тысячами модных цветовых палитр, подобранных вручную
  • Колоркулер - сгенерируйте цветовую палитру для Instagram, чтобы сделать ее более эстетичной.
  • Colormind - генератор цветовой схемы, использующий глубокое обучение. Он может изучать цветовые стили по фотографиям, фильмам и популярным произведениям искусства.
  • Цветовое пространство - просто введите от одного до трех цветов и создайте несколько схем!
  • Цветовой код - действительно классный интерфейс для создания вашей цветовой палитры с несколькими стилями гармонии слева.
  • ЦВЕТА - творческое сообщество, в котором люди со всего мира создают и обмениваются цветами, палитрами и узорами, обсуждают последние тенденции и изучают красочные статьи.
  • Кулеры - создавайте идеальную палитру или вдохновляйтесь тысячами красивых цветовых схем.
  • Средство выбора цвета данных - Используйте средство выбора палитры, чтобы создать серию цветов, которые визуально равноудаленный
  • Хрома - использует ИИ, чтобы узнать, какие цвета вам нравятся, и создает палитры, которые вы можете находить, искать и сохранять.
  • Материал Дизайн - создавайте, делитесь и применяйте цветовые схемы для вашего пользовательского интерфейса. Он даже поставляется с экспортом для вашего приложения!
  • Цвета Музли - добавьте название цвета или код и создайте красивую палитру.
  • Paletton - выберите основной цвет и вдохновитесь.
  • VERANDA - вдохновляйтесь множеством удивительных цветовых палитр. 

Цвет и доступность

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

  • контраст - Каждый независимый цвет имеет яркость. Цвета наложений и соседних объектов должны иметь относительную яркость 4.5: 1, чтобы люди с нарушениями зрения могли их различать. Я бы не стал пытаться вычислить отношения самостоятельно, вы можете проверить свои отношения двух цветов с помощью Красочный, Контрастность, или Безопасный цвет.
  • иконография - Выделение поля красным цветом не поможет тем, у кого дефицит цвета. Обязательно примените какое-то сообщение или значок, чтобы сообщить им, что есть проблема.
  • Фокус - Многие люди используют клавиатуру или программы для чтения с экрана. Убедитесь, что ваш пользовательский интерфейс правильно разработан и снабжен всеми тегами доступности, чтобы они могли воспользоваться преимуществами вашего сайта. Для людей с нарушениями зрения критически важно использовать пустое пространство и возможность увеличивать или уменьшать размер шрифта, если это не разрушает макет.

Вы эксперт по глазам? Эксперт по цвету? Эксперт по доступности? Не стесняйтесь давать мне какие-либо рекомендации по улучшению этой статьи!

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

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.