Начни с нейтральных цветов
Фон, поверхности и текст занимают почти весь экран, поэтому выбери их первыми. Серый с лёгким оттенком основного цвета выглядит продуманнее, чем чистый серый, и позволяет цвету бренда выделяться только там, где это важно.
Определи цвета состояний с самого начала
Каждому приложению нужны цвета для ошибки, успеха, предупреждения и информации. Выбери оттенки, которые сочетаются с палитрой, и не используй цвет ошибки ни для чего другого, например для кнопок бренда. Дополняй цвет значком или текстом, чтобы сообщение не зависело только от цвета.
Продумай и тёмную тему
Большинство телефонов поддерживают тёмную тему, и многие пользователи держат её включённой. Просто инвертировать цвета недостаточно: используй очень тёмные серые вместо чистого чёрного и слегка снизь насыщенность акцентов, чтобы они не «рябили» на фоне.
Проверь контраст и области нажатия
По WCAG контраст текста с фоном должен быть не меньше 4,5:1. Кнопки должны выглядеть по-разному в активном, нажатом и отключённом состоянии. Проверь приложение на улице и при низкой яркости, ведь именно так им пользуются многие.
Частые вопросы
Сколько цветов должно быть в приложении?
Обычно один основной цвет, необязательный акцентный цвет, нейтральные цвета для фонов, поверхностей и текста и четыре цвета состояний: ошибка, успех, предупреждение и информация.
Какой цвет выбрать для главной кнопки приложения?
Основной цвет твоего бренда, если он хорошо контрастирует с фоном. Используй его только для самого важного действия на каждом экране.
Как сделать тёмную тему палитры?
Фон становится очень тёмно-серым с лёгким оттенком цвета бренда, поверхности чуть светлее фона, а акценты осветляются и смягчаются. Текст становится молочно-белым. В каждом примере это видно после нажатия на кнопку «Тёмная».
Какую палитру выбрать для минималистичного приложения?
Основа из серых (почти белый фон, очень светло-серые поверхности и почти чёрный текст) с единственным акцентным цветом для самого важного. Этой идее следуют палитры в категории «Минимализм».
Как перенести палитру в Figma, Flutter или SwiftUI?
Нажми у палитры «Экспортировать» и выбери формат: JSON-токены для Figma, ColorScheme для Flutter, цвета со светлой и тёмной темой для SwiftUI, Tailwind или CSS-переменные. Код копируется одним касанием.
