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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвета RGB

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

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

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

Цветовой круг

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

Объявления

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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