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

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

Спершу порядок роботи з палітрою, далі застосунки-піпетки для Mac. Гарні кольори все одно не працюють, якщо текст не прочитати. Перевіряйте контраст між текстом і тлом і не покладайтеся лише на колір, щоб передати зміст.

Застосунки-піпетки, що ростуть за візитами й спонсорством на Censuus

Молодший застосунок від незалежного розробника:

Ранжовано за трафіком візитів і спонсорством на Censuus, не за редакційним вибором. Перелік змінюється, коли з’являються нові застосунки й набирають трафік.

Позичте з фото

У фото, яке вам подобається, кольори вже добре поєднуються. Візьміть кілька з них піпеткою й скопіюйте коди. Порівняйте інструменти в добірці застосунки-піпетки для Mac.

Дайте кожному кольору роль

Базовий колір для великих площ, нейтральний для тексту й тла, а акцент рідко, щоб він вирізнявся там, де з’являється. Для фірмового знака дивіться як зробити логотип для малого бізнесу.

Перевірте, чи читається

Покладіть справжній текст на кожне тло й перевірте контраст спеціальним інструментом. Якщо в дизайні є темна тема, випробуйте палітру й на темному тлі.

Збережіть там, де працюєте

Збережіть коди у своєму інструменті дизайну, щоб той самий синій був усюди. Порівняйте Canva і Figma або перегляньте застосунки для малювання.

Порівняння за власними описами розробників у сторах.
Крок	Що робите	Навіщо
1. Базовий колір	головний	задає настрій
2. Нейтральний	для тексту й простору	спокійне тло
3. Акцент	для кнопок і виділень	веде погляд
4. Точні коди	HEX чи подібні, збережені	той самий колір усюди
5. Перевірка контрасту	текст на тлі	читабельно для всіх

Часті запитання

Скільки кольорів має бути в палітрі?

Небагато: базовий, нейтральний і акцентний покривають більшість дизайнів. Додавайте інші, лише коли справді потрібно.

Як узяти точний колір з екрана?

Скористайтеся застосунком-піпеткою й скопіюйте код, який він дає.

Чому текст важко читати?

Замалий контраст з тлом. Зробіть текст темнішим або тло світлішим і перевірте ще раз.