Як підібрати палітру кольорів для дизайну

Крок 1

Почніть з ролей кольорів

Палітра — це не набір улюблених кольорів, а система, де кожен має свою роль. Для старту достатньо такої структури:

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

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

Крок 2

Скористайтеся колірним колом

Колірні гармонії — це перевірені способи поєднати кольори за їхнім положенням на колірному колі. Генератори на зразок Adobe Color будують їх автоматично від обраного базового кольору:

• •монохромна — один колір у різних варіантах насиченості й яскравості; найпростіший і найспокійніший варіант;
• •аналогова — сусідні кольори на колі; м'яко й гармонійно;
• •комплементарна — протилежні кольори на колі; сильний контраст, добре для акцентів;
• •розділена комплементарна та тріада — три кольори; більше варіативності, але потрібна обережність.

💡 Гармонія з генератора — лише старт. Майже завжди один колір варто зробити домінантним, а решту — приглушити.

Крок 3

Візьміть палітру з референсу

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

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

Крок 4

Перевірте контраст

Гарна палітра нічого не варта, якщо текст не читається. Стандарт доступності WCAG задає мінімальні співвідношення контрасту:

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

💡 У Adobe Color є перевірка контрасту. Перевіряйте кожну пару «текст — фон», яка реально трапляється в макеті, а не лише основну.

Крок 5

Не покладайтеся лише на колір

WCAG вимагає не використовувати колір як єдиний спосіб передати інформацію чи виділити елемент, а Nielsen Norman Group радить не будувати візуальну ієрархію лише на кольорі. Частина людей розрізняє кольори інакше, тож:

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

💡 Покажіть палітру на реальному макеті в спільноті й попросіть фідбек: чи читається текст і що помічають першим.