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

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

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

Основы сочетания цветов

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

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

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

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

Как работает цветовое колесо?

Простое цветовое колесо состоит из 12 цветовых оттенков, расположенных вокруг центральной ступицы.

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

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

Основные цвета, выделенные на цветовом круге

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

• Красный + синий = фиолетовый.
• Синий + желтый = зеленый.
• Красный + желтый = оранжевый.

Вторичные цвета, выделенные на цветовом круге

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

• Красный + Оранжевый = Красно-оранжевый.
• Желтый + Оранжевый = Желто-оранжевый.
• Желтый + зеленый = желто-зеленый.
• Синий + зеленый = сине-зеленый.
• Синий + фиолетовый = сине-фиолетовый.
• Красный + фиолетовый = красно-фиолетовый.

Третичные цвета, выделенные на цветовом круге

Цветовая терминология

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

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

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

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

«Цвет – это сила, непосредственно влияющая на душу». ~ Василий Кандинский

Ниже приводится краткое изложение различных оттенков и чувств, которые они часто вызывают:

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

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

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

Теперь, когда у нас есть понимание цвета применительно к искусству и дизайну, давайте перейдем к интересным вещам …

Цветовые комбинации

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

Монохромные комбинации

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

Дополнительные комбинации

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

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

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

Примеры дополнительных цветовых сочетаний:

• Красный и зеленый.
• Синий и оранжевый.
• Желтый и фиолетовый.
• Желто-зеленый и красно-фиолетовый.
• Красно-оранжевый и сине-зеленый.

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

Аналогичные комбинации

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

Примеры аналогичных комбинаций:

• Фиолетовый, синий и бирюзовый.
• Красный, фуксия и фиолетовый.
• Красный, оранжевый и желтый.
• Зеленый, синий и фиолетовый.

Разделение дополнительных комбинаций

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

Примеры разделенных дополнительных цветовых схем:

• Красный, сине-зеленый и желто-зеленый.
• Синий, красно-оранжевый и желто-оранжевый.
• Желтый, сине-фиолетовый и красно-фиолетовый.
• Фиолетовый, желто-оранжевый и желто-зеленый.

Триадные комбинации

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

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

Примеры триадных сочетаний:

• Красный, желтый и синий.
• Фиолетовый, зеленый и оранжевый.
• Сине-фиолетовый, красно-оранжевый и желто-зеленый.

Tetradic Combinations

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

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

Примеры тетрадных цветовых схем:

• Красный, зеленый, сине-фиолетовый и желто-оранжевый.
• Желтый, фиолетовый, сине-зеленый и красно-оранжевый.

Экспериментирование – ключ к успеху

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

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

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

Наши любимые комбинации

Монохромный

Искусство Кимберли Рашель. Цветовые палитры от Canva.

Дополнительный

Искусство Кимберли Рашель. Цветовые палитры от Canva.

Аналогичный

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

Расколоть

Искусство Кимберли Рашель. Цветовые палитры от Canva.

Триадический

Искусство Кимберли Рашель. Цветовые палитры от Canva.

Tetradic

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

Хотите узнать больше?

• Как использовать Photoshop: уроки Photoshop для начинающих
• Топ-20 производителей логотипов в Интернете: создайте свой собственный логотип
• 17 простых приемов дизайна магазина электронной коммерции для взлетающих продаж
• 40 удивительных примеров дизайна веб-сайтов электронной коммерции

Есть какие-нибудь красочные советы или собственные хитрости? Нам бы очень хотелось их услышать. Дайте нам знать об этом в комментариях!