Теория цветов: Теория цвета — все самое интересное на ПостНауке

Теория цвета как основа для дизайна и иллюстрации / Хабр

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

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

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

Немного истории

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

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

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

В дальнейшем благодаря системе Манселла он был дополнен третичными цветами, такими как желто-оранжевый, красно-оранжевый, красно-фиолетовый, сине-фиолетовый и желто-зеленый. Альфред Манселл также был выдающимся исследователем цвета, который расширил размерность идей Исаака Ньютона. В своих работах Манселл определил, что двухмерный цветовой круг подходит для описания только одного измерения цвета. В итоге он первым представил цвет в трехмерном цветовом пространстве через три его атрибута: тон, значение (яркость) и хроматичность. Сегодня дизайнеры используют цветовой круг для создания красивых притягательных работ с помощью палитр, в основе которых лежит теория цвета.

Цвет и его теория

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

Основные цвета

выступают основой для получения всех остальных цветов. К ним относятся красный, синий и желтый. (примечание: данное определение характерно для художественной системы цветовоспроизведения, которая расходится с аддитивной системой RGB Максвелла, где основными цветами являются красный, зеленый и синий).

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

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

Категории цветов
Цветовой круг представляет основные, вторичные, третичные цвета, а также их оттенки, тени и тональности. Он выступает в качестве ориентира, позволяя дизайнерам создавать уникальные и привлекательные цветовые палитры.

Основные термины колористики

Различные температуры цветов

Тон указывает на цветовой пигмент и может полноправно называться соответствующим цветом.

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

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

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

Тени используются для затемнения цвета путем добавления в его тон черного.

Значение (яркость) цвета отражает его светлоту или темноту.

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

Цветовые палитры

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

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

Цветовая палитра

Виды цветовых палитр

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

Монохроматическая цветовая схема

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

Аналоговая цветовая схема

Комплементарная
Комплементарная палитра строится на основе двух противоположных цветов круга и используется для создания эффекта контраста.

Комплементарная цветовая схема

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

Сплит-комплементарная цветовая схема

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

Триадическая цветовая схема

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

Прямоугольная цветовая схема

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

К известным инструментам работы с палитрами относятся:

Adobe Color

Coolors

Canva Color Wheel

Paletton

Color Hunt

Психология цвета

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

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

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

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

Психология восприятия цвета

Культурные различия в восприятии цветов

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

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

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

Согласованность цветов фирменных стилей

При создании цветовой палитры важно добиться уникальности бренда. Здесь дизайнеру нужно учесть ряд факторов, например фирменный дизайн конкурентов и их цветовые схемы. Использование схожей цветовой палитры может вызвать путаницу среди потребителей. Однако при этом не обязательно брать абсолютно иную цветовую гамму, лучше будет просто обыграть аналогичную в собственном ключе. Например, сети McDonald’s и Burger King обе работают в сфере быстрого питания и предлагают аналогичный сервис. При этом и тот, и другой бренд используют в фирменном стиле комбинацию красного и желтого.

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

Рекомендации по выбору цветов

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

Заключение

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

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

7 уроков на примере популярных брендов

Пабло Пикассо однажды сказал: «Почему две краски, расположенные рядом, поют? Может ли кто-то объяснить это? Нет. Поэтому никто никогда не сможет научить рисовать».

Дамы и господа, Пикассо ошибался. На самом деле ответить на этот вопрос можно. А если быть точнее, можно понять, почему некоторые комбинации цветов выглядят гармонично, а другие — нет.

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

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

И снова с этим можно поспорить.

Если смотреть на проблему с научной точки зрения, определенно можно допустить существование генетической предрасположенности к искусству и дизайну, однако в контексте «правила 10 000 часов» такая предрасположенность перестает играть большую роль. Если кто-то не в курсе, «правило 10 000 часов» ― это концепция, согласно которой ключевая составляющая в освоении любого, даже самого сложного навыка — вовсе не талант, а около 10 000 часов, проведенных за практикой и совершенствованием этого навыка.

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

Практика превыше всего

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

Ниже представлены цветовые палитры семи различных веб-сайтов, принадлежащих известным брендам. В каждом случае сначала будет представлена сама палитра и у вас будет возможность угадать, какой компании она принадлежит. Затем мы разберем теорию цвета и механизмы, стоящие за гармоничностью (или, в некоторых случаях, дисгармоничностью) каждой отдельно взятой страницы.

Урок 1. Разновидности цветовых моделей

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

А теперь опуститесь ниже, чтобы проверить свой ответ!

Конечно же, за этой зелено-желто-красно-голубой палитрой скрывается не кто иной, как великий и могучий Google!

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

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

Однако такое представление о создании цветов путем смешения работает лишь в рамках цветовой модели CMYK, главенствующей в мире живописи и печати. Каждая буква акронима CMYK указывает на один из ключевых цветов модели: Cyan (синеватый), Magenta (красноватый), Yellow (желтый), и Key («ключевой» — черный). То есть эта модель состоит из трех основных цветов и черного, который позволяет создавать более темные оттенки.

А вот дальше все немного сложнее: CMYK — субтрактивная модель. Другими словами, цвета создаются путем поглощения или «вычитания» из видимого спектра световых волн определенной длины. В результате непоглощенные волны отражаются, и отраженный свет — это те цвета, которые мы видим.

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

В качестве примера для сравнения выше представлено изображение, где цвета были созданы не посредством CMYK, а при помощи RGB-модели (red, green, blue — красный, зеленый, синий), которая используется в компьютерах, телевизорах и других электронных устройствах. В отличие от CMYK, RGB — аддитивная модель, то есть красные, зеленые и синие световые волны комбинируются для создания всех остальных цветов.

В то время как в CMYK-модели зеленый цвет — вторичный, в рамках RGB-модели это один из первичных цветов. Да и в целом цветовая палитра Google вызывает ощущение чего-то базового. Как кубики на картинке выше.

Итак, мы разобрали разницу между двумя основными цветовыми моделями ― CMKY и RGB. Двигаемся дальше.

Урок 2. Тон, светлота и насыщенность

Сайту какой компании принадлежит эта цветовая палитра?

А теперь опуститесь ниже, чтобы проверить свой ответ.

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

Итак, разберем основную терминологию параметров цвета:

Тон. Это то, что мы имеем в виду, говоря «цвет»; указывает на длину световой волны. Тон — ключевая характеристика цвета, то, что, например, отличает синий от красного или зеленого.

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

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

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

Серый цвет иконки — тоже оттенок голубого, пусть и заметно менее насыщенный (около 20%).

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

Такая цветовая схема разительно отличается от многоцветной палитры Google, где все цвета первичные и отсутствует какой-то основной тон. Так почему же цветам страницы Google удается гармонично смотреться вместе? Дело в том, что все они имеют одинаково высокий уровень насыщенности.

Урок 3. Типы цветовых комбинаций

Итак, следующий ресурс вы вряд ли узнаете, но тем не менее он нам нужен.

Это страница компании UPS.

Если не угадали, ничего страшного: многие, вероятно, слышали об этой популярной в США курьерской компании, но мало кто из нас пользовался ее услугами. Так или иначе, основной цвет логотипа компании — коричневый. С одной стороны, может показаться неожиданным выбор серо-синего в качестве цвета верхней панели и других элементов, однако, нравится вам этот цвет или нет, поспорить с тем, что цветовая палитра сайта гармонична, не получится. Причина кроется в том, что основные цвета сайта (коричневый и серо-синий) — дополняют друг друга.

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

Однако, посмотрев на цветовой круг в поисках наглядного подтверждения вышесказанного, вы наверняка спросите: «А где тут коричневый?»

Дело в том, что коричневый — всего лишь оттенок красно-рыжего (который присутствует в круге), отличающийся более низким параметром светлоты. Таким образом, чтобы найти цвет, комплементарный коричневому, нужно просто отыскать красно-оранжевый. А на противоположном конце круга вы обнаружите искомый синий.

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

• Аналогичные цвета (Analogous Colors) — это цвета, находящиеся рядом на цветовом круге.
• Триада цветов (Triadic colors) — три цвета, лежащие на окружности цветового круга на одинаковом друг от друга расстоянии.
• Расщепленные дополняющие цвета (Split Complementary Colors) — основной цвет и два других, находящихся на равном расстоянии от комплементарного ему цвета.

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

Урок 4. Восприятие цвета — восприятие бренда

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

Речь идет о FedEx.

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

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

Урок 5. Проблемы взаимодополнения

Рассмотрим еще один пример, на этот раз — известный в США новостной ресурс.

Итак, это сайт газеты Huffington Post. И что в первую очередь бросается в глаза?

Да — сайт зеленый. И тут мы затронем тему психологии цвета. Дело в том, что зеленый ассоциируется у людей с балансом, гармонией и уверенностью — определенно, неплохой выбор для новостного сайта.

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

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

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

Вторая причина, по которой не стоит полагаться на такой контраст, состоит в том, что люди, страдающие цветовой слепотой, а именно ее самой распространенной формой ― дейтеранопией (пониженной чувствительностью к оттенкам зеленого), просто не смогут разобрать, что у вас там изображено. Еще одна проблема, возникающая при использовании красного и зеленого: они «соперничают» между собой и, выступая на фоне друг друга, воспринимаются как более яркие.

Дизайнеры сайта Huffington Post учли эту особенность и, во-первых, использовали очень умеренное количество красного, а во-вторых, взяли более темный и ненасыщенный зеленый, на фоне которого красный стал смотреться лучше.

Урок 6. Насыщенность и первичные цвета

Итак, переходим к следующей палитре.

Она принадлежит новостному ресурсу BuzzFeed.

