Як обрати колірну палітру: покроковий посібник

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

Далі — робочий процес, яким я насправді користуюся, від початку до кінця, з реальними hex-кодами й компромісами на кожному кроці. Усе це можна прогнати з колірним колом і перевірячем контрасту — я вкажу, де генератор колірних палітр робить арифметику за вас, але метод важливіший за інструмент.

Крок 1: Вирішіть, звідки походить палітра

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

• Бренд. У вас уже є колір логотипа, фіксований первинний колір або наявна айдентика клієнта. Палітра має жити навколо відтінку, який ви не вибираєте. Це найпоширеніший реальний випадок і найбільш обмежений.
• Настрій. Ви хочете, щоб продукт відчувався певним чином — надійним, енергійним, спокійним, преміальним. Тут ви обираєте кольори для дизайну спочатку за емоцією, а відтінок — потім. Фінтех-застосунок схиляється до холодного й стриманого; застосунок для навчання дітей — до теплого й насиченого.
• Контент. Сам продукт диктує його. Фотопортфоліо хоче майже нейтральне обрамлення, щоб роботи самі постачали колір. Дашборд даних потребує набору розрізнюваних категорійних кольорів більше, ніж атмосфери.
• Якірний колір. Ви закохалися в один конкретний hex — скажімо, глибокий бірюзовий #0F766E — і будуєте назовні від нього.

Більшість людей пропускають цей крок і тихо за замовчуванням обирають «якірний колір», не зізнаючись у цьому, що нормально, якщо це навмисний вибір. Пастка — обрати колір настрою емоційно, а потім виявити, що він б'ється з вашим брендом. Назвіть свою стартову точку вголос. Якщо це настрій, варто почитати психологію кольору в брендингу, перш ніж зобов'язуватися, бо асоціації культурно специфічніші, ніж люди гадають.

Крок 2: Оберіть один базовий відтінок і зафіксуйте його

Якою б не була ваша стартова точка, згорніть її до одного базового відтінку. Одного кольору. Це насінина, з якої виростає все решта, і спроба обрати три-чотири «головні» кольори одразу — саме та причина, чому палітри йдуть не так: немає хребта.

Якщо у вас є фірмовий колір — це ваша база. Якщо ви працюєте від настрою, оберіть відтінок, що несе відчуття: холодні сині й бірюзові для спокою й довіри, теплі помаранчеві й червоні для енергії (розрізнення теплих і холодних — найшвидший важіль впливу на настрій). Потім зафіксуйте його HSL, бо відтінок, насиченість і яскравість — це три регулятори, які ви насправді крутитимете весь решта процес. База на кшталт #2563EB — це приблизно H 217, S 91, L 60 — насичений, середньосвітлий синій.

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

Крок 3: Оберіть правило гармонії саме для *цієї* ситуації

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

Ось як я насправді обираю, за ситуацією, а не перелічуючи означення:

• Маркетинговий сайт, лендинг чи будь-що, що потребує впевненого заклику до дії: починайте з комплементарної (база плюс її протилежність на 180 градусів) або, краще, розщеплено-комплементарної (два відтінки, що фланкують цю протилежність). Комплементарна дає максимальний контраст для кнопки, яка має вистрілити; розщеплено-комплементарна дає більшу частину цього ефекту з меншою напругою для очей і другим акцентом задарма.
• Контентно насичений застосунок, дашборд чи читацький досвід: беріть аналогову — два-три сусіди в межах приблизно 30 градусів, як-от #0EA5E9 через #0D9488. Вона спокійна й майже не піддається тому, щоб зробити її негарною. Ціна — контраст, тож зазвичай вам доведеться позичити один протилежний відтінок суто для заклику до дії.
• **Вам потрібні кольори, що несуть виразні *значення* (успіх, попередження, помилка; або категорії діаграм): тріадична (три відтінки за 120 градусів) чи квадратна** (чотири за 90 градусів). Індиго #6366F1, смарагдовий #10B981, бурштиновий #F59E0B — це тріада, що виконує семантичну роботу.
• Однобрендовий продукт, що має відчуватися безпомилково «одним кольором»: монохроматична — один відтінок, розгорнутий по яскравості й насиченості.

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

