У застосунку кольори показують, що можна натиснути, що активне і що вдалося чи ні. Ці 12 палітр містять фон, поверхні, основний колір і текст залежно від типу застосунку, з HEX-кодами, які можна перенести у Figma, Flutter, SwiftUI чи React Native.
Фінтех: синій і зелений
Синій для довіри, зелений для балансів і успішних операцій.
Помаранчева доставка
Помаранчевий виділяє кнопки замовлення й акції.
Здоров’я і велнес
Спокійна; для застосунків запису до лікаря, звичок чи моніторингу.
Темна тема з фіолетовим
Дуже темно-сірий фон замість чистого чорного, зі світло-фіолетовим акцентом.
Соціальна: рожевий і фіолетовий
Для соцмереж, знайомств чи творців контенту.
Мінімалізм для продуктивності
Дуже читабельна; для менеджерів завдань і робочих інструментів.
Жовта освіта
Весела й світла; для вивчення мов чи навчання.
Енергійний фітнес
Лайм і червоний на темному; для тренувань і метрик.
Лавандова медитація
М’яка й спокійна; для сну, медитації чи особистого щоденника.
Подорожі: бірюзовий і пісочний
Нагадує пляж і сонце; для бронювань і путівників.
Свіжа зелена їжа
Для супермаркетів, рецептів чи харчування.
Преміум-покупки
Нейтральна й елегантна; головна роль — у фото товарів.
Натисніть колір, щоб скопіювати його HEX-код. Іконка олівця відкриває палітру в редакторі, де її можна змінити.
Визначте кольори станів одразу
Кожному застосунку потрібні кольори для помилки, успіху, попередження й інформації. Оберіть відтінки, що пасують до палітри, і не використовуйте колір помилки для інших речей, як-от брендових кнопок. Доповнюйте колір іконкою чи текстом, щоб усе було зрозуміло не лише завдяки кольору.
Оформіть і темну тему
Більшість телефонів підтримують темну тему, і багато користувачів її вмикають. Просто інвертувати кольори недостатньо: використовуйте дуже темні сірі замість чистого чорного й трохи зменште насиченість акцентів, щоб вони не «вібрували» на фоні.
Перевірте контраст і зони натискання
Згідно з WCAG текст має мати контраст із фоном щонайменше 4,5:1. Кнопки мають виглядати по-різному в активному, натиснутому й неактивному стані. Протестуйте застосунок надворі й за низької яскравості — саме так ним користується багато людей.
Зазвичай це основний колір, необов’язковий допоміжний, нейтральні для фону й тексту та чотири кольори станів: помилка, успіх, попередження й інформація.
Який колір обрати для головної кнопки застосунку?
Основний колір вашого бренду, якщо він добре контрастує з фоном. Використовуйте його лише для найважливішої дії на кожному екрані.