Первые слова и фразы, которые приходят в голову при виде палитры сайта, — «яркий», «насыщенный», «кричащий»; она как бы говорит: «Остановись и посмотри на меня!». Очевидно, задача такой палитры — привлечь внимание. А что же с точки зрения теории цвета?

Для начала отметим, что в палитре BuzzFeed, так же как и Google, используются первичные цвета: красный, желтый и синий. Однако, в отличие от поискового гиганта, они здесь более светлые и насыщенные. Также, если не брать в расчет черный (который фактически является не цветом, а его полным отсутствием — поглощением всех цветовых волн), можно сказать, что на странице BuzzFeed использована триадная цветовая палитра.

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

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

Синий в цветовой гамме сайта предназначен исключительно для ссылок и CTA-кнопок, и это крайне умное решение. Так как он связан с чувством спокойствия и доверия, ссылки и кнопки выступают в качестве приглашения, как бы говоря пользователю: «Не беспокойся, тут все такое яркое и сумасшедшее, а нам ты можешь доверять. Не бойся — нажимай».

Урок 7. Ненасыщенные цвета

Итак, последний пример.

Даже если не узнаете палитру, сайт вы узнаете наверняка.

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

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

Во-первых, так же как и в случае с Twitter, на странице используется несколько оттенков «фирменного» голубого цвета Facebook разной светлоты. Такой шаг позволяет расставить акценты, сохранив общее стилистическое единообразие.

Однако ключевым параметром здесь является насыщенность: все основные цвета страницы — желтый, красный и голубой — характеризуются равномерно низким уровнем насыщенности. В результате весь интерфейс создает ощущение спокойствия и расслабленности. То есть, в то время как интерфейс BuzzFeed возбуждает психику, страница Facebook создает атмосферу уюта и комфорта.

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

В конечном итоге дизайн Facebook, где преобладает мягкая, ненасыщенная синяя палитра, вызывает желание сесть и расслабиться. Вероятно, именно поэтому среднестатистический американец ежедневно проводит на этой странице около 40 минут — похоже, палитра делает свое дело.

Заключение

Создавая лендинг, стоит принимать во внимание огромное количество параметров, среди которых цветовая палитра — один из главных.

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

Высоких вам конверсий!

По материалам: blog.hubspot.com, Image source: Jane Hannah 

21-03-2015

Цветовая теория. Цветовой круг.

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

Но возникла проблема — как разобраться среди всего этого многообразия. Как правильно использовать цвета и смешивать их друг с другом? Какими правилами руководствоваться?
Давайте разбираться.

Что такое цвет?

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

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

Отсюда следует: Цвет — свойство света.

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

Спектр и цветовой круг

Среди всех электромагнитных волн видимый свет занимает крайне маленькое пространство.

Но его спектр содержит огромное количество цветов.

Ключевые цвета спектра:

• Красный
• Оранжевый
• Желтый
• Зеленый
• Голубой
• Синий
• Фиолетовый

​

Именно эти цвета и входят в палитру так называемого “цветового круга”. Он состоит из красного, зеленого и синего цвета (RGB).

Упрощенный вариант:

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

Но цветовой круг может включать в себя и другие основные цвета. Как например в модели CMYK (основные цвета — фиолетовый, желтый, голубой).

Отличие моделей RGB и CMYK еще в типе смешивания: в RGB смешивание всех цветов дает белый цвет (он в середине), а в CMYK-модели конечный цвет смешивания — черный. CMYK наиболее удобен при работе с реальными красками, а не с цифрой.

Двенадцатеричный цветовой круг / Цветовой круг Йоханнеса Иттена

Двенадцатеричный цветовой круг — классический. Он помогает подбирать гармоничные цветовые комбинации из двух, трех, четырех и более цветов.

Круг разделен на 12 частей:

Основные цвета — желтый, синий и красный.
Дополнительные цвета — оранжевый, зеленый и фиолетовый.
Между основными и дополнительными оттенками есть переходные цвета (называются по имени основного и дополнительного цвета).

В круге есть разделение на холодные/теплые оттенки:

Теплые — ближе к таким цветам как: оранжевый и желтый.
Холодные — ближе к синему цвету.

Ключевые параметры цвета:
Оттенок/Насыщенность/Яркость

• Оттенок — разновидность цвета из цветового круга.
• Насыщенность — интенсивность определенного тона. От полного отсутствия до максимальной интенсивности.
• Яркость/Осветление — градиент от наиболее яркой точки к более темной.

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

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

О них сейчас и пойдет речь.

Цветовые гармонии
Монохром

Начнём с самого простого варианта — монохром. Использование только одного цвета, всех его оттенков, тональностей и теней. Например, синего (как на первой картинке).

Рекла

Рекла

Аналогичные цвета

Используются те цвета, что находятся рядом друг с другом в цветовом круге: два или три цвета.

Несколько примеров:

Комплиментарные/противоположные цвета

Самая распространённая гармония, основана на контрасте двух удаленных или предельно удаленных цветов.
На цветовом круге они расположены друг напротив друга.

Комплиментарные цвета часто используются в кино:

В живописи:

Четыре гармоничных цвета

Это сдвоенные комплиментарные цвета — используются противоположные оттенки.

Вот несколько примеров:

Красный-зеленый, желтый-синий.

Раздельные комплиментарные цвета

Рекла

В данной гармонии цвету на одной стороне круга противостоят два на противоположной стороне.

Рекла

Гармонические триады

В этой гармонии происходит разделение на три основных цвета.

Маскирование гаммы

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

Небольшая хитрость

Рекла

Цветовой круг есть и в Photoshop. Но по умолчанию он спрятан.
Как его включить?
Заходим в раздел Edit — Preferences — General.
В закладке “HUD Color Picker выбираем Hue Wheel.
Теперь, чтобы вызвать цветовой круг выбираем инструмент кисть (brush tool) и зажимаем комбинацию клавиш: Shift + Alt + Right click (правая кнопка мыши).

Говоря о цветовых гармониях нельзя не упомянуть про тональный контраст.

Тоновый/Тональный контраст

Представляет собой разницу от наиболее светлого к наиболее темному. Тональный контраст характерен для ахроматических цветов.

Ахроматические цвета — это оттенки серого в диапазоне от белого к черному. Наиболее ярким (светлым) является белый цвет, а наиболее темным – черный.

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

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

Композиция цвета

Композиция цвета основана на пропорции одного цвета. Помогает выделять главное и второстепенное.

Очень часто пропорциональное распределение оттенков в кадре используется в мультфильмах, кино, фотографии.

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

Этот прием можно встретить много где, вот ещё несколько примеров:

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

Понравилась статья? Подпишись на нас в социальный сетях. Там мы регулярно оповещаем о выходе новых статей и не только 🙂

Цветовая схема и Цветовой круг

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

Теория цвета

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

Совет

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

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

Лучшим помощником в подборе сочетающихся цветов является цветовой круг Иттена. Он основан на трех первичных цветах (желтом, синим и красном), из которых шаг за шагом могут быть получены все остальные. Если в равном соотношении смешать желтый и синий, то выйдет зеленый цвет. Чтобы получить оранжевый, нужно объединить красный с желтым, а для создания фиолетового – красный с синим. Три получившихся цвета – зеленый, оранжевый и фиолетовый – называются вторичными. От них тоже есть производные, которые, в свою очередь, считаются третичными цветами или цветами третьего порядка. В общей сложности круг поделен на 12 цветовых секторов.

Но в цветовом круге Иттена нет оттенков основных цветов. Поэтому, при помощи ахроматических цветов — черного и белого, круг, без изменения числа секторов, был дополнен множеством оттенков.

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

Цветовой тон

Это свойство зрительного ощущения человека, определяет название цвета: оранжевый, фиолетовый, синий. В данном контексте словосочетание «цветовой тон» можно считать синонимом слову «цвет».

Насыщенность

Насыщенность описывает интенсивность цвета. Цветовой тон высокой насыщенности дает яркий, интенсивный цвет. Менее насыщенный цветовой тон выглядит бледнее. Для легкости понимания слово «насыщенность» можно мысленно заменить на «красочность».

Яркость

Данный параметр определяет насколько цвет темный или светлый. Обычно измеряется в процентах. Яркость можно представить, как количество света, падающего на объект — от белого до черного, то есть от стопроцентной яркости до нулевой. Если на что-то направить яркий свет, например на аппетитную и зрелую клубнику, то она будет казаться практически белой. И, наоборот, черной, если на неё не будет попадать свет.

Использование цветового круга

Существует несколько схем по подбору цветов при помощи цветового круга. Но перед тем как перейти к выбору схемы, необходимо определить главный цвет, вокруг которого будет строиться создаваемый рисунок. Вот некоторые схемы:

Аналоговая схема. Это сочетание цветов из трех соседних по кругу секторов, где в центре этой троицы должен находиться главный цвет. Такое сочетание нередко встречается в природе.

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

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

Классическая триада. Согласно этой схеме, нужно взять три равноудаленных по кругу цвета. Один из которых основной, а два остальных — дополнительные.

Примечание

В программе фотошоп имеется встроенный цветовой круг, найти который можно на палитре Kuler.

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

Шаг 1 Выберите главный цвет.

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

Шаг 2 Найдите главный цвет на цветовом круге.

Если у вас есть цветовой круг, то найти на нем главный цвет можно, просто взглянув на круг.

Шаг 3

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

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

Заметили ошибку в тексте — выделите ее и нажмите Ctrl + Enter. Спасибо!

кратко обо всем, что нужно знать

