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

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

Что такое цветовой круг Иттена

Цветовой круг Иттена — это учебная модель из 12 цветовых секторов, которая показывает отношения между оттенками: соседство, противопоставление и равные интервалы. Швейцарский художник и преподаватель Баухауса Иоханнес Иттен систематизировал эту модель и описал принципы работы с цветом в книге «Искусство цвета», изданной в 1961 году. При этом саму идею цветового круга придумали задолго до Иттена: его вклад — удобная система для обучения и практики. Историю модели и цветовой звезды Иттена подробно разбирает Getty Research Institute.

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

☝️Важно: цветовой круг — отправная точка, а не автоматический генератор «красоты». Два оттенка могут быть связаны по схеме, но конфликтовать из-за одинаковой яркости, плохого контраста текста или неверной площади использования.

Алексей Кузьмичев

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

В классическом варианте есть три уровня:

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

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

Круг Иттена и цифровые модели цвета — не одно и то же

Модель Иттена объясняет отношения между оттенками и удобна для поиска гармоний. Но экран формирует цвет светом в RGB, печать — красками CMYK, а в редакторах дизайнер часто регулирует тон, насыщенность и светлоту через HSL или HSV. Поэтому в цифровом проекте сначала выбирают логику сочетания по кругу, затем фиксируют конкретные значения HEX/RGB и проверяют их на экранах и в контексте интерфейса.

Как подобрать гармоничные цвета: алгоритм из пяти шагов

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

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

3. Выберите цветовую схему. Для спокойствия подойдёт монохром или аналоговая палитра; для акцента — комплементарная; для динамики — триада; для сложной системы — тетрада.

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

5. Протестируйте. Посмотрите макет на светлом и тёмном фоне, на смартфоне и компьютере, в большом и маленьком размере. Для интерфейса обязательно проверьте контраст.

Шесть схем сочетания цветов по кругу Иттена

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

Как применять схемы без перегруза

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

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

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

Таблица сочетаний цветов по кругу Иттена

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

🎨 Быстрые советы по популярным цветам: с зелёным гармонируют соседние жёлто-зелёные и сине-зелёные оттенки, а выразительный контраст даёт красное направление. К жёлтому подходят оранжевый и зелёный для мягкой гаммы, синий для триады и фиолетовый для максимального контраста. Противоположный розовому цвет нельзя определить без подтона: холодному розовому ближе жёлто-зелёный, тёплому кораллово-розовому — сине-зелёный.

Алексей Кузьмичев

Как подобрать сочетание для сложного оттенка

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

• Определите цветовой тон. Мятный ближе к сине-зелёному сектору, бордовый — к красно-фиолетовому, песочный — к жёлто-оранжевому.
• Найдите партнёров по выбранной схеме, а затем подбирайте не чистые, а сопоставимые по характеру версии. К приглушённой базе чаще подходит такой же сложный акцент.
• Согласуйте «светлоту«. Два тёмных цвета могут сливаться, даже если геометрически сочетаются; два очень светлых — терять различия.
• Добавьте нейтральные цвета: белый, молочный, серый, графитовый, бежевый. Они дают глазу паузу и помогают активным оттенкам выполнять свою роль.

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

Онлайн-подбор палитры по HEX

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

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

Алексей Кузьмичев

Где использовать разные цветовые сочетания

• Веб- и UX/UI-дизайн. Нейтральная база, один фирменный цвет и отдельный акцент для главного действия. Статусы успеха, предупреждения и ошибки должны различаться не только оттенком, но и текстом или иконкой.
• Графический дизайн и реклама. Комплементарная схема помогает выделить заголовок или продукт, триада — создать динамичный постер, аналоговая палитра — собрать спокойный визуальный стиль.
• Брендинг. Палитра должна работать в логотипе, соцсетях, презентациях, интерфейсе и печати. Поэтому важны не только красивые цвета, но и набор функциональных оттенков для фона, текста и акцентов.
• Интерьер и предметная среда. Учитывайте освещение, площадь цветового пятна и фактуры. Один и тот же оттенок на маленьком образце и на целой стене воспринимается по-разному.
• Одежда и контент-съёмка. Круг помогает подобрать акцент, но результат зависит от материала, освещения, тона кожи и фона кадра.

Практические мини-кейсы: от схемы к макету

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

Кейс 1. Контрастная кнопка на лендинге

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

Решение. Молочный фон #F7F5EF, тёмно-синий текст #1D2540 и терракотовая кнопка #C4512D. Синий и оранжевый относятся к комплементарным направлениям, но приглушённые версии не спорят между собой. Белый текст на кнопке даёт контраст около 4,6:1 и проходит минимальный порог WCAG для обычного текста.

