17 янв 2022
0

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

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

Изображение: vlada_maestro / Shutterstock

Дарья Тамилина

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

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

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

Разберёмся, как устроен круг Иттена и как применять его на практике.

Как устроен круг Иттена

Круг Иттена состоит из 12 цветов, которые делятся на три группы: первичные, вторичные и третичные. Разница между ними — в том, как они образуются при смешивании. Разберём каждую группу.

Первичные цвета — синий, жёлтый и красный. Они находятся в центре круга и считаются основными: на их основе строятся остальные цвета схемы.

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

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

В результате во внешнем круге есть 12 цветов: три первичных, три вторичных и шесть третичных.

Круг Иттена основан на традиционной художественной модели цвета RYB (от английских red, yellow, blue — красный, жёлтый, синий). Он помогает понять отношения между цветами и подобрать их сочетания. При этом для работы с цветом на экранах используют модель RGB, а для полноцветной печати обычно применяют CMYK. Поэтому конкретные оттенки нужно подбирать с учётом того, где будет использоваться изображение.

Как пользоваться цветовым кругом Иттена: 5 шагов

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

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

Основные комбинации на круге Иттена

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

Схема	Как расположены цвета	Особенности	Когда использовать
Комплементарная	Напротив друг друга	Выраженный контраст	Чтобы выделить важный элемент
Контрастная триада	Один цвет и два соседних с противоположным	Контраст с большим разнообразием оттенков	Когда двух цветов недостаточно, но хочется сохранить контраст
Классическая триада	На равном расстоянии друг от друга	Три разных цветовых тона	Для разнообразной палитры с несколькими акцентами
Аналоговая триада	Три соседних цвета	Плавные переходы между цветами	Для сдержанной палитры без резких контрастов
Тетрада (квадрат)	По углам квадрата	Две комплементарные пары	Когда нужны четыре разных цвета
Прямоугольная схема	По углам прямоугольника	Две комплементарные пары с разными интервалами между соседними цветами	Для палитры с контрастами и близкими цветовыми тонами

Рассмотрим каждую схему подробнее.

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

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

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

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

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

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

Как подбирать оттенки, которых нет в круге Иттена

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

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

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

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

Автоматические инструменты для выбора палитры

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

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

В Adobe Color можно создавать палитры по разным цветовым схемам, менять отдельные оттенки и проверять контрастность цветов.

Что делать дальше

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