Цветовой круг, состоящий из 12 частей, представляет визуальный спектр света, который мы, люди, можем на самом деле различать. Это радуга, которую мы видим, благодаря рассеиванию света через призму или каплю дождя. Видимый спектр (традиционно КОЖЗГСФ) — это крайне маленький диапазон полного электромагнитного спектра, который начинается с радиоволн и заканчивается гамма-волнами. Каждый цвет обладает своей собственной частотой, которая воспринимается человеческим глазом как отличное цветовое восприятие.

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

Художники делят все цвета на три группы: Основные цвета (первичные), Вторичные цвета и Третичные цвета. Тон, относящийся к названию цвета, как то красный, синий и желтый, являются разными оттенками. Насыщенность цвета — это сила, с которой этот цвет представлен. Чистота цвета — это количество серого в цвете, достигаемое при добавлении белого или черного. Это значение относится к светлоте и темноте цвета по шкале градации яркости от 1 до 10.

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

Первичные цвета

Красный, Желтый и Синий, так как световые волны обладают различной частотой: Красный — длинные волны, Желтый — средние, Синий — ближе к коротким, последний- (Фиолетовый)

Вторичные цвета

Оранжевый, Зеленый и Фиолетовый — сочетание Основных цветов в пары является результатом появления Вторичных цветов. (Желтый +Красный=Оранжевый, Желтый+Синий=Зеленый, Красный+Синий=Фиолетовый)

Третичные цвета

Цвета, которые получаются при смешивании Первичных и Вторичных — это Желто-оранжевый, Красно-оранжевый, Желто-зеленый, Сине-зеленый, Красно-фиолетовый и Сине-фиолетовый.

Комплиментарные цвета

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

Как получить «свечение»

Вы знали? Использование более светлых оттенков комплиментарных цветов может воссоздать то самое «свечение» света и цвета.

Смешивание комплиментарных цветов

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

Сплит-комплиментарные цвета

Сплит-комплиментарные группы состоят из главного цвета и двух прилегающих цветов. Например, Желтый\Красно-фиолетовый\Сине-фиолетовый.

Аналогичные цвета

Группы из 3-4 ближайших цветов на цветовом колесе. Здесь представлены четыре группы из трех аналогичных цветов.

Цветовой ключ

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

Высокий ключ — высокий уровень насыщенности цветовВысокий ключ — низкий уровень насыщенности цветовНизкий ключ — высокий уровень насыщенности цветовНизкий ключ- низкий уровень насыщенности цветов

Цвет и эмоциональная температура

Основные цвета — красный, желтый, синий

Красный — это цвет крови и всего живого, он теплый. Желтый — это цвет солнца и теплых золотистых цветов. Синий —это цвет прохлады и воды и далекого неба.

Вторичные цвета — оранжевый, зеленый, фиолетовый

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

Третичные цвета — желто-оранжевый, красно-оранжевый, красно-фиолетовый, сине-фиолетовый, сине-зеленый, желто-зеленый

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

Эмоциональный отклик на цвет

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

Фредерик Эдвин Черч. «Сумерки в пустыне», 40×64,1860, масло, Кливлендский музей искусств

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

Включите в работу голову:

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

«Если вы замерзли, и при равных условиях можете выбирать из красного и синего одеяла, в каком, по вашему мнению будет теплее?»

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

Источник: Ссылка

 

Поделиться статьей:

 

Теория цвета — HiSoUR История культуры

В изобразительном искусстве теория цвета или теория цвета представляет собой практическое руководство по смешиванию цветов и визуальным эффектам конкретной цветовой комбинации. Существуют также определения (или категории) цветов на основе цветового круга: основной цвет, вторичный цвет и третичный цвет. Хотя принципы теории цвета впервые появились в трудах Леоне Баттиста Альберти (около 1435 г.) и тетрадей Леонардо да Винчи (около 1490 г.), традиция «теории колоритов» началась в 18 веке, первоначально в рамках партизанской полемики над Теория цвета Исаака Ньютона (Opticks, 1704) и природа первичных цветов. Оттуда он развивался как самостоятельная художественная традиция, только поверхностная ссылка на колориметрию и науку о зрении.

Цветовые абстракции
Основы теории цвета до 20-го века были построены вокруг «чистых» или идеальных цветов, характеризующихся чувственными переживаниями, а не атрибутами физического мира. Это привело к ряду неточностей в традиционных принципах теории цвета, которые не всегда устраняются в современных формулировках.

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

Вторая проблема заключалась в неспособности описать очень важные эффекты сильных яркостных (легкости) контрастов при появлении цветов, отраженных от поверхности (например, красок или чернил), в отличие от цветов света; «цвета», такие как коричневые или охры, не могут появляться в смесях света. Таким образом, сильный контраст яркости между желтой краской среднего значения и окружающим ярким белым цветом означает, что желтый цвет выглядит зеленым или коричневым, а сильный контраст яркости между радугой и окружающим небом делает желтый цвет в радуге, по-видимому, более слабый желтый или белый.

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

легкость (светлый или темный, белый или черный),
насыщенность (интенсивная и тупая), и
оттенок (например, красный, желтый, зеленый, голубой, синий и пурпурный).

Таким образом, визуальное воздействие «желтого» и «голубого» оттенков в визуальном дизайне зависит от относительной легкости и насыщенности оттенков.

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

Многие исторические «теоретики цвета» предположили, что три «чистых» основных цвета могут смешивать все возможные цвета и что любой отказ отдельных красок или чернил в соответствии с этой идеальной производительностью обусловлен примесью или несовершенством красителей. В действительности только мнимые «основные цвета», используемые в колориметрии, могут «смешивать» или количественно определять все видимые (воспринимаемые по возможности) цвета; но для этого эти мнимые праймериз определяются как лежащие вне диапазона видимых цветов; то есть их не видно. Любые три «первичных» цвета света, краски или чернил могут смешивать только ограниченный диапазон цветов, называемый гаммой, которая всегда меньше (содержит меньше цветов), чем весь спектр цветов, которые люди могут воспринимать.

Историческое прошлое
Теория цвета первоначально была сформулирована в терминах трех «первичных» или «примитивных» цветов: красного, желтого и синего (RYB), потому что эти цвета считались способными смешивать все остальные цвета. Такое поведение смешивания цветов давно известно принтерам, красильщикам и художникам, но эти профессии предпочитали чистые пигменты для первичных цветных смесей, потому что смеси были слишком скучными (ненасыщенными).

Основные цвета RYB стали основой теорий цветного зрения 18-го века, как фундаментальные сенсорные качества, которые смешиваются в восприятии всех физических цветов и одинаково в физической смеси пигментов или красителей. Эти теории были расширены исследованиями 18-го века различных чисто психологических цветовых эффектов, в частности контрастом между «комплементарными» или противоположными оттенками, которые создаются последовыми цветами и контрастными тенями в цветном свете. Эти идеи и многие личные наблюдения цвета были обобщены в двух основополагающих документах в теории цвета: Теория цветов (1810) немецким поэтом и министром-правителем Иоганном Вольфгангом фон Гете и «Закон одновременного цветового контраста» (1839 г.) французскими промышленными химик Мишель Эжен Шевреул. Чарльз Хейтер опубликовал новый практический трактат о трех примитивных цветах, предполагаемый как идеальная система рудиментарной информации (Лондон, 1826), в которой он описал, как можно получить все цвета всего от трех.

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

За тот же период промышленная химия радикально расширила диапазон цветовых оттенков светостойких синтетических пигментов, что позволило существенно улучшить насыщение цветных смесей красителей, красок и чернил. Он также создал красители и химические процессы, необходимые для цветной фотографии. В результате трехцветная печать стала эстетически и экономически осуществимой в массовых печатных изданиях, а цветовая теория художников была адаптирована к основным цветам, наиболее эффективным в чернилах или фотографических красках: голубой, пурпурный и желтый (CMY). (При печати темные цвета дополняются черными чернилами, известными как система CMYK, как при печати, так и в фотографии, белый цвет обеспечивает цвет бумаги.) Эти основные цвета CMY были согласованы с праймерами RGB и субтрактивным цветом смешивая с аддитивным смешиванием цветов, определяя первичные цвета CMY как вещества, которые поглощают только один из основных цветов сетчатки: голубой поглощает только красный (-R + G + B), пурпурный только зеленый (+ R-G + B) и желтый только синий фиолетовый (+ R + G-B). Важно добавить, что цветная печать CMYK или процесс означает экономичный способ создания широкого спектра цветов для печати, но недостаточно для воспроизведения определенных цветов, особенно оранжевого цвета и слегка недостаточного для воспроизведения пурпурных. Более широкий диапазон цветов может быть получен с добавлением других цветов к процессу печати, например, в системе печатной краски Hexachrome Pantone (шесть цветов) и других.

На протяжении большей части XIX века художественная теория цвета либо отставала от научного понимания, либо дополнялась научными книгами, написанными для публики, в частности Modern Chromatics (1879), американским физиком Огденом Рудом и ранними цветными атласами, разработанными Альбертом Мунселом (Munsell Книга цветов, 1915 г., см. Систему цветов Мунселла) и Вильгельм Оствальд (Color Atlas, 1919). Значительные успехи были сделаны в начале 20 века художниками, преподававшими или связавшимися с немецким Баухаусом, в частности с Уоссили Кандинским, Йоханнесом Иттеном, Фабером Бирреном и Йозефом Альберсом, чьи работы смешивают спекуляции с эмпирическим или демонстрационным исследованием принципов цветового дизайна.

Традиционная теория цвета

Дополнительные цвета
Для смешивания цветного света цветовое колесо Исаака Ньютона часто используется для описания дополнительных цветов, которые являются цветами, которые уменьшают оттенок друг друга, чтобы получить светлую смесь ахроматического (белого, серого или черного) света. Ньютон предложил в качестве гипотезы, что цвета, противоположные друг другу на круге оттенков, компенсируют оттенок друг друга; эта концепция была продемонстрирована более подробно в XIX веке.

