×

Цветовой круг Иттена: что это такое и как им пользоваться

Россия +7 (495) 139-20-33
Шрифт:
0 2259
Подпишитесь на нас в Telegram

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

Кто такой Иттен 

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

Иоханнес Иттен – швейцарский художник и теоретик искусства, который преподавал теорию цвета в Баухаусе. В 1961 году он опубликовал учебник «Искусство цвета», который до сих пор лидирует в подборках книг для дизайнеров.

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

Освойте фундаментальную дизайн-профессию до продвинутого уровня на курсе «Профессия графический дизайнер». Вы досконально изучите Photoshop, Figma и Illustrator, получите опыт на реальных проектах. 

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

Литография с цветовым кругом Иттена

Зачем нужен круг Иттена

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

Где может пригодиться круг Иттена: 

  • В UX и веб-дизайне

Чтобы найти подходящие сочетания цветов и веб-элементов для интерфейсов сайтов и приложений: меню, кнопок, попап-форм.

  • В графическом дизайне

Чтобы подобрать корпоративные цвета для бренда, палитру для упаковки товара и рекламной продукции.

  • В дизайне одежды

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

  • В дизайне интерьеров

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

Научитесь делать дома и квартиры красивыми и удобными на курсе «Профессия дизайнер интерьеров». Во время обучения вы разработаете два полноценных дизайн-проекта с подробной документацией. 

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

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

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

Круг Иттена в современной адаптации

В круге 12 цветовых секторов: 

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

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

Первичные цвета на круге Иттена

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

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

Вторичные цвета на круге Иттена

Третичные цвета – желто-зеленый, желто-оранжевый, сине-зеленый, красно-фиолетовый, сине-фиолетовый, красно-фиолетовый. Они получаются при смешении первичного и вторичного цветов. 

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

Третичные цвета на круге Иттена

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

Освойте IT-специальность, где не нужно программировать, на курсе «Профессия UX/UI-дизайнер с нуля до ПРО». Это одна из самых популярных отраслей веб-дизайна в мире. 

Комплиментарное сочетание цветов

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

Один сделайте основным, а второй – дополнительным: так вы сможете гармонично выделить нужный объект. 

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

Пример комплементарного сочетания цветов на круге Иттена

Контрастная триада цветов

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

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

Контрастная триада цветов на круге Иттена

Классическая триада цветов

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

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

Классическая триада цветов на круге Иттена

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

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

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

Аналоговая триада цветов на круге Иттена

Тетрада цветов

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

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

Схема тетрадой цветов на круге Иттена

Прямоугольное сочетание цветов

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

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

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

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

Шестиугольная схема

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

Научитесь создавать дизайн квартир, кафе и офисов на курсе от Contented «Профессия дизайнер жилых и коммерческих интерьеров». Вы создадите пять проектов и пройдете онлайн-стажировку в дизайн-студии. 

Как подобрать оттенки, которых нет на схеме

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

Круг Иттена – это упрощенное решение, но его можно использовать шире.

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

Помните о яркости и насыщенности. Сравните оттенки «Тиффани» и «Небесно-бирюзовый» – сразу заметите разницу. 

Научитесь общаться с пользователями на одном языке и начните карьеру в продуктовом дизайне на курсе «Профессия UX/UI-дизайнер» от Contented. У вас будет достаточно знаний, чтобы выполнять первые самостоятельные проекты уже на 4 месяце обучения на курсе.

Программы для подбора цветов

Есть инструменты, которые помогут легко подобрать нужные цвета и оттенки. 

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

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

Интерфейс Adobe Color

Интерфейс Adobe Color

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

Интерфейс Paletton

Интерфейс Paletton

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

Интерфейс  getColor

Интерфейс  getColor

Аналогичен Paletton, но есть русскоязычное меню.

Интерфейс ColorScheme

Интерфейс ColorScheme

А если не пользоваться кругом Иттена? 

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

Иттен писал в своих трудах: «Если вы, не зная законов цвета, способны создавать шедевры, то ваш путь заключается в этом незнании. Но если вы, не зная этих законов, не способны создавать шедевры, то вам следует позаботиться о получении соответствующих знаний».