Кейс 2. Триада для рекламного постера

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

Кейс 3. Спокойная палитра для айдентики

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

Контраст и доступность: что важно в 2026 году

Для цифрового дизайна гармонии недостаточно: текст должен оставаться читаемым. В актуальной рекомендации WCAG 2.2 минимальный контраст обычного текста составляет 4,5:1, крупного — 3:1. Кроме того, цвет не должен быть единственным способом передать смысл: ошибку в форме лучше обозначить красным, иконкой и понятным сообщением.

Проверить палитру можно в Adobe Color: сервис строит гармонии, извлекает оттенки из изображения и предлагает инструменты доступности. В официальной справке Adobe описана проверка палитр для разных типов цветового восприятия — Accessibility tools.

Частые ошибки при подборе цветов

🚫 Слишком много оттенков. Ограничьте палитру и назначьте каждому цвету конкретную функцию.

🚫 Все цвета одинаково активны. Выберите доминанту, а остальные приглушите или сократите их площадь.

🚫 Схема выбрана без учёта задачи. Для кнопки нужен контраст, для длинного чтения — спокойный фон, для бренда — узнаваемость и масштабируемость.

🚫 Игнорируются светлота и насыщенность. Геометрически правильная пара может сливаться или утомлять. Сравнивайте палитру в контексте.

🚫 Цвет заменяет информацию. Не кодируйте статусы только красным и зелёным: добавляйте подписи, формы, паттерны или иконки.

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

🚫 Правило 60/30/10 воспринимается буквально. Это ориентир для иерархии, а не обязательная математическая формула.

Как развить чувство цвета на практике

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

В Yudaev School цвет изучают в связке с композицией, типографикой и практикой в макетах. Для системного погружения подойдут программы «Графический дизайн», «UX/UI-дизайнер» и «Digital-дизайнер». Начать знакомство с профессией можно с бесплатного курса по дизайну.

FAQ: короткие ответы о круге Иттена

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

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

Какие цвета считаются комплементарными?

Это пары, расположенные напротив друг друга: красный и зелёный, синий и оранжевый, жёлтый и фиолетовый. Корректный термин — «комплементарные», хотя в поиске часто встречается ошибочная форма «комплиментарные».

Какой цвет подходит к жёлтому?

Для мягкой гаммы выбирайте соседние жёлто-оранжевые и жёлто-зелёные оттенки. Синий образует с жёлтым часть триады, а фиолетовый даёт максимальный комплементарный контраст. В реальном макете чистый жёлтый часто заменяют горчичным или медовым.

Какой цвет противоположен розовому?

У розового нет одного универсального комплемента: результат зависит от подтона. Холодному розовому ближе жёлто-зелёное направление, а тёплому кораллово-розовому — сине-зелёное. Для спокойной палитры используйте пыльно-розовый с шалфейным или мятным.

Какой вариант проще для новичка?

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

Можно ли использовать больше четырёх цветов?

Да, но лучше строить не набор случайных оттенков, а систему: нейтральная база, основной цвет, акцент и функциональные состояния. Чем больше палитра, тем важнее роли и правила применения.

Круг Иттена подходит для интерфейсов?

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

Почему цвета по кругу всё равно могут не сочетаться?

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

Круг Иттена, Итона или Итана — как правильно?

Правильно: цветовой круг Иттена, по фамилии Johannes Itten — Иоханнес Иттен.

Главное

• Цветовой круг Иттена показывает отношения между оттенками, но не заменяет работу со светлотой, насыщенностью и пропорциями.
• Для спокойной палитры выбирайте монохром или соседние цвета; для акцента — комплементарную схему; для динамики — триаду; для сложной системы — тетраду.
• Назначайте каждому оттенку роль и не используйте активные цвета поровну.
• В цифровом дизайне проверяйте контраст по WCAG 2.2 и не передавайте смысл только цветом.
• Лучший способ освоить колористику — регулярно собирать палитры и применять их в реальных макетах.

Внешние источники и полезные инструменты

• Getty Research Institute — Color / Bauhaus — история цветовой модели Иттена, цветовая звезда 1921 года и семь типов контраста.
• Johannes Itten, The Art of Color — Google Books — библиографические данные издания 1961 года.
• W3C — Web Content Accessibility Guidelines (WCAG) 2.2 — требования к контрасту и использованию цвета в цифровых интерфейсах.
• Adobe Color — Color Wheel — создание цветовых гармоний и подбор палитр.
• Adobe — Color Accessibility Tools — проверка различимости оттенков при нарушениях цветового зрения.