Ключевым предположением в оттенке Ньютона было то, что «огненные» или максимальные насыщенные оттенки расположены на внешней окружности круга, а ахроматический белый — в центре. Тогда насыщение смеси двух спектральных оттенков было предсказано прямой между ними; смесь трех цветов была предсказана «центром тяжести» или центром трех треугольных точек и т. д.

Согласно традиционной теории цвета, основанной на субтрактивных первичных цветах и ​​цветовой модели RYB, которая получена из смеси красок, желтый, смешанный с фиолетовым, оранжевым, смешанным с синим или красным, смешанным с зеленым, дает эквивалентный серый цвет и является дополнительным цветом живописца. Эти контрасты составляют основу закона цветового контраста Chevreul: цвета, которые появляются вместе, будут изменены, как если бы они смешивались с дополнительным цветом другого цвета. Таким образом, кусок желтой ткани, помещенный на синий фон, будет окрашен в оранжевый цвет, потому что оранжевый цвет является дополняющим до синего.

Однако, когда дополнительные цвета выбраны на основе определения легкой смесью, они не совпадают с основными цветами художников. Это несоответствие становится важным, когда цветовая теория применяется во всех средах. Цифровое управление цветом использует круг оттенка, определенный в соответствии с добавочными основными цветами (цветовая модель RGB), поскольку цвета на мониторе компьютера являются добавочными смесями легких, а не субтрактивных смесей красок.

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

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

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

Теплый против прохладных цветов
Различие между «теплыми» и «прохладными» цветами было важно с по крайней мере в конце 18 века. Контраст, как прослеживается этимологией в Оксфордском словаре английского, кажется связанным с наблюдаемым контрастом в ландшафтном свете, между «теплыми» цветами, связанными с дневным или закатом, и «крутыми» цветами, связанными с серым или пасмурным днем. Теплые цвета часто называются оттенками красного, желтого, коричневого и коричневого цветов; холодные цвета часто называются оттенками синего зеленого цвета через синюю фиалку, включая большинство оттенков серого. Существует историческое несогласие с цветами, которые закрепляют полярность, но источники 19-го века устанавливают пиковый контраст между красным оранжевым и зеленовато-синим.

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

Контрастируйте традиционную теплой прохладную ассоциацию цвета с цветовой температурой теоретического излучающего черного тела, где связь цвета с температурой меняется на противоположную. Например, самые горячие звезды излучают синий свет (т. Е. С более короткой длиной волны и более высокой частотой), а самые холодные излучают красный цвет.

Этот контраст далее проявляется в психологических ассоциациях цветов с эффектом релятивистского доплера, наблюдаемым в астрономических объектах. Традиционные психологические ассоциации, где теплые цвета связаны с продвигающимися объектами и прохладными цветами с отступающими объектами, прямо противоположны тем, что наблюдаются в астрофизике, где звезды или галактики, движущиеся к нашей точке зрения с Земли, смещены (продвигаются), а звезды или галактики удаляются от Земли краснеют (отступают).

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

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

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

Оттенки и оттенки
При смешивании цветного света (аддитивные цветовые модели) ахроматическая смесь спектрально сбалансированного красного, зеленого и синего (RGB) всегда белого цвета, а не серого или черного. Когда мы смешиваем красители, такие как пигменты в смеси красок, получается цвет, который всегда темнее и ниже по цветности или насыщенности, чем исходные цвета. Это перемещает смешанный цвет в нейтральный цвет — серый или почти черный. Свет делается ярче или тусклее, регулируя их яркость или уровень энергии; в живописи легкость регулируется с помощью смеси с белым, черным или дополнением цвета.

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

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

Эта система по-прежнему пользуется популярностью среди современных художников, так как в основном это упрощенная версия геометрического правила Ньютона, которая ближе по течению ближе к кругу оттенков, создаст более яркие смеси. Тем не менее, благодаря широкому ассортименту современных красок, многие художники просто добавляют в свою палитру краски по желанию по целому ряду практических соображений. Например, они могут добавить алую, фиолетовую и / или зеленую краску, чтобы расширить смешиваемую гамму; и они включают один или несколько темных цветов (особенно «земляные» цвета, такие как желтая охря или сжигаемая сиена) просто потому, что они удобны для предварительного смешивания. Принтеры обычно дополняют палитру CMYK с точечными (фирменными знаками) чернилами.

Цветовая гармония
Было высказано предположение, что «Цвета, которые видели вместе, чтобы создать приятный эмоциональный ответ, как говорят, находятся в гармонии». Тем не менее, цветовая гармония является сложным понятием, потому что реакции человека на цвет являются как эмоциональными, так и познавательными, включая эмоциональный отклик и суждение. Следовательно, наши ответы на цвет и понятие цветовой гармонии открыты для влияния целого ряда различных факторов. Эти факторы включают индивидуальные различия (такие как возраст, пол, личные предпочтения, аффективное состояние и т. Д.), А также культурные, субкультурные и социально-ориентированные различия, которые вызывают обусловленные и выученные ответы о цвете. Кроме того, контекст всегда оказывает влияние на ответы о цвете и понятии цветовой гармонии, и на эту концепцию также влияют временные факторы (такие как изменение тенденций) и перцептивные факторы (такие как одновременный контраст), которые могут повлиять на реакцию человека на цвет. Следующая концептуальная модель иллюстрирует этот подход XXI века к цветовой гармонии:

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

Модели цветных колес часто использовались в качестве основы для принципов или принципов цветовой комбинации и для определения отношений между цветами. Некоторые теоретики и художники считают, что сопоставления дополнительного цвета будут иметь сильный контраст, чувство зрительного напряжения, а также «цветовое согласие»; в то время как другие считают, что сопоставления аналогичных цветов вызовут положительный эстетический отклик. Рекомендации по сочетанию цветов (или формулы) предполагают, что цвета рядом друг с другом на модели цветовых колес (аналогичные цвета) имеют тенденцию производить одноцветный или монохроматический цвет, и некоторые теоретики также называют их «простыми гармониями».

Кроме того, разделенные дополнительные цветовые схемы обычно изображают модифицированную дополняющую пару, вместо выбранного «истинного» второго цвета выбирается диапазон аналогичных оттенков вокруг него, т. Е. Разделенные дополнения красного — сине-зеленые и желто-зеленые , Триадическая цветовая схема использует любые три цвета, приблизительно одинаковые на одинаковом расстоянии от модели цветных колес. Фейснер и Махне относятся к числу авторов, которые более подробно излагают принципы сочетания цветов.

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

Уже в древнегреческих философах многие теоретики разработали цветовые ассоциации и связали конкретные коннотативные значения с конкретными цветами. Однако коннотативные цветовые ассоциации и цветовой символизм имеют тенденцию быть связанными с культурой и могут также варьироваться в разных контекстах и ​​обстоятельствах. Например, красный цвет имеет много разных коннотативных и символических значений от возбуждающего, возбуждающего, чувственного, романтического и женского характера; к символу удачи; а также выступает в качестве сигнала опасности. Такие цветовые ассоциации, как правило, изучаются и не обязательно сохраняются независимо от индивидуальных и культурных различий или контекстуальных, временных или перцептивных факторов. Важно отметить, что в то время как цветовая символика и цветовые ассоциации существуют, их существование не обеспечивает доказательной поддержки цветовой психологии или утверждает, что цвет обладает терапевтическими свойствами.

Формулы
Существуют проверенные и правильные формулы для поиска цветовой гармонии. Чтобы использовать эти формулы, все, что необходимо, — это выбрать раздел (или разделы) цветного колеса.

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

Текущее состояние
Теория цвета не разработала явное объяснение того, как специфические среды влияют на внешний вид цвета: цвета всегда были определены в абстрактном виде, и были ли цвета крашеными или красками, маслами или акварелью, прозрачными пленками или отражающими отпечатками, компьютерными дисплеями или кинотеатрами не считаются особо актуальными. Йозеф Альберс исследовал влияние относительного контраста и насыщенности цвета на иллюзию прозрачности, но это исключение из правила.

Поделиться ссылкой:

• Нажмите, чтобы поделиться на Twitter (Открывается в новом окне)
• Нажмите здесь, чтобы поделиться контентом на Facebook. (Открывается в новом окне)
• Нажмите, чтобы поделиться записями на Pinterest (Открывается в новом окне)
• Нажмите, чтобы поделиться записями на Tumblr (Открывается в новом окне)
• Нажмите, чтобы поделиться на LinkedIn (Открывается в новом окне)
• Нажмите, чтобы поделиться в WhatsApp (Открывается в новом окне)
• Нажмите, чтобы поделиться в Skype (Открывается в новом окне)
• Нажмите, чтобы поделиться в Telegram (Открывается в новом окне)
• Нажмите, чтобы поделиться на Reddit (Открывается в новом окне)
• Нажмите, чтобы поделиться записями на Pocket (Открывается в новом окне)

Related

Теория цвета в графическом дизайне

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

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

Что такое графический дизайн?

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

Что такое теория цвета?

Теория цвета — набор правил и рекомендаций, которым мы следуем, чтобы создавать эстетичные, гармоничные, функциональные цветовые палитры. Она охватывает такие понятия, как цветовой круг, цветовые схемы и цветовая гармония.

Что такое цветовой круг?

Это диаграмма, которая отражает взаимосвязи между различными цветами и цветовыми схемами. Существует 3 категории цветов:

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

Цветовые схемы

В зависимости от того, как люди комбинируют цвета, формируются разные цветовые схемы. Давайте рассмотрим некоторые из них.

