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

Цветовой круг Иттена – универсальная оттеночная матрица для тех, кто оформляет баннеры и сайты, занимается графикой, рекламными кампаниями и работает в смежных сферах. Предназначен для подбора наиболее сочетающихся комбинаций, предупреждая дисгармонию и аляповатость. Был разработан в XX веке, но сохраняет актуальность и сегодня, являясь must have для всех, кто взаимодействует с цветом. Рассказываем, что такое круг Иттена, объясняем, как его использовать в онлайне и офлайне, разбираем популярные схемы.

Что такое цветовой круг Иттена — понятие и теория

Круг Иттена и цветовые сочетания, хорошо знакомые сегодня, названы по имени Иоганнеса Иттена – швейцарского художника, теоретика искусств, преподавателя архитектурной школы Баухаус. Он придерживался прогрессивных взглядов, а принципы работы с кругом описал в книге «Искусство цвета» (она доступна на русском языке во многих магазинах), дополнив ее индивидуальной трактовкой таких понятий как контраст, оттеночное конструирование, гармония.

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

Как выглядит круг Иттена

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

Невзирая на то, что восприятие палитры – индивидуально, существуют цвета, которые воздействуют на людей практически одинаково. Макс Люшер в своей книге «Цветовой тест Люшера» отмечал, что понимание оттенков изначально было сформировано факторами, находящимися вне контроля человечества – это день (свет, деятельность) и ночь (тьма, пассивность). Так, темно-синий – это символ спокойствия (он ассоциируется с ночью), а ярко-желтый – активности, он «дневной». Гаральд Браэм, автор книги «Психология цвета», отметил, что красный стимулирует к действию, фиолетовый прочно связан в сознании многих с богатством, а вся пастельная палитра умиротворяет. Объединение несочетаемых цветов вызывает ощущение тревожности, раздражительность и непринятие.

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

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

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

Хроматические цвета, доступные в круге, тоже разделены на 3 уровня:

• первый круг (первичные). Представлены красным, желтым и синими, им отведен центр. Являются основными, при их смешивании можно получить любой оттенок;
• второй (вторичные). Сюда входят фиолетовый, зеленый и оранжевый, полученные в результате смешивания компонентов из первичной палитры. Например, если объединить синий и красный – получим фиолетовый, синий и желтый – зеленый, желтый и красный – оранжевый;
• третий (третичные). Их можно получить, соединив первичный и вторичный цвета, которые расположены в матрице рядом. В качестве примера: смешивание оранжевого и желтого обеспечит желто-оранжевый. Внешний круг включает 12 оттенков: по 3 первичных и вторичных, а также 6 третичных (желто-зеленый, сине-зеленый, сине-фиолетовый, красно-оранжевый, желто-оранжевый, красно-фиолетовый).

Распределение цветов в круге Иттена

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

Зачем использовать цветовой круг

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

• управление эмоциями. Как один оттенок, так и сочетания способны управлять эмоциональным состоянием и настроением. Правильно подобрав палитру, можно вызывать определенные чувства и создать атмосферу, которая настроит клиентов на нужный лад. Яркий пример – управление аппетитом: желтый, оранжевый и красный его стимулируют, а вот синий (в чистом виде) – нет, ведь в природе на так много продуктов этого цвета. Приемом давно пользуются крупные бренды, вспомним логотипы и дизайн Coca-Cola, Бургер Кинг, Яндекс.Еда;
• легкое восприятие. Объединение несочетаемых цветов в одном интерфейсе или помещении влечет за собой сложное восприятие. Неправильная комбинация не позволяет сконцентрироваться, а некоторые люди испытывают ощущение хаоса и паники;
• акцентирование внимания. Используя матрицу Иттена, можно подобрать успешные сочетания, которые создадут акцент на важных деталях или будут вести взгляд пользователя по направлению к целевому действию. Например, при оформлении CTA-элементов на сайте не рекомендуется использовать бледно-серый – он создает ощущение, что кнопка не активна и клик по ней не принесет результат;
• дизайнерские адаптации и визуальное запоминание. Черно-белая комбинация прочно ассоциируется с минимализмом, а сине-голубые оттенки с белыми вкраплениями дают отсылки к морской тематике. Аналогичное правило действует при разработке айдентики и брендбуков: выбираются сочетания, при взгляде на которые клиент сразу же вспоминает определенную компанию.

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

Кому необходима схема Иттена

Подбор по цветовому кругу Иттена – универсальный инструмент, который используют как в профессиональной, так и в частной среде. К нему прибегают:

• дизайнеры интерьеров, витрин, выставок и мероприятий;
• веб-дизайнеры и специалисты по UX/UI;
• графические дизайнеры и иллюстраторы;
• фэшн-дизайнеры, колористы и представители других профессий, взаимодействующих с цветом.

Готовая матрица Иттена с подсказками и схемами

Матрица высоко ценится из-за интуитивной простоты: взаимодействовать с оттенками можно без опыта. Доступны разнообразные вариации круга: помимо стандартной схемы, существуют онлайн-инструменты и специальные наборы колориста, дополненные объяснениями и направляющими для быстрого выбора.

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

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

