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

Виктор Сухов Виктор Сухов
December 7, 2023
Базовые сочетания цветов в дизайне. Как подбирать гармоничные сочетания и пользоваться кругом Иттена

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

Что такое круг Иттена и как правильно совмещать цвета даже тем, кто далёк от дизайна — рассказываем в статье.

Зачем подбирать сочетания цветов

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

Комбинирование цветов поможет создать дизайн, который передаст нужное настроение, вызовет интерес у аудитории.   

Гармонично подобранные цвета: 

  • создают нужную атмосферу, облегчают усвоение информации;

  • выделяют и расставляют акценты на важном;

  • формируют стиль бренда, повышают узнаваемость и продажи.

Несочетаемые цвета могут негативно повлиять на восприятие объявления или услуги. 

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

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

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

Швейцарский художник Иоханнес Иттен стал известен в начале 20 века благодаря изучению колористики. Подробный принцип работы он описал в своей книге «Искусство цвета». Там же он заявил про свою цветовую диаграмму.

Круг состоит из 12 цветов и включает основные цвета и их оттенки.

Пример неправильно подобранных цветовых сочетаний
Цветовой круг Иттена

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

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

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

Цветовая гамма, используемая в логотипе и дизайне, влияет на восприятие товара. 

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

Удачные сочетания цветов по кругу 

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

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


Комплиментарные цвета располагаются друг напротив друга

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


Комплементарное сочетание голубого и оранжевого на сайте Aviasales


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


Сочетание подобрано по углам треугольника


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

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


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

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


На примере — классическая триада сочетания

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


Аналоговая триада

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

 
Пример прямоугольного сочетания

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

Топ сервисов подбора цветов

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

Рассказываем, как они работают, чем отличаются и для каких задач подходят.

  • Adobe Color CC — продукт от компании Adobe. Гибкие настройки инструмента дают широкий выбор цветовых комбинаций. Можно выбрать правило гармонии и настроить предложенную палитру. 

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

  • getColor — сервис быстро находит оптимальную палитру, настраивает тон, насыщенность, яркость цветов. Можно увидеть, как выглядят Бисмарк-фуриозо или Фузи-вузи.

  • ColorScheme — по функционалу схож с Paletton, но есть русскоязычное меню. Можно создать свою палитру и поделиться ссылкой на постоянный адрес схемы с другими. Широкий функционал сервиса подходит для разных дизайнерских задач.

Любой из этих сервисов подойдет для подбора правильных сочетаний. 
 



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

Заключение

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

Поделиться:

Рекомендуемые статьи

Обучение Что такое брендбук, и как он помогает быстрее работать
Компания без брендбука как сапожник без сапог. Брендбук — визитная карточка компании. Он поддерживает единый стиль, узнаваемость бренда. Без него компания рискует потерять свою цельность и индивидуальность. Рассказываем, чем полезен брендбук и как он влияет на эффективность в работе.
May 8, 2024
Что такое брендбук, и как он помогает быстрее работать
Обучение Главные правила типографики в дизайне
Мы работаем с типографикой при оформлении презентации, верстке сайта, подготовке карточки товара или при создании постов и сторис. Рассмотрим правила оформления, которые сделают любой информационный продукт лучше.
Apr 26, 2024
Главные правила типографики в дизайне
Обучение Нейросети для текста в помощь дизайнеру. Топ-6 нейросетей для генерации текста в 2024 году
Делимся подборкой бесплатных нейросетей для текста, которые пригодятся при работе с визуальным и текстовым контентом.
Apr 18, 2024
Нейросети для текста в помощь дизайнеру. Топ-6 нейросетей для генерации текста в 2024 году