Цветовой круг Иттена: что это такое и зачем он нужен

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

Коротко

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

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

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

Первичные цвета

Жёлтый, красный и синий образуют основу модели. Важно учитывать, что это художественная учебная система, а не техническая модель RGB или CMYK.

Вторичные цвета

Вторичные цвета получают смешением первичных:

• синий + жёлтый = зелёный;
• красный + жёлтый = оранжевый;
• синий + красный = фиолетовый.

Третичные цвета

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

Схемы цветовых сочетаний

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

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

Аналоговая схема

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

Триада

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

Тетрада

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

Как использовать круг в интерфейсе

1. Определите задачу палитры: навигация, бренд, статусы или акцентное действие.
2. Выберите доминирующий цвет и одну из схем сочетания.
3. Настройте светлоту и насыщенность оттенков, не ограничиваясь чистыми цветами круга.
4. Проверьте контраст текста и интерактивных элементов.
5. Убедитесь, что ошибки, успех и выбранные состояния различаются не только цветом.
6. Протестируйте палитру на реальном контенте и разных экранах.

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

Где используют круг Иттена

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

Инструменты для работы с палитрой

Adobe Color, Paletton и Canva помогают собирать цветовые схемы и переносить оттенки в цифровой макет. Выбирайте сервис по нужной функции: построение схемы, экспорт кодов или проверка контраста. Доступность и набор функций сервисов могут меняться, поэтому важнее понимать сам принцип сочетания цветов.

FAQ

Что такое круг Иттена простыми словами?

Это схема из 12 цветов, которая показывает их родство и помогает находить сочетания.

Чем круг Иттена отличается от RGB и CMYK?

Круг Иттена — учебный инструмент для композиции и восприятия. RGB и CMYK — технические модели воспроизведения цвета на экране и в печати.

Можно ли использовать оттенки вне круга?

Да. Дизайнер меняет светлоту и насыщенность базовых цветов и получает расширенную палитру.

Гарантирует ли круг доступность интерфейса?

Нет. Гармония оттенков не гарантирует достаточный контраст и различимость состояний. Эти параметры проверяют отдельно.

Впервые опубликовано: 30 апреля 2025 года.