12 базовых секторов
Ниже — упрощённая цифровая модель для быстрого копирования кодов; точные оттенки в проекте подстраивайте под экран и брендбук.
Интерактив
Круг из двенадцати базовых цветов
Внешнее кольцо — двенадцать опорных оттенков по логике Иттена (от красного по часовой стрелке). Клик по сектору копирует цвет.
Теория
Что такое круг Иттена
Швейцарский художник и педагог Иоганнес Иттен (Johannes Itten), преподаватель Баухауса, систематизировал работу с цветом: в центре модели — три первичных цвета (красный, жёлтый, синий), на кольце — вторичные (оранжевый, зелёный, фиолетовый) и третичные смеси между соседними оттенками. Белый, чёрный и серый Иттен выносил в отдельную ахроматическую группу: они сочетаются друг с другом и с любыми хроматическими тонами.
По кругу удобно строить схемы: комплементарную (линия через центр), триаду (равносторонний треугольник), аналоговую (соседние сектора), тетраду (квадрат на кольце) и другие — они помогают избежать дисгармонии и «крика» палитры в интерфейсе и печати.
Гармонии и контраст
Иттен подробно описал контрасты и психологию восприятия; для практики в вебе полезно сочетать круг с проверкой контраста и палитрой студии.
Дальше — студия
Для динамического круга HSL, экспорта CSS и проверки доступности перейдите в основной инструмент на главной странице.
Читать дальше
Подробнее про цветовой круг Иттена онлайн
Цветовой круг Иттена: полное руководство по теории и практике
Один инструмент, разработанный в начале XX века, до сих пор остаётся отправной точкой для дизайнеров, художников и всех, кто работает с цветом профессионально. Разбираемся, как устроен круг Иттена и как применять его на практике.
История: кто такой Иоганнес Иттен и почему это важно
Иоганнес Иттен — швейцарский педагог и художник, один из ключевых преподавателей легендарной немецкой школы Баухаус. Именно там в 1920-х годах он разработал свою систему работы с цветом, изложив её в книге «Искусство цвета». Иттен считал, что цвет — это не просто техническая характеристика, а язык, способный вызывать конкретные чувства и ассоциации у человека.
Его главная идея состояла в том, что цвет воспринимается субъективно, а значит — контекст имеет решающее значение. Один и тот же оранжевый выглядит совершенно иначе рядом с чёрным и рядом с белым. Именно эта наблюдательность легла в основу матрицы, которую мы называем кругом Иттена.
Иттен утверждал: понять цвет можно только через сравнение. Изолированный оттенок не существует — он всегда взаимодействует с окружением и трансформируется под его влиянием.
Как устроена матрица: три уровня цвета
Круг состоит из 12 оттенков, разделённых на три концентрических уровня. Ахроматические цвета — белый, чёрный, серый — в матрицу не включены, поскольку Иттен считал их универсальными и совместимыми с любым хроматическим оттенком.
Первичные цвета
Красный, жёлтый, синий — базовая триада в центре круга. Это исходный материал: смешивая их в разных пропорциях, можно получить любой оттенок спектра.
Вторичные цвета
Оранжевый, зелёный, фиолетовый — получаются при попарном смешивании первичных. Красный + жёлтый = оранжевый, синий + жёлтый = зелёный, красный + синий = фиолетовый.
Третичные цвета
Шесть переходных оттенков: жёлто-оранжевый, красно-оранжевый, красно-фиолетовый, сине-фиолетовый, сине-зелёный, жёлто-зелёный. Образуются соединением соседних первичного и вторичного цветов.
Цвет и психология: почему это работает
Влияние цвета на восприятие — не маркетинговый миф, а хорошо задокументированный феномен. Психолог Макс Люшер связывал базовые цвета с фундаментальными состояниями человека: тёмно-синий ассоциируется с покоем и ночью, яркий жёлтый — с активностью и светом.
Ещё один исследователь, Гаральд Браэм, зафиксировал, что красный цвет стимулирует к действию, фиолетовый устойчиво связан с образом богатства и власти, а пастельная палитра в целом воспринимается как успокаивающая. Несочетаемые оттенки, напротив, провоцируют тревогу и раздражение — это эффект визуального диссонанса.
На практике это означает следующее: выбор палитры для интерфейса, упаковки или интерьера напрямую влияет на поведение человека — быстро он принимает решение или нет, остаётся ли он на сайте, какое первое впечатление у него складывается.
Шесть классических схем подбора цветов
Круг Иттена позволяет использовать геометрические фигуры как инструмент выбора: достаточно наложить нужную форму на матрицу — и вы получите гармоничное сочетание.
Комплементарная
Два цвета, расположенных строго напротив друг друга. Максимальный контраст, хороший выбор для акцентов. Важно не делить их поровну — контраст «гасит» сам себя.
Триада
Равносторонний треугольник на круге. Три равноценных цвета, образующих контрастную, но сбалансированную композицию.
Аналоговая триада
Три-пять соседних оттенков. Плавные переходы без резких контрастов — идеально для спокойного, элегантного оформления.
Тетрада
Квадрат на круге, четыре оттенка. Две основные и две дополнительные пары. Подходит для ярких, насыщенных решений.
Прямоугольник
Как тетрада, но цвета располагаются ближе друг к другу. Более мягкий результат, подходит для уравновешенных и сдержанных композиций.
Буква Х
Четыре близких оттенка на противоположных частях круга. Самый деликатный четырёхцветный вариант — для неброских, нейтральных решений.
Кому и зачем нужен круг Иттена
- Веб- и UX/UI-дизайнеры
- Графические дизайнеры
- Иллюстраторы и художники
- Дизайнеры интерьеров
- Бренд-специалисты
- Фэшн-дизайнеры
- Декораторы и флористы
- Маркетологи и арт-директора
Что делать с оттенками, которых нет в круге
Круг содержит 12 базовых цветов, но реальная палитра безгранична. Например, бирюзовый — он расположен между сине-зелёным и зелёным. Чтобы найти его гармоничную пару, достаточно мысленно провести линию через границу между этими секторами к противоположной части матрицы. В результате вы получите ориентир, а точный оттенок — его насыщенность, теплоту и яркость — определяете уже самостоятельно, исходя из задачи.
Круг — это не жёсткий регламент, а система координат. Он указывает направление, а не диктует точный результат.