Крок 4: Призначте пропорції, перш ніж призначати кольори

Це той крок, що відділяє палітри, які працюють, від палітр, які лише «пасують», і той, який майже всі пропускають. Гармонія каже вам, які кольори дозволено в кімнаті. Вона нічого не каже про те, скільки кожного використати — а три ідеально гармонійні кольори, ужиті в рівних кількостях, — це свій різновид негарного, врівноважена суперечка, де всі кричать на однаковій гучності.

Призначайте ролі за приблизним розподілом 60/30/10:

• Домінантний (~60%) — ваш хребет: поверхні сторінки, великі заливки, колір, на який око приземляється найчастіше. Критично — це зазвичай не ваш насичений базовий відтінок. Це майже нейтральний, виведений із нього: тонований приглушено-білий на кшталт #F8FAFC для світлої теми або приглушений темний на кшталт #1E293B.
• Вторинний (~30%) підтримує його: фони секцій, картки, вторинні кнопки, стани наведення. Він несе більше вашого справжнього відтінку.
• Акцентний (~10%, а в ідеалі значно менше) — гучний: первинна кнопка, активна вкладка, крапка сповіщення. Саме тут живе ваш насичений базовий колір або його комплемент. Що рідшим ви його зробите, то наполегливіше він працює.

Найпоширеніша помилка, яку я бачу, — використання гармонійних відтінків на повній насиченості по великих площах. Ваш базовий #2563EB розкішний на кнопці й виснажливий як повноекранний фон. Великі поверхні хочуть приглушеної, освітленої версії; чистий відтінок зарезервований для тих 10%. Якщо хочете пропорції, пояснені глибше, правило 60/30/10 іде далі, але заголовна думка проста: оберіть кольори, а потім безжально вирішіть, як мало гучного ви можете собі дозволити.

Крок 5: Перевірте контраст — гармонія не гарантує читабельності

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

Проженіть кожну пару «текст-на-фоні» та елемент інтерфейсу через перевіряч контрасту. Цілі, прямо від W3C, не підлягають обговоренню, якщо вам не байдужі ваші користувачі:

• 4.5:1 мінімум для звичайного основного тексту на його фоні.
• 3:1 для великого тексту (приблизно 18pt, або 14pt напівжирним) і для решти.
• 3:1 для елементів інтерфейсу та значущої графіки — контурів кнопок, рамок форм, іконок — проти сусідніх кольорів.

Це порогові значення, тож не округляйте вгору: обчислене 4.49:1 провалює планку 4.5:1. Перевіряч WCAG у генераторі позначає це наживо, коли ви парите кольори, і це момент виявити, що ваша красива комбінація «акцент-на-вторинному» нечитабельна — а не після того, як ви її випустили. Для повної картини AA проти AAA і того, звідки беруться співвідношення, дивіться пояснення контрастних співвідношень WCAG і канонічний критерій успіху WCAG 1.4.3.

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

Крок 6: Протестуйте в реальному контексті, потім ітеруйте

Зразки брешуть. Палітра, що виглядає врівноваженою як п'ять прямокутників пліч-о-пліч, поводиться зовсім інакше, щойно стає реальним макетом — бо площа, сусідство й кількість білого простору геть міняють те, як читаються кольори. Класичний приклад: акцент, що виглядає сумирно як маленький чип, стає переважним як повноширинний банер, а пара, що пройшла контраст великими блоками, провалюється, щойно текст стає 14px.

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

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

Коротка версія

Вибір палітри — це шість рішень по порядку, а не одна вдала здогадка. Назвіть свою стартову точку. Зведіть її до одного базового відтінку. Оберніть коло правилом гармонії, що пасує задачі — розщеплено-комплементарним, якщо ви не певні. Призначте пропорції 60/30/10, перш ніж закохуватися в будь-який колір. Перевірте контраст за числами WCAG, бо коло цього не зробить. Потім протестуйте в реальному макеті й регулюйте яскравість, а не відтінок.

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