Коло Іттена: що це і як правильно поєднувати кольори

Хочете навчитися створювати гармонійні поєднання кольорів швидко і без особливих зусиль? У цьому допоможе коло кольорів Іттена. Редакція MC.today підготувала інструкцію, як ним користуватися.

Зміст:

• Як з’явилося коло Іттена
Курс-професія "Дизайнер інтер'єрів" від Skvot.
Велика практична програма для всіх, хто хоче засвоїти професію дизайнера інтер'єрів і заробляти на реальних проєктах відразу після курсу. Досвідом та інсайтами діляться одразу три лектори.
Програма курсу
• Як влаштовано коло Іттена
• Колірні схеми на колі Іттена
• Навіщо потрібне коло Іттена


• Як працювати з безліччю відтінків
• 3 інструменти, які допоможуть автоматично підібрати палітру 

Як з’явилося колірне коло Іттена 

Спроби розібратися в гармонії кольорів та поєднати видимі кольори в універсальну систему робили ще Ньютон, Гете, Оствальд. Їхні кольорові кола збереглися для історії, але для практики фахівці з візуалу воліють використовувати коло Іттена.

Вперше кольорове коло Іттена з’явилося у книзі «Мистецтво кольору» , виданої 1921 року, коли художник Йоханнес Іттен викладав у Баухаусі (Державна вища школа будівництва та формоутворення в Німеччині. – Прим. ред.). 

У цій роботі автор описав принципи роботи з кольором та запропонував свою версію кольорового кола. Він не претендував на звання першопрохідника в цій темі, а відкрито говорив про те, що систематизував праці попередників і їх по-своєму інтерпретував.

Джерело

Іноді коло Іттен називають ще кольоровим колесом або замкнутим спектром.

Як влаштовано кольорове коло Іттена

Воно є круговою схемою з дванадцяти кольорів. У центрі кола Іттена є три кольори, які вважаються основними, їх ще називають первинними. Це червоний, синій та жовтий. Всі відтінки, які ми бачимо, – результат поєднання основних кольорів. 

Ще в колі є складові або вторинні кольори. Щоб їх отримати, треба змішати два із трьох основних кольорів. До вторинних кольорів відносять помаранчевий, фіолетовий та зелений.

Якщо змішати основний та вторинний кольори, які знаходяться на колі поряд, то вийде третинний колір. Третинних кольорів шість: синьо-зелений, синьо-фіолетовий, червоно-фіолетовий, червоно-оранжевий, жовто-оранжевий та жовто-зелений. 

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

Джерело

Кольорові схеми на колі Іттена

Основних комбінацій на колі Іттена шість. Будуються вони так.

Комплементарні (додаткові, контрастні) кольори

Таке поєднання кольорів можна знайти, якщо провести пряму лінію через коло. Кольори, що знаходяться навпроти один одного – компліментарні. Наприклад, зелений та червоний, червоно-оранжевий та синьо-зелений. 

Джерело

Такі поєднання не варто використовувати в рівних пропорціях, адже кольори перебиватимуть та заглушатимуть один одного. Комплементарні кольори добре підходять, коли потрібно наголосити. Один із кольорів стає основним, а інший береться у зовсім невеликій кількості. Як у прикладі: фіолетовий – основний, жовтий – акцентний.

Джерело

Класична тріада

Щоб збудувати таку колірну схему, треба намалювати рівносторонній трикутник. Його вершини і будуть кольорами класичної тріади. Такий варіант поєднання кольорів вибирають тоді, коли потрібний м’який контраст. 

Джерело

Щоб поєднання виглядало гармонійно, намагаються вибрати лише один яскравий колір, а два – приглушені. У прикладі бачимо яскравий відтінок фіолетового, а відтінки зеленого і помаранчевого приглушені.

Джерело

Аналогічне поєднання

Цей варіант будується із трьох-п’яти кольорів. Головна умова – на кольоровому колі Іттена вони мають бути розташовані поруч. 

Джерело

Коли використовується така схема, виходить досить стримане поєднання кольорів, приємне, спокійне та елегантне. На фото основний колір – жовтий, а на його тлі деталі різних відтінків зеленого, червоного та фіолетового.

