Колірна гармонія в UI-дизайні: розбираємося по суті

Більшість «потворних» інтерфейсів, які мене просили виправити, насправді не мають проблеми з кольором у тому сенсі, як це собі уявляють. Окремі кольори там нормальні. Зламаний саме зв’язок між ними — кнопки, посилання, графіки й бейджі добиралися кожен окремо, і ніщо на екрані ні з чим не узгоджується. Оце узгодження і є тим, чим насправді є колірна гармонія. Це не настрій і не вайб; це набір вимірюваних кутових співвідношень на колірному колі, і щойно ви навчитеся їх бачити, ви зможете зібрати палітру за десять хвилин — там, де інакше пішов би тиждень підкручування hex-значень, поки щось нарешті перестане виглядати неправильно.

Це робочий посібник із колірної гармонії в UI-дизайні — як кожна схема будується на колі, до яких конкретних hex-кодів я б потягнувся та яких помилок я бачу (і сам припускався) знову й знову.

Що таке колірна гармонія насправді

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

Причина, чому це важить для інтерфейсів навіть більше, ніж для картини, у тому, що в UI колір має роботу. Палітру тут використовують не декоративно — їй призначають ролі. Модель, якою я користуюся в кожному проєкті, — домінантний, вторинний, акцентний:

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

Грубий розподіл, який я тримаю в голові, — щось на кшталт 60/30/10. Гармонія підказує, які кольори взагалі допускаються до кімнати; розподіл домінантний/вторинний/акцентний підказує, скільки кожного використати. Ті, хто пропускає другу половину, отримують три ідеально гармонійні кольори, що всі кричать на одній гучності, — а це свій окремий вид потворності.

Якщо ви хочете оминути арифметику, генератор колірної палітри будує кожну з цих схем з одного hex-коду й видає значення HSL та RGB — але варто розуміти саму конструкцію, щоб знати, якому результату довіряти.

Комплементарна: два кольори на відстані 180 градусів

Комплементарні пари розташовані строго навпроти одна одної на колі. Візьміть базовий відтінок і додайте 180 градусів. Синій #2563EB проти помаранчевого #EA580C — хрестоматійний приклад, і він хрестоматійний саме тому, що працює: максимальний контраст за відтінком, через що акцент буквально вібрує на тлі.

Саме ця вібрація й робить комплементарні схеми пасткою в UI. Два повністю насичені комплементи, поставлені поруч, б’ються між собою. Розмістіть яскраво-червоний текст на яскраво-зеленому тлі — і око не може заспокоїтися: межа наче мерехтить. Рішення — ніколи не використовувати обидва на повну силу. Нехай один буде великою домінантною поверхнею, сильно знесиченою чи затемненою, а комплемент залиште як маленький насичений акцент.

Тож на практиці: домінант — приглушена поверхня з синім підтоном на кшталт #1E293B, основний текст — майже білий, а комплемент з’являється лише на основній кнопці як #F97316. Це й є комплементарна схема, але ви ніколи б не описали її як «синій з помаранчевим, що б’ються», бо ви ніколи не дали їм рівну площу. Stripe і Linear спираються саме на такий єдиний високонтрастний акцент на спокійному, майже монохромному полі.

Аналогова: сусіди на колі

Аналогові кольори лежать у межах приблизно 30 градусів один від одного — три суміжні скибки кола, як-от #0EA5E9, #0E7490, #0D9488 (від небесно-синього через блакитний до бірюзового). Оскільки в них спільний базовий відтінок, їх майже неможливо зіпсувати. Уся схема відчувається як один колір, що дихає.

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

Тріадна: три кольори на відстані 120 градусів

Тріадні схеми використовують три відтінки, рівномірно віддалені на 120 градусів, що утворюють рівносторонній трикутник на колі. Класика — червоний–жовтий–синій, але сучасніша й дружніша до UI тріада — це щось на кшталт #6366F1 (індиго), #10B981 (смарагдовий), #F59E0B (бурштиновий).

Тріада водночас яскрава і збалансована, що звучить ідеально, аж поки ви не спробуєте використати всі три кольори порівну й не отримаєте щось схоже на дитячу іграшку. Дисципліна, якої вимагає тріада, — це нещадний розподіл ролей. Виберіть один із трьох як домінантний брендовий колір, понизьте другий до підтримувальної/вторинної ролі, а третій використовуйте лише як ощадливий акцент. Багато продуктових палітр, які ви б нізащо не назвали «тріадними», насправді такі: брендове індиго, смарагдовий стан успіху, бурштиновий стан попередження — це тріада, що виконує семантичну роботу. Ось так тріадна гармонія ховається на видноті, і це найрозумніший спосіб її застосувати: нехай три кольори відображають три значення, а не три декорації.