1. Комплементарная цветовая схема

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

2. Аналоговая цветовая схема

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

3. Триадная цветовая схема

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

Как использовать цветовые схемы в графическом дизайне?

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

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

Черный цвет символизирует элегантность, стабильность. Обычно мы встречаем его в игровой и модной индустрии.

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

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

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

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

Вот несколько ресурсов, которые точно помогут вам выбрать правильные цвета, соответствующие потребностям компании:

Что такое теория цвета? | Фонд интерактивного дизайна (IxDF)

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

С первых дней искусства и дизайна использование цвета следовало многим правилам и руководствам, которые в совокупности известны как теория цвета .

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

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

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

Соотношение между цветами можно показать с помощью цветового круга.

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

Автор/правообладатель: Maximkaaa. Условия авторского права и лицензия: Public Domain

Наиболее полезный и наиболее часто используемый вариант цветового круга показан на изображении выше, включая красный, красно-оранжевый, оранжевый, оранжево-желтый, желтый, желто-зеленый, зеленый, зелено-голубые, синие, сине-фиолетовые, пурпурные и пурпурно-красные сочетания.(Стоун, 2008).

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

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

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

Достижение гармонии цвета

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

Автор/правообладатель: Неизвестен. Условия авторского права и лицензия: Неизвестно

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

Монохроматическая схема

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

С другой стороны, эта схема означает, что вы не можете использовать несколько цветов для визуализации информации в пользовательском интерфейсе (UI). Это единственная цена простоты.

Аналоговая цветовая схема

Аналоговая схема основана на трех цветах, расположенных рядом друг с другом на цветовом круге (напр.г., красный, красно-оранжевый и красно-фиолетовый). Эту схему легко найти в природе — достаточно представить деревья осенью, когда листья меняют цвет.

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

Дополнительные схемы

Дополнительные цветовые схемы используют одну (или более) пару цветов, которые при комбинировании «компенсируют друг друга». Например, когда вы комбинируете два цвета, они дают белый или черный (или что-то очень похожее на оттенки серого). По этой причине эта схема также известна как схема «противоположного цвета».

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

Сплит-комплементарная схема (иногда «Составная гармония») Схема

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

Триадная

Триадная схема основана на использовании трех цветов на равном расстоянии друг от друга на цветовом круге.Самый простой способ найти троичную схему — поставить на колесо равносторонний треугольник так, чтобы каждый угол касался одного цвета. Три цвета будут точно на 120° друг от друга.

Эти схемы считаются яркими (даже если сами оттенки не являются таковыми) – они сохраняют гармонию, но обеспечивают высокий уровень визуального контраста. Вы можете найти триадные схемы во многих произведениях искусства, так как проще добиться приятного визуального результата с триадной схемой, чем с дополнительной схемой.

Tetradic

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

Квадрат (Вариант тетрадика)

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

Цветовая температура

Цвета можно использовать для передачи эмоционального содержания, а также для улучшения внешнего вида вашего веб-сайта. Сейчас мы говорим о том, чтобы двигать людей, пробуждая страсти и чувства у наших пользователей.На этом этапе стоит отметить, что культура людей, пол, опыт и т. д. также будут влиять на то, как цвета резонируют с ними, и что исследования пользователей являются лучшим индикатором эмоциональной реакции на цвет, чем следующие рекомендации, основанные на цветовом круге. Например, знаете ли вы, что в Китае распространен красный цвет, потому что он символизирует счастье и процветание, а белый считается погребальным или символизирующим несчастье? Кроме того, в китайской культуре есть уникальный цвет — цин — своего рода голубовато-зелено-серый или «грю».В Греции желтый цвет передает представление о печали, а красный — в Южной Африке. Цвет — это большая проблема в том, как люди из разных уголков мира будут интерпретировать ваш дизайн. Небольшое исследование имеет большое значение.

Однако, если вы хотите следовать цветовому кругу, есть три индикатора цветовой температуры: «теплый», «холодный» и «нейтральный»:

• Теплые цвета– Это цвета, расположенные на половине цветовой круг, включающий желтый, оранжевый и красный.Говорят, что эти цвета отражают такие чувства, как страсть, сила, счастье и энергия.

• Холодные цвета– Это цвета, расположенные на другой стороне цветового круга, включая зеленый, синий и фиолетовый. Говорят, что холодные цвета отражают спокойствие, медитацию и успокаивающие впечатления.

• Нейтральные цвета – Говорят, что они не отражают какие-то особые эмоции. Эти цвета включают серый, коричневый, белый и черный.

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

На вынос

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

The Цветное колесо является фундаментальным инструментом, созданным SIR ISAAC NEWTON в 1666 году. В нем найдем:

• первичных цвета
• вторичных цвета
0 промежуточные цвета или

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

Раздельно-дополнительная схема (Составная гармония)

Триадная

Тетрадиная 33033

5 Квадратная

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

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

Где узнать больше

Ссылка

Главный образ: Автор/правообладатель: Джордж Филд. Условия авторского права и лицензия: общественное достояние.

Компьютеры для дальтоников

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

Тесты компьютерной точности цветопередачи

1. Тест на чисто белый пиксель

Держите лист чистой белой бумаги перпендикулярно экрану монитора. Не размещайте его вплотную к экрану. Держите его под углом. Цвет фона этой веб-страницы — чисто белый.Если вы видите очень бледный сероватый или голубоватый цвет, ваш компьютер неточно воспринимает цвета. Если у вас нет чисто белого цвета, это повлияет на все цвета. У вас «синдром солнечных очков».

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

2. Тест на гамму

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

 

Источник и дополнительная информация: Berger/Gamma
 

У ПК

гамма около 2,5. Некоторые ПК не обеспечивают достаточную гамма-коррекцию.Видеокарты обычно выполняют некоторую гамма-коррекцию. Дополнительные сведения о гамме Windows/ПК см. в разделе Советы по цвету компьютера

. Компьютеры Macintosh

скорректировали гамму — либо от встроенной видеокарты, либо от аппаратного обеспечения (ранее это было в компьютерах Silicon Graphics и NeXTStep). Несмотря на это, если ваш дисплей (монитор) устарел, ваша гамма может ухудшиться.

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

 

3. Тест на хорошую гамму светлоты и темноты цветов
 

Что ты видишь?

Некоторые квадраты выглядят одинаково? Если да, то какие? Каждый квадрат выглядит по-разному? Какие из них выглядят самыми разными? Вы замечаете что-нибудь еще?

Об этом рисунке:
Мы создали серию оттенков серого (известную как ОТТЕНКИ СЕРОГО), используя точное процентное соотношение черного и яркости в Photoshop.Каждый квадрат представляет десятипроцентное изменение. Несмотря на то, что изображение в оттенках серого является черно-белым, оно представляет собой диапазон любого заданного цвета, который вы можете увидеть на своем мониторе. Если вы не видите широкий спектр серых тонов, вы не сможете увидеть широкий спектр различных красных, синих или любых других цветов. Например, зеленый цвет существует во многих вариациях. Некоторые зеленые цвета темные, некоторые средние, некоторые светлые. Есть очень темно-зеленый, который вы видите в листьях в тени, вариации средней зелени, которые вы видите в кожуре арбуза, и более светлый зеленый цвет мятного мороженого.Ваш компьютер должен увидеть все эти варианты любого заданного цвета.

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

Эта процентная шкала представляет собой изображение в формате gif

Для сравнения мы также создали его в формате jpeg (ниже)

Если какой-либо из оттенков серого выглядит одинаково, ваша гамма нуждается в коррекции.

На что обратить внимание:

Человеческому глазу необходимы контрасты для видимости и широкий диапазон оттенков цвета, чтобы поддерживать зрительный интерес и передавать точную информацию.Если проблема в видимости, ответ — в контрасте. Недавнее законодательство в Соединенных Штатах (Закон об американцах с ограниченными возможностями) требует высокой контрастности между светлыми и темными цветами на всех вывесках, чтобы инвалиды по зрению могли видеть эту информацию. Все компьютеры могут обеспечивать высокую контрастность между светом и тенью.

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

4. Цветовой тест

Эти квадраты основаны на 216 веб-безопасной цветовой палитре (которая включает в себя все цвета, общие для всех компьютеров и браузеров).

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

Вот еще один пример. Это точная копия с формулами RGB (красный, зеленый, синий) 6 из 216 цветов, которые являются общими для всех компьютеров. Мы разместили черную полоску в основании цветов, чтобы вы могли сравнить каждый из них с чистым черным.

Примечание. Эти цвета являются «веб-безопасными» цветами (216 цветов, которые являются общими для всех компьютеров).Если ваша гамма достаточно скорректирована, единственное, что должно быть трудно различить, — это последнее в крайнем правом углу. Это темно-синий цвет, но его все же можно отличить от чистой черной полосы.

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

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

---

Как улучшить цветопередачу на компьютере

 

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

1. Отрегулируйте яркость и интенсивность на мониторе.
    
2. Настройте панели управления на максимально возможное количество цветов. (Ваша система или видеокарта могут быть настроены по умолчанию на 16 или 256 цветов, и у вас может быть гораздо больше доступных цветов.)

   Для тех, у кого есть хорошие видеокарты (поддерживающие 16 или 24 бита), убедитесь, что они установлены на максимум. количество цветов для точности цветопередачи.
    

3. Хороший дисплей может улучшить цвета. Цвет станет ярче, и вы уменьшите эффект «солнцезащитных очков», характерный для ПК.
    
4. Избегайте экранов с антибликовым покрытием и компенсируйте блики другими способами.
    
