Як поєднувати кольори правильно

Час читання: 16 хвилин

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

Давай розглянемо які характеристики є у кольору, щоб розуміти, як з ним працювати далі. Робити ми це на прикладі колірної моделі HSV. Тільки не лякайся, якщо ти працював у фотошопі, фігмі чи іншому редакторі, ти точно зустрічав ці характеристики.

HSV (або HSB) — це колірна модель, в якій характеристиками кольору є:
  • Hue (H) — колірний тон, (наприклад, зелений, червоний або синьо-блакитний)
  • Saturation (S) — насиченість (світло-зелений або насичений неоново зелений)
  • Value (V) — значення кольору; або Brightness (B) — яскравість кольору (світло-зелений або темно-зелений)

(нижче два відео, як працювати з кольором: у Figma та Photoshop)

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

Давай розглянемо ближче. Є три групи кольору (дивись картинку нижче):

  1. Кольори першого порядку. Це жовтий, синій, червоний. Це так звані чисті кольори, з яких утворюються всі інші. Самі собою вони супер незалежні і не мають пігментів один одного. Тому вони супер контрастні.
  2. Кольори другого порядку. Фіолетовий, зелений та помаранчевий. Вони утворюються шляхом змішування кольорів першого порядку. Тобто жовтий+червоний=оранжевий. Таким чином, вони вже більше поєднуються між собою: контраст є, але він невеликий.
  3. Додаткові кольори. Кольори, які вийшли шляхом змішування кольорів другого порядку у різних пропорціях. Зазвичай ці кольори плавно переходять одне одного і сприймаються фоново.
А колірні гармонії — це теорія про те, які кольори добре гармонують один з одним на основі колірного кола Іттена.

Неправильним поєднанням кольорів можна зіпсувати не тільки класний дизайн, а й контент.
А за допомогою колірних гармоній (їх всього п'ять) ти зрозумієш принципи поєднання кольорів і зможеш швидко генерувати палітру, яка точно працюватиме. З часом і практикою, ти робитимеш це інтуїтивно.

Переходимо до колірних гармоній трохи детальніше. У прикладах ми використовуємо Adobe color, це незамінний інструмент, який генерує колірні гармонії (і показує навіть код кольору).

Подивися відео, як з ним працювати, щоб далі був зрозуміліший опис кожної гармонії.
Основних гармоній п'ять: монохромна (1 колір), комплементарна (2 кольори), трикутна (3 кольори), квадратна (4 кольори) і послідовна (поряд кольору, що стоять). Розглянемо кожну їх.

1. Монохромна гармонія. 1 колір

Поєднання кольорів у межах одного колірного тону. Беремо будь-який колір і підбираємо його відтінки.

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

Це поєднання двох протилежних кольорів на колірному колі. Зазвичай воно досить контрастне, виглядає жваво та енергійно, тому сильно впадає в око в стрічці, і це відмінний графічний прийом. Але кольори повинні бути не просто протилежні, а й контрастні (приклад у добірці на 3-й картинці).

Також варто врахувати, що контрастне комплементарне поєднання кольорів не підходить для великої кількості тексту. Порівняй (4 фото). Оскільки поєднання кольорів дуже контрастне, а лінії буків дуже тоненькі — текст швидше буде рябити в очах, ніж виконувати свою функцію привернення уваги. Тобто для заголовків (які зазвичай товстіші та більші) цей прийом хороший, але не для тонких літер.
3. Трикутна гармонія. 3 кольори

Це гармонія, яка будується на точках трикутника (рівнобедренного чи рівностороннього) на колірному колі. У цьому поєднанні бажано використовувати один колір, як основний, а інші як додаткові.

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

Трикутна гармонія виглядає досить цікаво, і при цьому спокійно та приглушено.
4. Квадратна гармонія. 4 кольори

Як і в минулій гармонії, ми беремо квадрат або прямокутник, ставимо його на колір кола і дивимося, яке поєднання нам підходить. З дотриманням тональності.

І не дивлячись на буяння фарб та купи квітів, візуал не виглядає наляписто, він гармонійний та контрастний.
5. Послідовна (аналогічна) гармонія. 4+ кольори, що стоять поруч

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


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

  • якщо хочеш, щоб було супер яскраво, то спробую скористатися комплементарною гармонією (два протилежні кольори) або трикутною.
  • якщо хочеш щось нейтральне на фоні, спробуй взяти монохромну гармонію (у межах одного тону) чи, наприклад, послідовну.
Гармонії допоможуть тобі розпочати роботу, але далі колір не живе сам по собі, а взаємодіє з контентом (текстом, фото, графікою), тому потрібно дивитися та аналізувати загалом.

А тепер порада: щоб колірне коло завжди було під рукою, просто роздрукуй його та наклей у наш кукурудзяний блокнот. Або ось варіант цікавіше: візьми олівці/ручки/фарби та намалюй його самостійно прямо в блокноті. А ще намалюй колірні гармонії, що сподобалися — так ти і поєднання запам'ятаєш краще, і відпочинеш трохи від роботи та навчання :)

Чекатимемо фото малюнків у нашому чаті!
Як поєднувати кольори за допомогою контрасту та нюансу
Колірні гармонії показали нам, як поєднувати кольори за тоном (Hue; тобто із чим правильніше поєднувати червоний — із зеленим чи синім). Тепер потрібно розібратися як поєднувати кольори за насиченістю (Saturation) та яскравістю (Brightness). У цьому нам допоможе прийом контрасту та нюансу.

Контраст — це помітні колірні відмінності.
Нюанс — це ледь помітні відмінності.

Як досягти контрасту?

Контраст світлого та темного.
Мабуть, найголовніше правило — дотримання контрасту: темне на світлому, світле на темному.

Розглянемо приклад нижче.

Салатовий текст (світлий) на фіолетовому фоні (чорний). І навпаки: синій текст (темний) на жовтому фоні (світлий). В обох випадках дотримується контрас.

І ще кілька прикладів. Контраст світлого і темного не обов'язково має на увазі біле тло, чорний текст і навпаки. Темним кольором може бути будь-який, як і світлим. Все залежить від взаємодії кольорів, його насиченості та яскравості.
Контраст за насиченістю.
Це про поєднання кольорів з різною насиченістю (з високою та низькою). Це може бути як відтінок одного тону, і кількох. Дивись приклади у галереї.

Цей прийом відмінно працює як акцент: акцент у тексті, акцент на фото, акцент на графіку і т.д. Або як у прикладі нижче, на решітці #:

Решітка # займає дуже мало місця, але за рахунок того, що вона контрастна до фону, вона виділяється і ми на неї відразу звертаємо увагу. І вона є елементом фірмового стилю, яка виділяє ці сторіс зі стрічки.

А тепер, давай підсумуємо і подивимося, як працювати з контрастом у фігмі:
Нюанс — ледь помітні відмінності у кольорі, фактурі, тональності.

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


Рубрика: розбір прикладів
Давай розберемо як працювати з контрастом з прикладу робіт учасників першого потоку. І одразу запропонуємо рішення. Розглядаємо роботу лише з точки зору кольору.
А тут вдале поєднання тих же кольорів сірого та жовтого (трохи інший відтінок). Контраст світлого на темному дотримується:
Важливо, щоб у твоїх дописах/сторіс дотримувалася правильна ієрархія, тобто, що за чим читати. І колір грає важливу роль у цій місії. Тому слідкуй, щоб дотримувався баланс за кольором та його розміром.

Йдемо далі. Проаналізуй ці історії самостійно і лише потім подивися пояснення у галереї.
Вийшло? Якщо знайшов більше помилок у кольорі, пиши в Кукурудзяний чат :)