Спліт-комплементарна: та, до якої я тягнуся найчастіше

Спліт-комплементарна схема бере базовий колір, знаходить його комплемент, а потім використовує два кольори, суміжні з цим комплементом, замість самого комплемента. Тож замість синього проти чистого помаранчевого ви б поєднали синій #2563EB із #F97316 та #EAB308 — двома відтінками, що фланкують помаранчевий.

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

Тетрадна й квадратна: чотириколірні схеми для сміливих

Тетрадна (іноді її називають подвійно-комплементарною) використовує дві комплементарні пари — чотири кольори, що утворюють прямокутник на колі. Квадратна — окремий випадок, коли ці чотири кольори рівномірно віддалені з кроком 90 градусів.

Буду чесним: чотириколірні гармонії рідко є правильною відповіддю для сфокусованого інтерфейсу. Чотири відтінки порівнянної сили — це багато конкуруючого сигналу, і збалансувати їх — справжня робота. Своє місце вони заробляють у візуалізації даних — графіки, теги, багатокатегорійні дашборди, — де вам справді потрібні чотири й більше розрізнюваних, рівноважних кольорів, що при цьому відчуваються як набір. Для них квадратна схема на кшталт #3B82F6, #22C55E, #EF4444, #A855F7 дає чотири чітко відокремлювані категорії. Для брендингу й верстки ставтеся до тетрадної як до «виберіть два з цих чотирьох, щоб реально використати, а решту тримайте в резерві».

Монохромна: один відтінок, багато ролей

Монохромна — це насправді не співвідношення на колі, а один відтінок, розгорнутий у повний тональний діапазон через зміну світлоти та насиченості. Один синій стає #EFF6FF, #BFDBFE, #3B82F6, #1D4ED8, #1E3A8A: фони, бордюри, заливки, текст — усе з одного батьківського кольору.

Кожна серйозна дизайн-система у своєму ядрі монохромна, навіть коли бренд використовує кілька відтінків, бо для кожного кольору вам потрібна шкала з 9–11 кроків, щоб упоратися з поверхнями, наведеннями, неактивними станами й темною темою. Монохромна схема безпомилкова щодо цілісності й небезпечно легко стає пласкою — якщо кожен крок надто близький за світлотою, UI втрачає ієрархію. Розтягуйте шкалу широко й перевіряйте, що суміжні кроки справді розрізняються.

Помилки, які трапляються знову і знову

• Використання гармонійних відтінків на повній насиченості по великих площах. Гармонія добирає відтінки; вона не каже використовувати їх на 100%. Великі поверхні майже завжди потребують знесиченої чи притлумленої версії гармонійного відтінку, а не чистого.
• Сприйняття гармонії як усієї роботи. Гармонійна палітра без співвідношення домінантний/вторинний/акцентний — це просто збалансована суперечка, де всі кричать. Призначте ролі та площі.
• Цілковите забування про доступність. Коло нічого не каже про контраст. Два гармонійні кольори можуть бути зовсім нечитабельними разом. Основний текст потребує коефіцієнта контрасту 4.5:1 відносно фону (3:1 для великого тексту), а елементи UI й графіка — щонайменше 3:1 відносно сусідніх кольорів, згідно з рекомендаціями WCAG 2.1 щодо контрасту. Гармонія й контраст — незалежні задачі; розв’язуйте обидві.
• Дозвіл «гармонійному» переважати над «осмисленим». Ваші стани успіху, попередження й помилки несуть значення. Зелений-«можна» і червоний-«стоп» іноді ламають правило гармонії, і це нормально. Комунікація щоразу перемагає геометрію.

Якщо взяти з цього одну річ: гармонія — це легша половина. Коло видасть вам пов’язані на вигляд кольори секунд за тридцять. Майстерність — це все, що йде далі: рішення, який колір домінантний, наскільки мало акценту можна собі дозволити та чи зможе хтось зі слабким зором узагалі прочитати результат. Почніть зі спліт-комплементарної схеми, тримайте акцент рідкісним, перевіряйте коефіцієнти контрасту — і ви будете попереду більшості інтерфейсів, що виходять сьогодні.