Цветовой круг — основное руководство по дизайну для недизайнеров

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

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

Итак, что такое цветовой круг?

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

Буквальное определение цветового круга

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

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

Базовый цветовой круг содержит 12 оттенков (чистых цветов), состоящих из:

• 3 основных цвета (исходные цвета, которые нельзя получить, комбинируя другие цвета)
• 3 вторичных цвета (получаются путем объединения 2 основных цветов)
• 6 третичных цветов (полученных путем комбинирования основного и вторичного цветов)

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

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

Цветовой круг и дизайн бренда

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

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

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

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

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

7 цветовых схем, о которых вы должны знать

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

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

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

• Оттенок — сплошной цвет
• Оттенок = оттенок + белый
• Тень = оттенок + черный
• Тон = Тон + Серый

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

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

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

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

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

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

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

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

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

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

3. Дополнительная цветовая схема

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

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

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

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

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

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

4. Разделить комплементарную цветовую схему

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

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

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

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

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

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

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

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

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

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

6. Цветовая схема тетрадного прямоугольника

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

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

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

7. Квадратная цветовая схема

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

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

Положите конец путанице с цветовой схемой вместе с Kimp

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

Зарегистрируйтесь сейчас для бесплатной 7-дневной пробной версии.