На баннере или сайте с удачным цветовым решением хочется надолго задержать взгляд. Поэтому для дизайнера, художника или стилиста так важен навык работы с оттенками. Научиться этому можно, если знакомиться с теорией цвета, тренировать насмотренность и использовать полезные инструменты. Пожалуй, главный помощник дизайнера — цветовой круг Иттена.
Расскажем, что такое круг Иттена, как с ним работать и какие ещё есть полезные сервисы для работы с цветом.
Кто и зачем создал цветовой круг Иттена
Иоганнес Иттен — теоретик искусства и художник из Швейцарии. С 1919 года он работал в легендарном Баухаусе (школа конструирования и строительства, во многом определившая развитие архитектуры и дизайна во всём мире). Иттен разработал учебный курс о цвете, форме и фактуре материала. Одним из коллег Иттена был, например, Василий Кандинский.
Иоганнес Иттен. Источник: Wikimedia Commons
У Иттена были чрезвычайно передовые взгляды для того времени. К примеру, он считал, что художника не должны ограничивать традиции и устои, а ещё начинал занятия со студентами с дыхательных упражнений и медитаций.
В своей книге «Искусство цвета» теоретик рассказывает о гармонии цвета, цветовом конструировании и контрастах. Для колористического конструирования он предлагает художникам пользоваться цветовым кругом.
Цветовой круг по Иоханнесу Иттену. Источник: Wikimedia Commons
Художник не придумал этот круг с нуля, но он удачно собрал предыдущие наработки и усовершенствовал их. Так родился помощник всех стилистов, дизайнеров, фотографов и иллюстраторов.
Как устроен цветовой круг Иттена
Главные цвета в системе Иттена — красный, синий и жёлтый. Это основные цвета. Они размещены в центре круга и вписаны в треугольник. Вокруг этих цветов ещё три треугольника. Это цвета, которые получаются из смешения основных. То есть, если взять два основных цвета и смешать их, получаются составные цвета (или цвета второго порядка):
- фиолетовый,
- зелёный,
- оранжевый.
И, наконец, внешний круг, который состоит из 12 цветов. Там размещены и цвета второго порядка, и третьего, и основные.
Цвета третьего уровня созданы из смешения основных и составных цветов.
- жёлто-зелёный,
- сине-зелёный,
- сине-фиолетовый,
- красно-оранжевый,
- жёлто-оранжевый,
- красно-фиолетовый.
Круг Иттена с раскладкой по цветам разного уровня. Источник: сайт sndesign-mar.1gb.ru
Так получился цветовой круг Иттена из 12 цветов, очерёдность которых повторяет порядок цветов в естественном спектре. Иттен считал, что эта система поможет художнику чётко воспроизвести цвета в памяти.
Как пользоваться цветовым кругом: основные комбинации и схемы
Круг Иттена — это шпаргалка для всех, кто занимается дизайном в том или ином виде. Нужно вам разработать упаковку сыра, собрать гардероб клиентке или сверстать интернет-магазин скейтбордов — скил сочетать цвета добавит +100 к привлекательности итогового продукта. Расскажем ниже, как сочетать цвета при помощи круга Иттена.
Комплементарное сочетание
Это комбинация двух цветов, которые в круге размещены напротив друг друга, их можно соединить прямым отрезком. Сочетание таких цветов получается ярким и контрастным. Оно подходит, например, чтобы расставить акценты в интерьере или в дизайн-макете, где основной цвет более спокойный. Если такую схему цветов использовать чрезмерно, есть риск, что ваш дизайн утомит глаза.
Основные тона в интерьере серо-голубые, с помощью фиолетового и жёлтого расставлены акценты. Источник: сайт homester.com.ua
Контрастная триада (разбитое комплементарное сочетание)
Это сочетание близко к комплементарному, только в этом случае берут не один контрастный цвет, а два соседних. Визуально эта комбинация похожа на вытянутый треугольник. Такая триада выглядит мягче, чем комплементарная пара. Кроме того, в ней больше цветов и она разнообразнее.
Необязательно, чтобы все цвета в вашем дизайне использовались равнозначно, один может быть основным, а остальные два — акцентными. Или же основным будет нейтральный оттенок, а три из контрастной триады только для выделения деталей.
На упаковке детского питания голубой цвет основной, а красный и оранжевый использованы для расстановки акцентов. Источник: сайт lenta.com
Чтобы выбрать цвета для вашего дизайна, читайте статью о том, как цвет сказывается на восприятии бренда и как использовать это в рекламе.
Триада
Это сочетание на круге Иттена смотрится как равносторонний треугольник. Это тоже контрастная, но сбалансированная комбинация.
Сочетание синего, жёлтого и красного на упаковке чипсов. Источник: сайт vprok.ru
Аналогичное сочетание (аналоговая триада)
Чтобы получить аналоговую комбинацию, берут цвета, которые расставлены на круге рядом друг с другом. Так получается достаточно разнообразная по цветам, но при этом гармоничная картинка. Такое комбинирование используют в оформлении интерфейсов, дизайне упаковок товаров или, например, в макияже.
Аналоговая триада полезна, когда нужно создать общее гармоничное впечатление. Здесь, как и в других сочетаниях, можно определить один цвет как основной, а остальные брать как дополнительные. Дизайнеры рекомендуют использовать от двух до шести цветов, расположенных рядом на круге Иттена. Оптимально — от трёх до пяти.
Аналоговые цвета в модном образе. Источник: сайт cosmo.ru
Тетрадное или четырёхугольное сочетание
Это соединение в макете или образе целых четырёх цветов. На круге Иттена оно выглядит как прямоугольник или квадрат. По сути, это две пары комплементарных цветов. Сразу четыре цвета красиво соединить в дизайне непросто. Зато, если получится, выйдет красочный и оригинальный результат. Вариантов комбинаций в этом случае очень много, поэтому тетраду удобно использовать при разработке брендбука или в коммерческой иллюстрации.
На упаковке шоколада синий использован для фона, а красный, зелёный и жёлто-оранжевый для орнамента. Источник: сайт adindex.ru
При работе с цветом учитывают ещё ряд его характеристик: яркость, насыщенность и оттенок. Дизайнеры в работе могут выбирать из сотен вариантов оттенков, пастельную или контрастную гамму, яркие или приглушённые цвета.
В интерьере использовали контрастные синий и оранжевый, но в их «разбелённом», мягком варианте. Источник: сайт homester.com.ua
Как дизайнеры используют круг Иттена
Трудно представить себе музыканта, который не знает ноты. Примерно так же для дизайнера важно понимание цвета и его сочетаний.
Чтобы упростить жизнь, творческие работники часто приобретают вот такую популярную шпаргалку, основанную на круге Иттена.
Карманный цветовой круг. Источник: сайт ozon.ru
Дизайнеры пользуются ей, когда продумывают сбалансированные интерьеры и декоративные элементы для своих клиентов.
Аналоговые цвета в интерьере гостиной. Источник: сайт unsplash.com
Основы цветовой теории — хлеб и графических дизайнеров. Рекламный баннер, флаер или логотип с удачным цветовым сочетанием цепляет взгляд и оставляет приятное впечатление.
Упаковка крупы от брендингового агентства Supermarket. Источник: сайт adindex.ru
Впечатление от сайта или мобильного приложения зависит не только от их удобства, но и внешнего вида. Круто или нет дизайнер поработал с цветом, мы видим каждый день, открывая сайты и приложения на смартфонах и компьютерах.
Стартовая страница сайта antyfest.ru
Стилисты тоже в постоянном поиске цветовой гармонии для гардеробов клиентов. Колористические сочетания в одежде задают настроение образу и могут рассказать что-то важное о человеке.
Стилисты знают, что цвет имеет большое значение в образе. Источник: сайт pinterest.ru
Цветовой круг Иттена онлайн: полезные сервисы
Чтобы облегчить себе работу с цветом (или, например, вы пока не уверены в своих навыках), можно пользоваться вспомогательными сервисами. Это сайты, где автоматически генерируются подходящие сочетания цветов. Некоторые из этих сервисов позволяют не только подбирать цвета из основного спектра, но и оттенки, а также регулировать насыщенность. Расскажем о некоторых сервисах.
Цветовой круг Canva
Онлайн-круг помогает подбирать безопасные сочетания и свежие комбинации оттенков. Использовать его легко: достаточно просто выбрать способ комбинации (в раскрывающемся меню есть 5 видов), затем основной цвет и настроить насыщенность.
Выбираем триадное сочетание и регулируем насыщенность
Adobe Color
В этом сервисе также можно заранее выбрать нужный вариант сочетания (тут их целых 10). Оттенок и яркость настраиваются прямо на круге. Потом можно использовать сохранённые цвета в продуктах Adobe (Photoshop, Illustrator, Fresco и т. д.) через панель цветовых тем Adobe Color или библиотеки CC Libraries.
Подбираем комплиментарные оттенки в Adobe Color
Get Color
Инструмент для работы с оттенками Get Color помогает подбирать нужный цвет онлайн. Также на сайте можно узнать HEX-код цвета (код формата #набор букв/цифр).
Определяемся с правилом сочетания цветов и регулируем оттенок в Get Color
ColorScheme. Ru
Ещё одна онлайн-шпаргалка для создания цветовых схем и подбора цвета. На этом сайте в центре круга отображается один основной цвет. Сервис позволяет регулировать яркость оттенков и их насыщенность.
На основе выбранной комбинации сайт делает цветовую схему
На самом деле, не обязательно использовать сочетания оттенков только из системы Иттена. От неё при желании можно отходить. И круг, и перечисленные онлайн-сервисы лишь инструменты, которые делают проще жизнь новичков и искушённых дизайнеров. Изучайте правила колористики, доверяйте своей творческой интуиции, и вы обязательно создадите что-то классное.