Не знаете, каким именно дизайнером хотите стать? Попробуйте 5 увлекательных дизайн-профессий и учитесь той, что понравится, на курсе «Старт в дизайне». 

(Голосов: 2, Рейтинг: 5)
0
0

Есть о чем рассказать? Тогда присылайте свои материалы в редакцию.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Продуктовый подход в SEO: новая эпоха поисковой оптимизации
Борис
1
комментарий
0
читателей
Полный профиль
Борис - Почитал и спич очень близок к тому, что гугловоды говорят у себя на курсере. К комменту ниже: инклюзивность, доступность - это часть маркетинга и seo становится. Удивился даже, что в снг о таком слышали)))))
Альманах фатальных ошибок b2b-сайта: как владельцы бизнеса обрекают сайты на бесславное существование. Часть первая
Сергей Ерофеев
3
комментария
0
читателей
Полный профиль
Сергей Ерофеев - Спасибо за комментарий! Вы правы, если за CMS следит заинтересованный профессионал - риски минимальны. Но мы же с вами понимаем, что: а) Не каждый разработчик делает все, как "для себя". б) После создания сайта разработчик редко остается на проекте в) Часто разработчик не является маркетологом. В этом случае принцип "функционал работает и этого достаточно" может быть на первом месте. Мы тоже видели большое количество хороших и качественных проектов на бесплатных CMS, но проблемных проектов мы видели сильно больше. Просто статистика.
Почему не стоит отказываться от SEO на этапе разработки
Максимус
3
комментария
0
читателей
Полный профиль
Максимус - Я уже сделал и сегодня в первый класс отвёл!
Белые и серые методы продвижения. Тренды 2023
sarges
2
комментария
0
читателей
Полный профиль
sarges - Нужно учитывать и тот факт, что со временем методы продвижения меняются и необходимо подстраиваться под новые реалии. Посоветую заглянуть на zenlink.ru/blog/kak-izmenilsja-internet-marketing-za-10-let и почитать статью, там рассказывается о том, как изменился интернет-маркетинг за последние 10 лет, какие сейчас тенденции и какие прогнозы в этой сфере.
Как показывать рекламу посетителям сайтов конкурентов
Павел
2
комментария
0
читателей
Полный профиль
Павел - Спасибо за комментарий. Гипотеза была в том, что с указанными счетчиками конкурентов показы будут не просто похожей аудитории их сайтов (как при рекламе по доменам), а именно на аудиторию которую Яндекс для себя разметил как целевая дл сайтов конкурентов. Важно, это гипотеза. А про белые нитки, как говорится, доверяй, но проверяй))
Как автоматизировать мессенджеры для бизнеса в CRM-системе
Алиналина
1
комментарий
0
читателей
Полный профиль
Алиналина - Кстати да. Но мы зарегались, CRMка реально интересная
Как мы увеличили для клиента трафик из поиска в 7 раз. Кейс
Кирилл Половников
2
комментария
0
читателей
Полный профиль
Кирилл Половников - Оба этих статуса (редирект и малополезная) преобладали в качестве проблем с индексацией. Помогла работа с .htaccess (в нем были ошибки и его чистили), работа над корректировкой редиректов, каноникалами и прочими техническими ошибками. Нельзя сказать, что только редиректы были ключевым препятствием.
Почему сайтам нужно переезжать с конструкторов на полноценные CMS
Алексей
1
комментарий
0
читателей
Полный профиль
Алексей - Странно, что статья называется как выбрать CMS систему а описаны в большей части конструкторы...
Как монетизировать трафик с помощью push-подписок
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Полностью согласен! Сейчас прикрыли регистрацию без активации ака, активация только через менеджера, но это говорит лишь о том что качество должно быть выше. Сотрудничаю, плюсую!
Кейс MediaNation: увеличили еженедельный трафик автомобильной компании на 50% за год и вышли в топ поиска по 300 запросам
Игорь Скляр
1
комментарий
0
читателей
Полный профиль
Игорь Скляр - Действительно, изначально рост был именно по информационным запросам. Но рост позиций и трафика по информационным запросам положительно повлиял и на связанные позиции по коммерческим запросам и сдвинул видимость с мёртвой точки
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
115
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
63
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!