Ще один важливий висновок із цього прикладу: перша історія — максимум уваги, ясності у візуальній подачі та інтересу перегорнути далі. Заголовок зливається з фоном, незрозуміла чорна картинка, нікнейм і «‎ооой, ви забрали надто багато моєї уваги, нічого не зрозуміло, я йду далі»‎.
Рубрика: поради
Порада 1. Якщо у тебе кольорова картинка і вона здається надто насиченою, надто важкою, то додай до неї білого або чорного кольору, і картинка стане «легшою». Чорний і білий кольори — ахроматичні (так, звучить складно, але насправді це «безбарвні» кольори, тобто їх немає в колірному колі). Чорний і білий допоможуть пом'якшити всю картину і візуал виглядатиме не таким кислотним.
Порада 2. Але спочатку дай відповідь, на якій картинці бургер виглядає соковитіше?
Мабуть, на другому малюнку з сірим фоном. На першій бургер ніби зливається з тлом і заголовок сприймається головнішим, соковитішим і контрастнішим, ніж сам бургер. А повинен першим кидатися в очі саме бургер, адже це головний тригер на картинці. Чому так сталося?

Тому що бургер та фон знаходяться в одному відтінку та зливаються. А на другому прикладі сірий фон є супернейтральним і за тональністю є контрастним до бургера (контраст світлого та темного).

Але це не означає, що працює лише сірий.

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

Інструменти для роботи з кольором
Користуйся кольоровими гармоніями (коло Іттена) та правилами контрасту/нюансу.

І з часом (і практикою) ти почнеш відчувати колір, підбирати його інтуїтивно, спираючись на контрасти. Ось кілька інструментів, які допоможуть тобі з підбором кольору та палітри кольорів.

1. Adobe Сolor
Ідеальний інструмент для вибору кольорових гармоній. Можна регулювати тональність, яскравість, вибирати основний колір тощо.

Ще один сервіс зі схожим принципом (але не дуже зручним інтерфейсом) paletton. Користуйся яким зручно.
2. Khroma
Вибираєш 50 кольорів із запропонованих і з них пропонують поєднання кольорів для тексту (фон+текст), для постерів, градієнти, палітру кольорів. Класний інструмент з досить яскравими і стильними поєднаннями.
3. Готові палітри colorhunt та coolors
Користуйся, але врахуй, що кожну палітру потрібно пробувати на своєму контенті.

Пограємо?

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

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

Чек-лист:

  • вивчи основні характеристики кольору;
  • роздрукуй собі колірне коло;
  • використовуй колірні гармонії.