5. Получите компьютер со встроенной гамма-коррекцией и встроенной совместимостью между всеми элементами.
    
6. Приобретайте не только лучшие компоненты, но и компоненты, которые работают вместе и дают наиболее точный результат. Если вы рассматриваете графическую карту или видеокарту, убедитесь, что она будет работать с вашей системой и вашим монитором. Некоторые карты могут работать только для игр.

  Дополнительную информацию см. в разделе Будущее цвета во всемирной паутине.

Ссылки на другие статьи о компьютерных цветах находятся в меню вверху слева на этой странице.

---

Теория цвета для дизайнеров: руководство для начинающих

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

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

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

Цветовой круг: мощный инструмент для визуализации отношений между цветами

Цветовые схемы: как использовать цветовой круг для выбора цветовых схем

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

Почему вы должны интересоваться теорией цвета

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

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

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

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

Словарь цветов

Прежде чем мы углубимся в теорию, вам нужно знать следующие термины:

Основные цвета

Три основных цвета — пурпурный, голубой и желтый — используются для создания других цветов.

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

Традиционно мы считали красный, синий и желтый основными цветами, но исследования показали, что пурпурный, голубой и желтый лучше описывают наше восприятие цвета. Если эти цвета вызвали воспоминания об ошибках принтера, вызванных отсутствием пурпурных чернил, вы не одиноки. Цветовая модель CMYK — голубой, пурпурный, желтый, ключевой (черный) — представляет собой субтрактивную цветовую модель, основанную на том, что используется в цветной печати. Он субтрактивный, потому что вычитает красный, зеленый и синий оттенки из белого света.

RGB и шестнадцатеричный

Красный, зеленый и синий используются для создания других цветов.

В Интернете мы используем RGB (красный-зеленый-синий) и шестнадцатеричные значения для представления цветов. RGB — это аддитивная цветовая модель — цвета создаются путем добавления цветного света к черному.

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

• rgb(59, 89, 145) равно синему Facebook
• rgb(0, 0, 0) равно черному
• rgb(255, 255, 255) равно белому

Каждое значение преобразуется в шестнадцатеричной системе цветов. в шестнадцатеричное (с основанием 16) представление, например:

• #3b599b соответствует синему Facebook
• #000000 соответствует черному
• #ffffff соответствует белому

Каждые два символа представляют значение цвета, поэтому для Facebook синий красный оттенок — 3b, зеленый — 59, а 9b — синий.

Горячие и холодные

Холодные и теплые цвета

Цвета также обладают «теплотой», и каждый из них может быть классифицирован как теплый или холодный.

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

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

Цветовая температура

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

Оттенки и оттенки

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

Например, если ваш базовый цвет #8dbdd8 (светло-синий), как показано на изображении ниже, вы можете создать монохромную схему, выбрав два оттенка (два более ярких синих) и два оттенка (два более темных синих).

Монохромная цветовая схема на основе #8dbdd8, созданная с использованием COLOURCODE .

Насыщенность, оттенок и яркость

Насыщенность описывает интенсивность цвета. Увеличение насыщенности делает цвет богаче и темнее, а уменьшение насыщенности делает его блеклым и светлым. Когда мы говорим «светло-синий» или «темно-зеленый», мы описываем изменения насыщенности.

Оттенок определяет степень, в которой цвет может быть описан как похожий или отличный от красного, оранжевого, желтого, зеленого, синего, индиго и фиолетового (цвета радуги). Поэтому, когда вы описываете цвет как «сине-зеленый», вы определяете его с точки зрения двух оттенков.

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

Цветовая схема HSL. Адаптировано из « Munsell-system ». Под лицензией CC BY-SA 3.0 через Commons.

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

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

Базовый цветовой круг содержит 12 стандартных цветов, используемых для создания цветовых схем. Каждый кусочек пирога представляет семейство цветов, которые могут быть получены с различной насыщенностью, оттенками, оттенками, оттенками и смесями соседних цветов.Цветовые комбинации (например, желто-оранжевый, красно-оранжевый) получаются в результате смешивания равных количеств основных оттенков (желтого и оранжевого или красного и оранжевого).

Красный, желтый и синий являются основными цветами. Фиолетовый, оранжевый и зеленый являются вторичными цветами. Все остальное — третичный цвет — смесь первичных и вторичных цветов.

Дизайны используют цветовой круг для выбора одного из пяти типов цветовых схем.

5 типов цветовых схем

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

1. Монохромный 

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

Монохромная цветовая схема на основе фиолетового.

2. Дополнительные

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

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

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

Дополнительные цвета мятно-зеленый и красно-фиолетовый.

3. Аналоговые 

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

Аналогичная цветовая гамма на основе красного, оранжевого и желтого цветов.

4. Триадный

Чтобы создать триадную цветовую схему, нарисуйте равносторонний треугольник (треугольник, все три стороны которого имеют одинаковую длину) на цветовом круге и выберите три цвета в точках треугольника. Эта триада создает разнообразную, но сбалансированную схему.

Триадная цветовая схема, основанная на фиолетовом, бежевом и зеленом цветах.

5. Тетрадик

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

Тетрадическая цветовая схема, включая средний синий, красно-фиолетовый, весенне-зеленый и желто-зеленый.

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

Используйте теорию цвета в своих проектах

Цвет — это мощный инструмент для пробуждения эмоций и создания индивидуальности бренда. Подумайте о брендах, которые вы могли бы узнать только по цвету — красная Coca-Cola или зеленая Starbucks. Цвет может быть настолько тесно связан с идентичностью бренда, что становится законным товарным знаком — как в случае с пурпурным цветом T-Mobile.

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

Что такое теория цвета? Значение и основы

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

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

Что такое теория цвета?

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

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

Ограничение общего количества цветов

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

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

Пример цветовой схемы, созданной только с одним красным цветом.Изображение предоставлено Adobe.

Используйте цветовой круг для выбора цветов

Следующий шаг — понять, как выбирать фактические цвета. Дизайнеры обычно полагаются на цветовой круг, чтобы решить эту проблему. Цветовой круг включает первичные цвета (красный, желтый, синий), вторичные цвета (смесь первичных цветов: оранжевый, зеленый и фиолетовый) и третичные цвета (цвета, полученные путем смешивания равных частей одного основного цвета и одного вторичного цвета; цитрон, красновато-коричневый, желтовато-коричневый).

Цветовой круг с 12 спицами. Кредит изображения Сакурамбо.Первичные, вторичные, третичные и четвертичные цвета. Кредит изображения KetanNaik.

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

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

Пример монохромной цветовой схемы. Изображение предоставлено Adobe.

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

Пример аналогичной схемы, созданной из трех цветов, близких друг к другу на цветовом круге. Изображение предоставлено Adobe.

• Дополнительный. В своей основной форме дополнительные схемы состоят только из двух контрастных цветов (например, доминирующий зеленый цвет и акцентный красный цвет).Эта схема хорошо работает, если вы хотите привлечь к себе внимание.

Пример дополнительной цветовой схемы. Изображение предоставлено Adobe.

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

Пример создания монохромной схемы с помощью Adobe Color. Изображение предоставлено Adobe Color.

Понимание психологии цвета

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

Хотя общепризнанных значений нет, вот некоторые общие чувства, которые цвета вызывают у большинства людей:

• Красный : опасность, важность, любовь.Красный известен как цвет энергии — простой взгляд на него может увеличить пульс, частоту сердечных сокращений и обмен веществ. Это отличный цвет для привлечения внимания посетителя; попробуйте использовать его, чтобы выделить наиболее важные элементы на вашей странице.
• Оранжевый : энергия, оптимизм, веселье. Оранжевый обладает положительной энергетической атмосферой. Он также ассоциируется с недорогими продуктами, что делает его хорошим цветом для интернет-магазинов, если вы хотите выделить лучшую цену.
• Желтый : счастье, внимание, тепло.Желтый означает солнечный нрав; в сочетании с черным он быстро привлечет внимание. (Вспомните, например, желтые такси в Нью-Йорке.)
• Зеленый : рост, успех, природа. Зеленый отлично подходит для продуктов, близких к природе. Это также популярный цвет для использования в пользовательских интерфейсах, который дает пользователям сигнал об успешном завершении операции.
• Синий : доверие, комфорт, спокойствие. Синий олицетворяет расслабление и комфорт. Бренды любят этот цвет, потому что он создает у клиентов впечатление внутренней безопасности.
• Фиолетовый : роскошь, творчество, мудрость. Фиолетовый обычно ассоциируется с королевской семьей, а также с предметами роскоши.
• Черный : сила, изысканность, тайна. Большинство брендов ограничивают черный текст текстом и акцентами. В качестве основного цвета черный может быть заметен на модных сайтах, чтобы передать ощущение роскоши.
• Белый: чистота, здоровье, невинность. Белый обычно заставляет нас думать о здоровье и чистоте. Дизайнеры обычно выбирают этот цвет, чтобы показать безопасность продукта, особенно для медицинского оборудования и высокотехнологичных продуктов.

Пол и цвет кожи

Влияет ли пол на цветовые предпочтения? В одном исследовании исследователь Джо Хэллок действительно обнаружил некоторые большие различия.

Результаты исследования наиболее и наименее любимых цветов мужчин и женщин. Кредит изображения Smart Insights.

Ниже приводится краткое изложение результатов исследования:

• Синий — самый популярный цвет как у мужчин, так и у женщин.
• Несмотря на распространенное мнение, розовый цвет не является любимым цветом женщин.
• Оранжевый, коричневый и желтый — самые непопулярные цвета как у мужчин, так и у женщин.
• Мужчины обычно предпочитают яркие контрастные цвета, а женщины предпочитают более мягкие цвета.

Возраст и цвет кожи