Джерело

Прямокутна схема

Щоб створити таку схему кольорів, в коло Іттена треба вписати прямокутник. 

Джерело

Поєднання привертає увагу, але залишається досить м’яким і не втомлює очі за рахунок того, що кожні два кольори компліментарні. Якщо хочеться ще більше пом’якшити результат, основним можна вибрати один колір, а інші використовувати як акценти.

В інтер’єрі на фото найяскравіший колір – помаранчевий, представлений у різних відтінках. А синій та блакитний тут приглушені.

Джерело

Квадратна схема (зошит)

Таке поєднання будується на основі чотирьох кольорів, що рівновіддалені один від одного на колі Іттена.

Джерело

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

Основа інтер’єру на фото – сірий колір. На його тлі розставлено акценти різних відтінків: синього, червоного, зеленого, жовтого.

Джерело

Навіщо потрібне колірне коло Іттена

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

Так ось, коло Іттена дозволяє швидше підбирати гармонійні поєднання кольорів, зокрема додаткових. Цей інструмент застосовують у таких сферах:

• фотографія;
• дизайн одягу та інтер’єрів, сайтів, поліграфії;
• живопис;
• декорація. 
Онлайн-курс "Тестування API" від robot_dreams.
Навчіться працювати з API на просунутому рівні та проводити навантажувальні тестування, щоб виявляти потенційні проблеми на ранніх етапах розробки.
Програма курсу і реєстрація

Коло структурує кольори і відтінки і дозволяє підкорити їх логіці сприйняття кольору. Тобто з його допомогою можна створити оптимальну гармонію кольорів або контраст. 

Картинка, створена за допомогою кола, буде не тільки професійно грамотною, а й приємною для очей. Отже такий творчий продукт має більше шансів бути комерційно успішним. 

Наприклад, сайтом з вдалим кольором приємніше користуватися. І ймовірність того, що відвідувач затримається на ньому і вчинить потрібну власнику дію (купівля, передплата), зростає. Яскравий приклад – сайт ASOS: мінімум кольорів, помітні контрасти, ненав’язливі акценти. 

Серед брендів, які будують свій візуал на основі кола Іттена: Burger King, Facebook, KFC, Skype, IBM.

Як працювати з безліччю відтінків

Коло Іттена – зручна та корисна база, на основі якої можна будувати поєднання кольорів. Але цей інструмент найчастіше не може бути єдиним, адже у колі лише дванадцять кольорів. 

Щоб працювати з різноманіттям відтінків, коло Іттена можна використовувати як допоміжну технологію.

Наприклад, якщо потрібно знайти контрастне поєднання з м’ятним, якого на колі немає, можна зрозуміти, що цей відтінок – похідний від зеленого та блакитного. Значить, контрастними до нього будуть кольори з протилежного боку кола: рожевий та його відтінки, помаранчевий, кораловий.

3 онлайн інструменти, які допоможуть автоматично підібрати палітру 

Зараз є програми, які допомагають автоматично сформувати вдалі колірні поєднання. Їхня робота багато в чому ґрунтується на принципах кола Іттена, але від користувача вимагається мінімум дій. 

Серед таких інструментів:

• Adobe Color CC . Зручний сервіс, в якому можна створювати колірні схеми за допомогою різних систем та переглядати збережені раніше панелі.
Онлайн-курс "Архітектура високих навантажень" від robot_dreams.
Досвід та інсайти від інженера, який 12 років створює програмне забезпечення для Google.
Програма курсу і реєстрація
• ColoRotate . Програма та версія для ПК дозволяють створювати палітри, а також використовувати готові та редагувати їх під свої вимоги.
• Coolors . Ще один сайт для роботи з палітрами кольорів. Зручно те, що кольори можна вибрати із завантаженого зображення. Також є можливість скористатися галереєю палітр.

Після того, як ви зрозуміли принцип роботи кола Іттена, можна починати практикуватися. Згодом коло як таке буде вже не потрібне: постійні тренування розвивают й ви зможете без додаткових інструментів відрізняти гармонійні поєднання від невдалих.