Цветовой круг Иттена: как использовать и сочетать цвета
Коротко. Цветовой круг Иттена — схема из 12 цветов, которая показывает, как оттенки связаны между собой и какие сочетания дают гармонию. В основе три первичных цвета: желтый, красный и синий. Из них получают три вторичных и шесть третичных. Круг используют как подсказку для подбора палитры по готовым схемам: комплементарной, аналоговой, триадной и тетрадной. Это отправная точка, а не строгий закон — итоговая палитра всегда проверяется на реальном макете.
Зачем дизайнеру схема сочетания цветов
Цвет — самый заметный инструмент в дизайне и самый сложный в управлении. Человеческий глаз различает миллионы оттенков, и выбрать из них три-четыре, которые будут работать вместе, наугад почти невозможно.
Отсюда типичные проблемы новичка: макет пестрит, потому что каждый блок покрашен в новый цвет; кнопка теряется на фоне; сайт выглядит несобранно, хотя каждый оттенок по отдельности красивый.
Цветовой круг решает первую часть задачи — дает понятную систему, по которой можно быстро собрать сочетание, не полагаясь на удачу. Дальше подключается вкус, контекст и проверка на практике, но начинать удобнее со схемы.
Кто такой Иттен и откуда взялся круг
Иоганнес Иттен — швейцарский художник и педагог, преподававший в Баухаусе, легендарной немецкой школе дизайна двадцатых годов. Идея упорядочить цвета принадлежит не ему: до этого свои схемы предлагали Ньютон и Гете. Но именно 12-частный круг Иттена, описанный в его книге «Искусство цвета», стал самым известным среди дизайнеров.
Причина популярности простая: круг наглядный и запоминается за минуту. Он показывает три вещи сразу — из чего получается каждый цвет, какие цвета соседние, а какие противоположные.
Как устроен цветовой круг
Круг собирается в три слоя.
Три первичных цвета: желтый, красный, синий. Их нельзя получить смешиванием других — это база, из которой строится все остальное.
Три вторичных цвета получаются смешиванием пары первичных:
- желтый плюс красный дают оранжевый
- красный плюс синий дают фиолетовый
- синий плюс желтый дают зеленый
На круге они располагаются между теми цветами, из которых получены.
Шесть третичных цветов появляются при смешивании соседних первичного и вторичного: желто-оранжевый, красно-оранжевый, красно-фиолетовый, сине-фиолетовый, сине-зеленый и желто-зеленый.
Итого двенадцать секторов. Принцип чтения круга простой: чем ближе цвета расположены друг к другу, тем спокойнее их сочетание, чем дальше — тем сильнее контраст.
Отдельно стоит запомнить деление на теплые и холодные. Условно круг делится пополам: сторона с желтым, оранжевым и красным считается теплой, сторона с зеленым, синим и фиолетовым — холодной. Теплые цвета визуально приближают объект, холодные отдаляют.
Три характеристики цвета
Круг показывает только цветовой тон, но у любого цвета есть еще два параметра, и без них палитра не собирается.
Тон — собственно цвет: красный, синий, зеленый. Это то, что отложено по кругу.
Насыщенность — интенсивность цвета. Один и тот же красный бывает кричащим и приглушенно-пыльным.
Светлота — насколько цвет светлый или темный. Добавляя белый, получаем пастельные оттенки, добавляя черный — глубокие темные.
Именно поэтому двенадцати цветов хватает: меняя насыщенность и светлоту, из каждого сектора получают десятки рабочих оттенков. И именно поэтому две палитры, собранные по одной схеме, могут выглядеть совершенно по-разному.
Схемы сочетания цветов
Это главная практическая ценность круга. Схем несколько, и каждая решает свою задачу.
Монохромная. Один сектор круга, но разной светлоты и насыщенности. Самый безопасный вариант: ошибиться почти невозможно, палитра выглядит собранной. Минус — легко получить скучный результат, поэтому монохром обычно оживляют одним контрастным акцентом.
Аналоговая. Два-четыре цвета, стоящие рядом: например, синий, сине-зеленый и зеленый. Дает спокойное, естественное сочетание без резких контрастов. Подходит для интерфейсов, презентаций, образовательных материалов. Один цвет назначают основным, остальные используют для фона и деталей.
Комплементарная. Два цвета напротив друг друга: синий и оранжевый, красный и зеленый, желтый и фиолетовый. Максимальный контраст, поэтому идеально для акцентов. Важное правило: брать их в равных количествах нельзя — получится рябь. Один делают основным и приглушенным, второй оставляют ярким и используют точечно, для кнопок и важных элементов.
Раздельно-комплементарная. Берется цвет, находится противоположный ему, но вместо него используются два соседних с ним. Например, к желтому берут не фиолетовый, а сине-фиолетовый и красно-фиолетовый. Контраст остается, но становится мягче — хороший выбор, когда чистая комплементарная пара кажется слишком резкой.
Триадная. Три цвета, образующие равносторонний треугольник. Дает живую, яркую палитру. Требует дисциплины: один цвет должен доминировать, иначе макет распадется на три конкурирующие зоны.
Тетрадная. Четыре цвета по вершинам квадрата или прямоугольника — по сути две комплементарные пары. Самая сложная схема: четыре ярких цвета почти всегда превращаются в визуальный шум. Работает только тогда, когда за каждым цветом закреплена роль: фон, текст, кнопка, статусы.
Семь контрастов Иттена
Круг — не единственное, что описал Иттен. В «Искусстве цвета» он выделил семь типов контраста, и это более тонкий инструмент, чем схемы сочетаний.
Контраст по цвету — сопоставление чистых, максимально разных цветов. Дает ощущение силы и яркости.
Контраст светлого и темного — самый сильный по воздействию. На нем строится читаемость текста и вся типографика.
Контраст холодного и теплого — создает ощущение глубины: теплое выходит вперед, холодное уходит назад.
Контраст дополнительных цветов — противоположные цвета круга, усиливающие друг друга.
Симультанный контраст — эффект восприятия: один и тот же серый на желтом фоне кажется голубоватым, а на синем — теплее. Причина, по которой цвет всегда проверяют в окружении, а не изолированно.
Контраст по насыщенности — сопоставление яркого и приглушенного оттенка. Так выделяют главное, не добавляя новых цветов.
Контраст по площади цветовых пятен — соотношение занимаемых площадей. Маленькое пятно яркого цвета работает сильнее, чем половина макета в нем же.
Для практики полезнее всего последние два: они позволяют управлять вниманием, оставаясь в пределах одной палитры.
Правило 60-30-10
Схема отвечает на вопрос «какие цвета», но не отвечает на вопрос «сколько каждого». Здесь помогает простое соотношение, пришедшее из интерьерного дизайна.
60 процентов площади — основной цвет. Обычно спокойный, часто нейтральный. Фон, крупные плоскости
30 процентов — дополнительный. Блоки, карточки, вторичные элементы
10 процентов — акцент. Самый яркий цвет, только для главных действий: кнопка покупки, важное уведомление
Правило не догма, но оно решает главную проблему новичков — равномерное распределение ярких цветов по макету. Если акцентного цвета много, он перестает быть акцентом.
Ограничение, о котором молчат
Важная деталь, которую редко проговаривают: круг Иттена построен на модели смешивания красок, где базовыми считаются желтый, красный и синий. Экраны работают иначе — там базовые цвета красный, зеленый и синий, а печать использует голубой, пурпурный, желтый и черный.
Практическое следствие: «противоположные» цвета на круге Иттена не всегда совпадают с физически дополнительными в цифровой среде. По кругу Иттена пара к красному — зеленый, а в экранной модели дополнительным к красному будет голубой.
Значит ли это, что круг бесполезен? Нет. Он остается отличным инструментом для быстрого подбора гармоничных сочетаний и обучения. Но относиться к нему стоит как к подсказке, а не как к физическому закону. Финальную палитру всегда проверяют глазами на реальном макете и на реальном устройстве.
Проверка контраста и доступность
Про это почти не пишут в статьях о круге Иттена, хотя для веб- и интерфейсного дизайна это критично.
Гармоничное сочетание не гарантирует читаемости. Светло-серый текст на белом фоне может выглядеть изящно и при этом быть нечитаемым для части пользователей.
Существуют международные рекомендации по доступности, которые задают минимальные требования к контрасту текста и фона. Обычный текст должен иметь коэффициент контрастности не ниже 4,5 к 1, крупный текст и элементы интерфейса — не ниже 3 к 1. Проверить сочетание можно бесплатными онлайн-инструментами: достаточно ввести два цвета, и сервис покажет коэффициент.
Второй момент — цветовая слепота. Красно-зеленую форму дальтонизма имеет примерно каждый двенадцатый мужчина. Если статус заказа отличается только цветом, зеленый и красный для такого пользователя сольются. Отсюда правило: цвет не должен быть единственным носителем информации. Дублируйте его иконкой, подписью или формой.
Эти проверки не отменяют круг Иттена — они дополняют его. Сначала подбираем гармонию, потом проверяем на читаемость.
Как собрать палитру: пошагово
Шаг 1. Определите задачу. Что должен транслировать дизайн — надежность, энергию, спокойствие, дороговизну. От этого зависит выбор базового цвета.
Шаг 2. Выберите базовый цвет . Один. Он займет большую часть макета и задаст характер.
Шаг 3. Выберите схему. Спокойный дизайн — аналоговая или монохромная. Нужен яркий акцент — комплементарная. Живой динамичный образ — триадная.
Шаг 4. Подберите оттенки. Не берите чистые цвета круга напрямую: они редко смотрятся хорошо в интерфейсе. Поиграйте насыщенностью и светлотой, приглушите фоновые оттенки.
Шаг 5. Назначьте роли. Каждому цвету — свою функцию: фон, текст, вторичный текст, границы, основной акцент, состояние ошибки, состояние успеха. Цветов без назначения быть не должно.
Шаг 6. Распределите по правилу 60-30-10.
Шаг 7. Проверьте. Соберите тестовый экран с заголовком, текстом, кнопкой и сообщением об ошибке. Посмотрите на светлом и темном фоне, на телефоне и на мониторе. Проверьте контраст текста.
Сервисы для подбора палитры
Все они, по сути, автоматизируют то же самое, что делает круг вручную:
- Adobe Color — классический инструмент с готовыми схемами и проверкой доступности
- Coolors — быстрый генератор палитр, удобно перебирать варианты пробелом
- Color Hunt — библиотека готовых палитр, полезна для насмотренности
- Paletton — визуальный круг с настройкой всех схем
- Canva Color Palette Generator — вытягивает палитру из загруженной картинки
- Contrast Checker — проверка коэффициента контрастности текста и фона
Совет: сервисы удобны для старта, но палитра, собранная автоматически, почти всегда требует ручной доводки под конкретный макет.
Частые ошибки
Слишком много цветов. Если каждый блок в своем оттенке, система разваливается. Для большинства проектов достаточно трех цветов плюс нейтральные.
Равные доли ярких цветов. Два насыщенных цвета в одинаковом количестве конкурируют за внимание, и глазу не за что зацепиться.
Чистые цвета круга без обработки. Цвета с круга максимально насыщенные. В интерфейсе они выглядят агрессивно — почти всегда их нужно приглушать.
Отсутствие нейтральных. Белый, серый, черный и бежевый не входят в схемы, но именно они дают палитре воздух и позволяют ярким цветам работать.
Игнорирование значений цвета. Красный воспринимается как ошибка или срочность, зеленый как успех. Подсвечивать проблему голубым — сбивать пользователя с толку.
Проверка цвета в изоляции. Из-за симультанного контраста оттенок меняется в зависимости от соседей. Смотреть нужно на макете целиком.
Одна проверка на одном экране. Цвета по-разному выглядят на разных мониторах и в печати. Проверять надо в тех средах, где дизайн будет жить.
Коротко о главном
Цветовой круг Иттена — схема из 12 цветов, где три первичных дают три вторичных и шесть третичных. Она показывает связи между оттенками и позволяет собирать палитру по готовым схемам: монохромной, аналоговой, комплементарной, раздельно-комплементарной, триадной и тетрадной.
Круг отвечает на вопрос, какие цвета брать, но не отвечает, в каких пропорциях — здесь помогает правило 60-30-10. И он ничего не говорит о читаемости, поэтому после подбора гармонии палитру обязательно проверяют на контраст.
Главное, что стоит запомнить: круг Иттена — удобная отправная точка, а не строгий закон. Он построен на модели смешивания красок, а не экранных цветов, поэтому финальное решение всегда принимается глазами на реальном макете.
Работа с цветом — один из базовых навыков дизайнера, который тренируется практикой и насмотренностью. Освоить графический и веб-дизайн с нуля, включая колористику, композицию и работу в Photoshop и Figma, можно на курсе Pro Design в PROWEB — 6 месяцев, с 14 лет. Если вы только выбираете направление, пройдите бесплатный IT-тест — он подскажет, что вам ближе.
Часто задаваемые вопросы
Что такое цветовой круг Иттена?
Это схема из 12 цветов, показывающая связи между оттенками: как одни получаются из других, какие расположены рядом, а какие противоположны. Ее предложил швейцарский художник и педагог Баухауса Иоганнес Иттен, описав в книге «Искусство цвета».
Из каких цветов состоит круг?
Из трех первичных — желтого, красного и синего, трех вторичных — оранжевого, зеленого и фиолетового, и шести третичных, которые получаются смешиванием соседних первичного и вторичного.
Какие сочетания цветов считаются гармоничными?
Основных схем шесть: монохромная, аналоговая, комплементарная, раздельно-комплементарная, триадная и тетрадная. Выбор зависит от задачи: спокойный дизайн строят на аналоговой схеме, яркий акцент — на комплементарной.
Что такое комплементарные цвета?
Цвета, расположенные напротив друг друга на круге: синий и оранжевый, красный и зеленый, желтый и фиолетовый. Они дают максимальный контраст, поэтому один обычно берут основным и приглушенным, а второй используют точечно как акцент.
Сколько цветов использовать в дизайне?
Для большинства проектов достаточно трех плюс нейтральные — белый, серый, черный. Распределять их удобно по правилу 60-30-10: основной цвет занимает большую часть площади, дополнительный меньше, акцентный — минимум.
Как быть с оттенками, которых нет на круге?
Определить, к какому сектору оттенок ближе всего, и применять правила круга к нему. Бордовый относится к красно-фиолетовой зоне, мятный — к сине-зеленой, бежевый — к желто-оранжевой. Дальше работать насыщенностью и светлотой.
Подходит ли круг Иттена для веб-дизайна?
Как инструмент подбора гармонии — да. Но он построен на модели смешивания красок, а экраны используют другую цветовую модель, поэтому противоположные цвета круга не всегда совпадают с дополнительными на дисплее. Финальную палитру проверяют на реальном макете.
Как проверить, читается ли текст на выбранном фоне?
Через коэффициент контрастности. По международным рекомендациям для обычного текста он должен быть не ниже 4,5 к 1, для крупного текста и элементов интерфейса — не ниже 3 к 1. Посчитать его можно бесплатными онлайн-сервисами.
Какие сервисы помогают подбирать палитру?
Adobe Color, Coolors, Paletton, Color Hunt и генератор палитр Canva. Большинство из них построены на том же принципе, что и круг Иттена, но с расширенным набором оттенков и возможностью сразу сохранить палитру.