Возраст также играет роль в цветовых предпочтениях. Фабер Биррен, автор книги «Психология цвета и цветовая терапия», обнаружил, что молодые люди склонны отдавать предпочтение цветам с большей длиной волны (например, красному и оранжевому), в то время как пожилым людям нравятся цвета с более короткой длиной волны (например, синий). То же исследование Джо Хэллока, посвященное гендерным и цветовым предпочтениям, подтвердило выводы Биррена, но также показало, что многие возрастные группы предпочитают фиолетовый цвет.

График любимых цветов по возрастным группам; исследования показывают, что молодые люди предпочитают цвета с большей длиной волны (например, красный и оранжевый), а пожилые люди предпочитают цвета с более короткой длиной волны (например, синий). Изображение предоставлено Джо Хэллоком.

Практические советы по использованию цвета

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

Используйте доски настроения, чтобы найти правильные цвета

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

Создание фокусных точек с помощью цвета

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

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

Решите, когда и как использовать яркие и мягкие цвета

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

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

Яркая домашняя страница, окрашенная в розовый и синий цвета, создает энергичную атмосферу. Изображение предоставлено Vredestein New Horizons.

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

Страницы коллекции товаров, выполненные в мягких пастельных и естественных тонах. Кредит изображения Коллагери.

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

Не забывайте о доступности

Дизайн — это не только эстетика; это также касается функциональности и удобства использования. При разработке пользовательского интерфейса он должен быть доступен для людей с различными способностями. Одной из особых проблем, с которой сталкиваются дизайнеры при работе с цветами, является рассмотрение того, как люди с дальтонизмом или дефицитом цветового зрения (ССЗ) будут взаимодействовать с продуктом.

Эти цветовые круги показывают, как выглядит цвет для людей с нормальным зрением (крайний слева), и те же цвета, которые видят люди с нарушением красно-зеленого цвета (в центре и справа).Изображение адаптировано из Сакурамбо.

При проектировании с использованием цвета следует помнить две вещи:

• Никогда не используйте только цвет для передачи смысла. Используйте несколько визуальных подсказок, чтобы сообщать об основных состояниях вашего продукта. Например, когда вы показываете сообщение об ошибке, не используйте красный цвет рядом с текстом «Обязательные поля выделены красным». Вместо этого добавьте видимый знак (например, звездочку) и скажите: «Обязательные поля выделены красным и отмечены звездочкой».

Некоторые слабовидящие пользователи не видят красные или зеленые символы, поэтому не используйте только эти цвета для передачи информации.Кредит изображения WebAIM.

• Избегайте низкоконтрастного текста. Размещение двух цветов с низкой контрастностью рядом друг с другом может сделать ваш текст очень трудным для чтения. Руководство по доступности веб-контента (WCAG) рекомендует, чтобы коэффициент контрастности фона и текста составлял не менее 4,5:1. Имейте это в виду, когда вы разрабатываете текст, а также функциональные элементы, такие как кнопки.

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

Что касается специальных возможностей, мы рекомендуем использовать Color Contrast Checker и симулятор зрения NoCoffee для Chrome. Первый инструмент поможет вам проверить ваши цветовые комбинации в соответствии с рекомендациями WCAG, а второй инструмент позволит вам испытать дальтонизм во время проектирования.

Использование такого инструмента, как NoCoffee, показывает, как пользователи с протанопией — те, кто не может различать красный и зеленый цвета — видят разные веб-сайты. Изображение адаптировано из CNN.

Заключение

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

Теория цвета: наука и искусство использования цвета

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

 

Выбор цвета некоторыми брендами настолько удачен, что они запатентовали точный оттенок. Tiffany & Co — знаменитая нью-йоркская ювелирная компания, известная не только своим потрясающим выбором украшений, но и своим культовым брендом цвета яйца малиновки. Торговая марка Tiffany Blue была зарегистрирована в 1998 году и также является цветом Pantone.

 

Barbie Pink, Cadbury Purple, T-Mobile Magenta и UPS Brown — все эти цвета являются зарегистрированными товарными знаками, которые отлично зарекомендовали себя в своих брендах.

 

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

 

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

Если вы новый напиток для здоровья, то, скорее всего, вы не будете использовать черный в качестве основного цвета, потому что непосредственные ассоциации, которые люди автоматически связывают, будут далекими. О том, что есть место для творческой вольности. Иногда немного шокирующей ценности творит чудеса! Но всегда убедитесь, что вы понимаете, что вы делаете и почему.

 

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

Значение цвета — Smashing Magazine

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

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

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

Еще после прыжка! Продолжить чтение ниже ↓

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

Теплые цвета

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

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

Красный (основной цвет)

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

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

За пределами западного мира у красного цвета другие ассоциации. Например, в Китае красный цвет — цвет процветания и счастья. Его также можно использовать для привлечения удачи. В других восточных культурах невесты надевают красный цвет в дни свадьбы. Однако в Южной Африке красный — цвет траура. Красный также ассоциируется с коммунизмом.

Красный стал цветом, связанным с осведомленностью о СПИДе в Африке из-за популярности кампании [RED].

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

Примеры

Ярко-красный цвет иллюстрации на главной странице сайта Nacache Design придает странице массу энергии и яркости.Яркий розовато-красный цвет фона на веб-сайте Ming Lab является привлекательным и страстным. Приглушенный красный цвет на веб-сайте Startup Lab энергичен, но не агрессивен. Веб-сайт Bigsound Buzz использует монохромный дизайн с различными оттенками и тонами красного, что в данном мак, ретро-атмосфера. На веб-сайте Build in Amsterdam используется яркий красный акцентный цвет, который сразу привлекает внимание к середине страницы.

Оранжевый (дополнительный цвет)

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

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

Примеры

Яркая и смелая домашняя страница Bitter Renter в полной мере использует энергию, которую оранжевый цвет может придать дизайну. Темно-оранжевый крупный шрифт We Are Not Sisters сразу же производит впечатление. Тонкое использование оранжевого цвета в Milk Street Кристофера Кимбалла в качестве акцентного цвета показывает это. может использоваться в более элегантных и консервативных дизайнах. Sbjct смешивает тонкий персиковый цвет с темно-оранжевым для более монохроматического дизайна, который по-прежнему несет в себе много энергии. Робин Де Ниро также использует очень светлый персиковый фон с двумя оттенками оранжевого для типографика в гораздо более сдержанном дизайне.

Желтый (основной цвет)

Желтый часто считается самым ярким и энергичным из теплых цветов. Он ассоциируется со счастьем и солнечным светом. Однако желтый также может ассоциироваться с обманом и трусостью (назвать кого-то желтым — значит назвать его трусом).

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

В некоторых странах желтый цвет имеет совсем другое значение. В Египте, например, желтый цвет означает траур. В Японии он олицетворяет мужество, а в Индии это цвет торговцев.

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

Примеры

Не совсем настоящий желтый цвет чайника живой и яркий, но не перегруженный. В Deskpass используется немного более темный желтый цвет, что придает ему привлекательный, но слегка приглушенный вид. В Toyfight используется яркий золотарник, но в остальном дизайн остается простым и понятным. Веб-сайт Milano Contract District простой и минималистичный, и весь эффект дизайна исходит от ярко-желтого фона. Susa Ventures использует оттенок золотарника в качестве акцентного цвета в своей типографике, что дает отличный эффект.

Прохладные цвета

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

Синий — единственный основной цвет в холодном спектре, а это означает, что другие цвета создаются путем сочетания синего с теплым цветом (желтый для зеленого и красный для фиолетового).

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

Зеленый (дополнительный цвет)

Зеленый — очень приземленный цвет. Он может представлять новые начинания и рост. Это также означает обновление и изобилие. В качестве альтернативы, зеленый может также представлять зависть или ревность, а также недостаток опыта.

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

Подходит для дизайна, связанного с богатством, стабильностью, обновлением и природой. Ярко-зеленые более энергичны и ярки, в то время как оливково-зеленые более характерны для мира природы. Темно-зеленые — самые стабильные и олицетворяют достаток.

Примеры

На сайте «Память — наша родина» используется сине-зеленый оттенок, усиленный желтой типографикой, но не слишком яркий. На сайте «Ритм еды» используется ярко-зеленый цвет, который идеально подходит для сайта, объединяющего еду и информацию.Насыщенный охотничий зеленый цвет служит отличным акцентом на веб-сайте элегантного ресторана, такого как Le Farfalle Osteria. У веб-сайта Анны Розы Крау мягкий шалфейно-зеленый фон, который работает почти как нейтральный для этого портфолио. Ярко-зеленый фон HelloMind выглядит молодежно и создает ощущение роста (в соответствии с их продуктом для улучшения работы вашего мозга). Лаймово-зеленые акценты Studio Farquhar резкие и современные и выделяются своим минималистским макетом.

Синий (основной цвет)

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

Значение синего сильно зависит от точного оттенка и оттенка. В дизайне точный оттенок синего, который вы выберете, окажет огромное влияние на восприятие вашего дизайна.Светло-голубой часто расслабляет и успокаивает. Яркий синий может заряжать энергией и освежать. Темно-синий, как и темно-синий, отлично подходит для корпоративных сайтов или дизайнов, где важны прочность и надежность.

Примеры

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

Фиолетовый (дополнительный цвет)

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

Фиолетовый — это сочетание красного и синего цветов, обладающее некоторыми свойствами обоих. Это также связано с творчеством и воображением.

В Таиланде фиолетовый цвет — это траур по вдовам.Темно-пурпурный традиционно ассоциируется с богатством и королевской властью, а более светлый пурпурный (например, лавандовый) считается более романтичным.

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

Примеры

