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

Колесо — це компас

Кожне правило гармонії визначає позиції на 12-сегментному колірному колесі. Ви вибираєте базовий колір, а правило вам показує, де на колесі взяти решту. Правила не визначають насиченість або світлість — ці виміри ви налаштовуєте самостійно.

Доповнювальні (протилежні кольори)

Два кольори прямо навпроти на колесі: червоний та голубий, помаранчевий та синій, фіолетовий та жовтий. Максимальний контраст. Використовується, коли вам потрібно щось виділити на фоні — кнопка CTA на сторінці приземлення, виділення на діаграмі даних.

Підводний камінь: при повній насиченості доповнювальні пари некомфортно вібрують. Пом'якшіть один (зменшіть насиченість, зробіть світлішим або темнішим) і використовуйте інший як акцент.

Триадна (три рівномірно розташовані)

Три кольори на інтервалах 120°: червоний-жовтий-синій, помаранчевий-зелений-фіолетовий. Збалансована та енергійна. Популярна для ілюстрацій, дитячих продуктів і брендів, які хочуть виглядати яскраво без перевищення.

Підводний камінь: всі три при однаковій насиченості конкурують за увагу. Виберіть один для домінування (60% вашого дизайну), один для підтримки (30%), один для акцентів (10%).

Аналогічна (сусідні на колесі)

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

Підводний камінь: аналогічні палітри можуть виглядати плоскими. Додайте доповнювальний акцент (невелику дозу протилежного вашому середньому кольору) для точок контрасту.

Розділена доповнювальна (два близько-протилежні)

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

Тетрадна (дві доповнювальні пари)

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

Підводний камінь: тетрадні палітри легко читаються як хаотичні. Вирішіть, який колір несе ідентичність, і понизьте інші три до менших ролей.

Монохроматична (один колір, багато значень)

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

Більшість мініміалістичних SaaS-інструментів використовують монохроматичну схему — бренд це один синій, все інше — відтінки сірого.

Трендові (добре порушувати правила)

Сьомий режим, який ми включаємо в наш генератор колірних палітр: 177 вручну підібраних палітр від спільноти ColourLovers, Coolors та дизайнерів індустрії. Ці палітри часто навмисне порушують класичні правила — вони працюють, тому що дизайнер мав конкретні творчі наміри — і вони є чудовим джерелом натхнення, коли чиста теорія створює щось занадто безпечне.

Що вибрати?

Редакційна, спокійна, природна → аналогічна.
Ударність, CTA, енергія → доповнювальна або розділена доповнювальна.
Яскравий бренд, ілюстрація → триадна.
Багата редакційна, сміливі кампанії → тетрадна.
Мініміалістичний UI, багато фото → монохроматична.
Відчуваєте застій → переглядайте Трендові.

Поза правилами

Всі сім гармоній ігнорують два критичні виміри: контрас (чи можна читати текст на цьому фоні?) та семантичний колір (червоний означає небезпеку в західному UI незалежно від теорії). Завжди запустіть вашу фінальну палітру через перевірку WCAG контрасту — генератор колірних палітр показує вам AA/AAA коефіцієнти кожної пари одним кліком — і не вибирайте колір небезпеки лише тому, що колесо каже, що він виглядає гарно.

Правила — це стартові точки, а не кінцеві пункти. Згенеруйте п'ять палітр, критикуйте їх, налаштовуйте. Хороші палітри приходять від ітерації, а не від одного кидка кубика.

Правила колірної гармонії: доповнювальні, триадні, тетрадні та коли використовувати кожну