Комплементарная

Самый простой вариант для тех, кому нужно получить гармоничное сочетание контрастных оттенков для расстановки акцентов. Для применения комплементарной схемы необходимо на матрице начертить ровную линию: один конец указывает на основной цвет, второй – на дополнительный. После подбора первый цвет будет использоваться для оформления, второй – для выделения определенных объектов в дизайне. Если оттенки распределяются 50/50, то результат получается невыразительным: яркие контрасты «гасят» друг друга, поэтому взгляду не за что зацепиться.

Комплементарная схема по Иттену

Триада

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

Как использовать схему триада

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

На внешнем круге выбираются 3 (иногда 5) оттенков, расположенных рядом друг с другом. Удается получить перетекающую палитру без резких переходов, обеспечивающую элегантность при переносе в интерьер. Один цвет выполняет функцию основного, второй – поддерживающего, остальные применяются для акцентов и выделения, пропорция следующая: 55-60%, 20-25%, 15-20% соответственно.

Как создавать палитры, используя аналоговую триаду

Тетрада

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

Как составить тетраду

Прямоугольник

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

Схема с прямоугольником

Буква Х

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

Буква Х для определения четырехцветной палитры

Что делать, если нужной комбинации нет

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

Рекомендуется определить главенствующий колер, под который будет подбираться менее насыщенная палитра цветов, например, для акцентов или контраста. Круг является базисом, оставляющим пространство для импровизации. Например, ваш основной оттенок – бирюзовый, в матрицу он не включен, но по правилам палитры находится посередине между сине-зеленым (голубым) и зеленым. Чтобы найти пару для него, достаточно провести линию (используем комплементарную схему) к самой удаленной точке от границы между оттенками. На финише видим, что линия указывает на красно-оранжевую и красную ячейки – желаемый колер находится здесь, достаточно объединить указанные цвета. Яркость, насыщенность, тон – все это будет выбирать дизайнер, а круг дает понимание, что лучше сочетать.

ТОП-5 сервисов, облегчающих подбор цветов

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

1. Paletton

Сервис Paletton – англоязычный, он широко используется графическими, веб-дизайнерами для взаимодействия с палитрами и поиска наиболее удачных. Помимо стандартного круга, предлагает настраивать яркость, контраст и насыщенность, делать собственные схемы и выполнять экспорт подобранных сочетаний в формате кода. Можно получать информацию о режимах (RGB, LAB), управлять схемами (монохромная, триада и другие).

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

Что есть в сервисе Paletton

2. Adobe Color

Сервис Adobe Color – онлайн-инструмент, поддерживающий более 15 языков, предоставляется базовый функционал в рамках бесплатной версии. Помогает быстро создавать палитры с учетом выбранных цветовых режимов (RGB, LAB, HSB) и гармонии. Доступные оттеночные сочетания сразу можно изменять, например, двигая ползунок или указывая код вручную. Есть инструмент для извлечения палитр и градиентов из изображений (достаточно загрузить их в сервис), а также возможности для использования результатов в продуктах Adobe. Предусмотрен дополнительный функционал, позволяющий:

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

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

Инструментарий Adobe Color

3. ColorScheme

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

• генерация схем – от монохромной до тетрады и контраста;
• ручная корректировка готовых схем;
• управление цветовой моделью, представлены 5 вариантов;
• симуляция зрения, которая позволяет понять, как палитру видят люди с разными нарушениями;
• рандомизация сочетаний с настраиваемыми яркостью, насыщенностью, углом/дистанцией, контрастностью (свет/тень) и другими характеристиками.

Результат можно сохранить в разных форматах: HTML, палитры для продуктов Adobe, иные. Есть много полезной информации, такой как калькулятор и названия оттенков (с кодами в HTML), конвертер для перевода цветов из одной модели в другую. Здесь можно прочесть книгу Иттена и получить другую полезную информацию, а также проверить, как текст сочетается с разными фонами. Дополнительно – отправка постоянного URL-адреса схемы, что удобно при командной работе и обеспечении обратной связи для клиента.

Панель ColorScheme

4. getColor

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

Как выглядит круг Иттена в getColor

5. Aspose Products

Цветовой круг Aspose Products – простейшее решение для формирования наборов оттенков с применением кода HEX. Сервис распространяется бесплатно и доступен онлайн, количество возможных комбинаций – не ограничено. Доступен с десктопных и мобильных устройств, регистрация не нужна.

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

Функционал платформы Aspose Products

В заключение

Цветовой круг Иттена – эффективное решение для управления оттенками. Начинающим дизайнерам круг помогает научиться чувствовать цвета и понять, как они сочетаются друг с другом, опытным – ускорить и упростить рабочие процессы. Помимо круга, необходимо уделять внимание развитию насмотренности, изучению яркости, тона, насыщенности и контрастности, психологических и других аспектов, тесно связанных с колористикой. В классическом виде (бумажная версия) матрица выполняет вспомогательную функцию. Более удобным является использование онлайн-сервисов, предупреждающих искажение оттеночных сочетаний, обеспечивающих выгрузку в популярных форматах и выбор в несколько кликов.