Первый проект в портфолио Филиппо Белло использует фиолетовую цветовую схему, которая усиливает чувство творчества. На сайте документального фильма «Единый общий дом» используются яркие оттенки фиолетового и ярко-розовые акценты, чтобы дать ощущение энергии, творчества и воображения.В стеке контента красновато-фиолетовый отлично работает в качестве акцентного цвета на нейтральном фоне и привлекает внимание к важным элементам страницы, таким как кнопки. Темно-фиолетовые оттенки веб-сайта Orbit создают ощущение изысканности, соответствующей их ИИ. творческое начинание, такое как KIKK Festival 2016.

Нейтральные

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

Черный

Черный — самый сильный из нейтральных цветов. С положительной стороны, это обычно ассоциируется с силой, элегантностью и формальностью. С отрицательной стороны это может быть связано со злом, смертью и тайной. Черный — традиционный цвет траура во многих западных странах. Это также связано с восстанием в некоторых культурах, а также связано с Хэллоуином и оккультизмом.

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

Примеры

Блеклый черный (технически темно-серый, но достаточно близкий к черному, чтобы его можно было классифицировать как таковой) веб-сайта DUA прекрасно работает в таком минималистичном дизайне.Черный фон Anonymous Hamburger Society — идеальное полотно для удивительных фотографий еды на сайте. Многие изображения в портфолио Тимоти Сакченти выполнены в черном цвете, который также является цветом прозрачного меню, что придает всему сайту резкий, современный вид. Минималистичный дизайн с черным цветом, используемым в качестве акцента, придает сайту Heco суперсовременный вид. Черный оттенок, использованный здесь вместе с анимацией, придает сайту резкий, почти жуткий вид.

Белый

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

Однако на большей части Востока белый цвет ассоциируется со смертью и трауром. В Индии это традиционно единственный цвет, который разрешено носить вдовам.

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

Примеры

Black & Wood использует белый цвет как в качестве фона, так и в качестве акцента (например, в типографике), что придает сайту очень чистый вид. В основном белый фон веб-сайта Нуно Коэльо Сантоса способствует современной эстетике. На веб-сайте Skylark используется белая типографика. чтобы придать сайту ощущение чистоты, не переходя к минималистскому дизайну.Spent использует белую типографику, чтобы придать сайту современный, но мягкий вид. Dwell использует белый цвет в качестве акцента на своей странице-заставке, очень уникальный, но эффективный выбор для чего-то, что включает CTA.

Серый

Серый — нейтральный цвет, который обычно считается холодным концом цветового спектра. Иногда его можно считать капризным или депрессивным. Вместо белого в некоторых дизайнах можно использовать светло-серый цвет, а вместо черного — темно-серый.

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

Примеры

Веб-сайт Round очень современный, с различными оттенками серого, используемыми для разграничения различных разделов сайта. Серый фон на веб-сайте For Office Use Only настолько тонкий, что кажется почти белым, и придает сайту очень современный вид.Серый цвет на веб-сайте Shinola выглядит утонченно, но приземленно. В сочетании с современной типографикой серый приобретает современный вид. Серый — идеальный фоновый цвет для портфолио иллюстраций.

Коричневый

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

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

Примеры

Trefecta использует теплый коричневый цвет в качестве акцентного цвета для кнопок и CTA, что является неожиданным выбором, учитывая современность остального дизайна. фон для дизайнерских работ в виде оттенков серого.Off & On Barber Shop использует различные коричневые элементы для большей части своего сайта, что придает ему старомодный вид. На веб-сайте Umbert Cessari используются различные оттенки коричневого цвета для акцентных цветов, что придает ему землистую привлекательность. На веб-сайте Green Rebel коричневый цвет используется во многих их типографики и графики повсюду, а также в некоторых текстурах, придающих ощущение органичности.

Бежево-коричневый

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

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

Примеры

На веб-сайте People Map используется более золотистый оттенок загара, что придает сайту высококлассный вид, особенно в сочетании с типографикой сайта.Теплый желтовато-коричневый фон сайта Plane выглядит современно, но не минималистично. На веб-сайте La Pierre Qui Tourne используются различные оттенки желто-коричневого цвета в качестве основной цветовой палитры, а также несколько очень ярких цветов для очень забавного дизайна. Сайт Mile Inn сочетает в себе современную типографику с бежево-черная цветовая палитра для сайта, который выглядит ретро и стильно. Коричневый акцент, использованный на этом сайте, совершенно неожиданный и придает ему современный вид середины века.

Кремовый и цвет слоновой кости

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

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

Примеры

Едва заметный фон цвета слоновой кости на сайте-портфолио Стефани Брюклер — долгожданная смена темпа по сравнению с типичным нейтральным серым, придающая сайту неподвластный времени вид.Насыщенный кремовый кажется очень современным и даже резким цветовым акцентом при использовании с черным фоном. Кремовый — неожиданный выбор цвета фона для веб-сайта, ориентированного на тех, кто работает в сфере высоких технологий, но придает ему теплый, человеческий оттенок. film The Lobster, их использование бледно-белого фона для веб-сайта — неожиданно приглушенный выбор, который кажется очень современным. Насыщенный кремовый фон Sweet Magnolia Gelato — идеальный нейтральный фон для теплого и привлекательного дизайна.

Коротко…

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

.

• Красный: Страсть, Любовь, Гнев
• Оранжевый: Энергия, Счастье, Жизнеспособность
• Желтый: Счастье, Надежда, Обман
• Зеленый: Новые Начинания, Изобилие, Природа
• Синий: Спокойствие, Ответственность, Печаль
• Фиолетовый: Творчество, Роялти, Богатство
• Черный: Тайна, Элегантность, Зло
• Серый: Угрюмый, Консервативный, Формальный
• Белый: Чистота, Чистота, Добродетель
• Коричневый: Природа, Полезность, Надежность
• Желто-коричневый или бежевый: Консервативный, Благочестивый, Тусклый
• Кремовый или цвет слоновой кости: Спокойствие, элегантность, чистота

Дополнительные ресурсы

Вся серия

Полное руководство по базовой теории цвета для всех художников

Фото: КРЯЧКО ОЛЕКСИЙ через Shutterstock
Этот пост может содержать партнерские ссылки.Если вы совершите покупку, My Modern Met может получить партнерскую комиссию. Пожалуйста, прочитайте наше раскрытие для получения дополнительной информации.

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

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

История теории цвета

Цветовой круг Иоганна Вольфганга фон Гёте, 1809 г. (Фото: [общественное достояние], через Wikimedia Commons

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

Первоначальные исследования цвета проводились с научной точки зрения. Исаак Ньютон в своей книге 1704 года Оптика совершил прорыв в доказательстве того, что свет состоит из разных цветов. Спорные в то время — поскольку считалось, что чистый свет бесцветен — его эксперименты стали важными ступеньками для теории цвета.Он даже организовал раннее цветовое колесо, основанное на цветовых комбинациях, которые он видел при преломлении света через призму.

Более поздние публикации, Теория цветов немецкого поэта Иоганна Вольфганга фон Гёте и Закон одновременного цветового контраста французского химика Мишеля Эжена Шевреля считаются основополагающими документами теории цвета. Опубликованные в начале 19 века, они посвящены психологии цвета и хроматической аберрации, а также дополнительно усовершенствовали цветовой круг.

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

Номенклатура цветов Вернера, 1821 г. (Фото: Исследовательский институт Гетти из Интернет-архива)

В XIX веке появилось множество книг по теории цвета и ее применению в изобразительном искусстве.Авторы часто обращались к природе за оттенками и тонами, составляющими цветовой круг, и их публикации до сих пор пользуются спросом. Например, Номенклатура цветов Вернера , которая также доступна в Интернете, использовалась Чарльзом Дарвином в качестве научного инструмента. Впервые опубликованный в 1814 году, каждый цвет получил поэтическое название, например «бархатно-черный», и в нем было указано, где этот цвет встречается в природе.

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

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

Основные цвета

Три основные цветовые схемы. Фото: Александру-Раду Борзеа через Shutterstock

Основные цвета — это оттенки, которые можно смешивать для получения широкой цветовой гаммы.Как мы уже узнали, существуют разные наборы основных цветов в зависимости от того, какую модель смешивания вы используете. Большинство из нас знакомы с красными, желтыми и синими (RYB) основными цветами, которым обучают детей, когда они приобретают базовые художественные навыки. Это все еще основные цвета, которые сегодня используют большинство живописцев, художников и дизайнеров интерьеров. Модель RYB является примером субтрактивной цветовой модели . Субтрактивное смешивание — это когда чернила, красители или пигменты образуют новые цвета, поглощая некоторые части видимого спектра.

Голубой, пурпурный и желтый (CMY) также являются субтрактивными основными цветами. Обычно используемые в цветной печати, традиционные красный и синий цвета со временем были заменены пурпурным и голубым по мере развития технологий, и эти пигменты позволили использовать более широкий диапазон цветов. CMYK — это также название самого процесса печати, где K означает «ключевые чернила». Как правило, это черный цвет, который помогает выделить художественные детали, поскольку черный, полученный путем смешивания трех основных цветов, более серый.

Последней используемой моделью является система красного, зеленого и синего цветов (RGB)  .RGB — это аддитивная цветовая модель , которая начинается с темноты и использует различные цвета света, смешанные вместе, чтобы получить белый цвет. Чаще всего мы видим эту модель на экранах компьютеров и телевизоров. Фотографы также хорошо знакомы с работой с цветовым профилем RGB при редактировании изображений для использования в Интернете и переключении на цветовой профиль CMYK при печати.

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

Теория цветов: Теория цвета — все самое интересное на ПостНауке