Цветовая схема приложения: от палитры к ролям интерфейса

Цветовая схема приложения — это набор цветов и правил их применения к фону, тексту, действиям и состояниям. Начните с ролей на реальном экране, затем выберите оттенки и проверьте конкретные пары текста и фона. Красивая палитра без такого распределения ещё не определяет понятный интерфейс.

Закрепите цветовые роли в дизайн-системе: фон, текст, основное действие и состояния. Тогда палитра будет описывать не только красивые сочетания, но и понятное поведение интерфейса.

Для начала достаточно нейтральных поверхностей, читаемого текста, одного основного акцента и отдельных обозначений ошибок и успешных действий. Дополнительные оттенки вводите для конкретной роли, а не ради заполнения палитры.

Теория цвета помогает выбирать сочетания, а визуальные ассоциации — поддерживать характер бренда. Ни то ни другое не заменяет проверки на экране: оттенок кнопки должен позволять прочитать её подпись, а ошибка — оставаться понятной рядом с обычными полями.

Ниже разберём основы выбора палитры, цветовые роли и шесть способов использовать цвет в приложении: от монохромной схемы до иллюстраций и градиентов.

Как выбрать цветовые схемы для вашего приложения 

Следуйте основным принципам цветовых схем

Познакомьтесь с терминологией цвета

Начните с терминов, которые помогают описать цвет в интерфейсе. Различайте цветовой тон, насыщенность, светлоту и контраст.

Цветовой тон (hue) обозначает сам цвет, например красный или синий; насыщенность — его интенсивность; светлота — положение между светлым и тёмным. Добавление белого даёт осветлённый оттенок (tint), чёрного — затемнённый (shade), серого — приглушённый (tone). Контраст описывает различие конкретной пары, поэтому нельзя назвать всю палитру «контрастной», не указав, какие цвета используются вместе.

Используйте цвета для отображения иерархии компонентов

Цвет помогает выделить главное действие и показать визуальную иерархию элементов. Акценты должны соответствовать задачам пользователя на конкретном экране.

Используйте акцентный цвет для главного действия, а более спокойные оттенки — для второстепенных элементов. Например, основная кнопка может выделяться на фоне соседних элементов.

Создайте визуальный баланс

Визуальный баланс зависит от распределения светлых, тёмных и насыщенных областей. На экране небольшая яркая кнопка может привлекать больше внимания, чем большая нейтральная карточка. Оценивайте не только сам оттенок, но и занимаемую им площадь.

Аналогичным образом, вы должны использовать подходящую светлоту каждого цвета при использовании и выборе цветов пользовательского интерфейса. Светлота описывает положение цвета между светлыми и тёмными оттенками. Начните с небольшой палитры и добавляйте оттенки, когда они нужны для фона, текста, действий или состояний.

Используя несколько тонов и соответствующие оттенки для каждого элемента пользовательского интерфейса, вы достигаете ощущения равновесия.

Используйте принципы психологии цвета

Цвет может вызывать ассоциации, но они зависят от контекста, опыта и культуры. Не считайте конкретный оттенок гарантией доверия или покупки. Проверяйте, помогает ли выбранный цвет различать действия и состояния именно в вашем интерфейсе.

Кроме того, знание психологии цвета может помочь вам определить, как различные культуры, географические регионы и возрастные группы по-разному воспринимают цвет. 

Обсуждайте ассоциации на примерах реальных экранов и с представителями своей аудитории. Один и тот же красный акцент может обозначать бренд, ошибку или опасное действие; роль должна быть понятна из контекста и текста.

Используйте ограниченное количество цветов, чтобы привлечь больше внимания 

Цветовые оттенки влияют на восприятие интерфейса. Таким образом, использование слишком большого количества цветов может легко вызвать путаницу, которая может оттолкнуть людей.

В сдержанной палитре цветные акценты заметнее на нейтральном фоне. Расставляйте акценты в тех областях, к которым нужно привлечь внимание. 

Контекстуальная согласованность

Цветовые схемы пользовательского интерфейса, которые вы выбираете для приложения или веб-сайта, должны быть единообразными. Одинаковые действия и состояния должны иметь последовательное цветовое обозначение на разных экранах. 

Поддерживайте согласованность, используя правило 60-30-10

Правило 60-30-10 можно использовать как ориентир для распределения цветов, а не как обязательное требование к любому интерфейсу. Согласно этому правилу, доминирующий цвет должен составлять 60% цветовой композиции, второстепенный - 30%, а акцентный - 10%.

Если акцентному цвету отведена небольшая площадь, основные действия легче отделить от фона. Однако доступность текста, ошибки и выделение фокуса нельзя подгонять под проценты ради соблюдения пропорции.

После выбора общей пропорции проверьте экран с реальными данными. Длинное сообщение об ошибке или заметный фокус клавиатуры могут изменить распределение цвета — и это оправданно, если они помогают выполнить задачу.

Ознакомьтесь с цветами, относящимися к вашей отрасли

У отраслей встречаются узнаваемые визуальные привычки. Примеры ниже можно использовать для поиска референсов, но это не правила и не доказательство того, что один цвет подходит всем продуктам отрасли.

• Красный: Развлечения, Еда, Спорт, Розничная торговля
• Оранжевый: Развлечения, Еда, Здоровье, Транспорт
• Желтый: Еда, Спорт, Транспорт, Путешествия, Досуг
• Зеленый: Окружающая среда, Банковское дело, Недвижимость, Сельское хозяйство, Некоммерческие организации
• Синий: Технологии, Безопасность, Финансы, Здравоохранение, Бухгалтерский учет
• Фиолетовый: культура, психология, религия
• Розовый: например, косметика и кондитерские изделия
• Черно-белый: Все отрасли

Изучите цветовые предпочтения вашей целевой аудитории

Некоторые люди воспринимают цвета по-разному. Вот почему вам нужно знать предпочтения своей аудитории.

Вдохновляйтесь на создание цветовых схем

Собирайте референсы на Behance, Color Hunt, Pinterest и Dribbble, но отмечайте, что именно хотите перенять: спокойный фон, заметное действие или характер иллюстраций. Копирование нескольких HEX-кодов не перенесёт иерархию исходного макета автоматически.

Переведите брендовый цвет в рабочие роли

Допустим, основной цвет продукта — синий. Он может остаться узнаваемым акцентом, но не обязан быть фоном всех кнопок, ссылок и информационных блоков. На экране оплаты сначала определите роли: белая карточка заказа, тёмный текст суммы, синяя основная кнопка, отдельное сообщение об ошибке и спокойное подтверждение.

Возьмём конкретную стартовую пару для кнопки: фон #2563EB и белый текст #FFFFFF. Её рассчитанный контраст составляет примерно 5,17:1. Светлый #93C5FD с тем же белым текстом даёт примерно 1,80:1 и не подходит для обычной подписи по порогу 4,5:1. При этом светлый оттенок можно рассмотреть как поверхность с тёмным текстом, заново измерив эту пару. Роль меняет решение, даже если оттенки относятся к одной синей палитре.

Сохраните названия по назначению — например, «Основное действие», «Основной текст», «Поверхность» — и отдельные оттенки для нужных состояний. Так изменение брендового синего не потребует угадывать, какие элементы были действиями, а какие просто использовали похожую заливку.

Цветовые роли на экране оплаты

На одном экране оплаты проверьте обычное состояние, ошибку карты и успешное завершение. Основная кнопка сохраняет роль действия, а сообщение об ошибке получает собственный текст и значок. Зелёный фон без слов не объясняет, прошла ли оплата или поле просто заполнено правильно.

По WCAG 2.2, критерий 1.4.3, обычному тексту требуется контраст не менее 4,5:1, крупному — 3:1, с указанными в критерии исключениями. Измеряйте конкретную пару текста и фона, а не палитру целиком. Отдельно критерий 1.4.1 требует не полагаться только на цвет для передачи смысла.

В Pixso соберите эти три состояния рядом и примените одинаковые роли к одинаковым элементам. Для тёмной темы заново подберите пары фона и текста: простая инверсия всей палитры может изменить иерархию. Наглядное сравнение помогает обсудить решения, но не заменяет измерение контраста готового интерфейса.

Проверьте палитру на макете в Pixso

В Pixso разместите рядом экран оплаты, состояние ошибки и подтверждение. Примените повторяющиеся цвета и текстовые стили к одинаковым ролям. Рассматривайте палитру на сумме, полях и кнопках, а не только в виде ряда цветных квадратов.

В Pixso можно собрать макет и сравнить цветовые схемы на его элементах. Начните с такой последовательности.

1. Разместите реальные заголовки, сумму, поля и подпись основного действия.
2. Назначьте роли фону, поверхностям, тексту и действию.
3. Добавьте ошибку поля и подтверждение, сохранив текстовое объяснение.
4. Измерьте пары текста и фона; отдельно проверьте необходимые признаки элементов управления.
5. Сравните состояния в размере готового экрана и согласуйте роли с командой.

Обсуждайте варианты в общем файле и оставляйте комментарии рядом с конкретным сочетанием. Вопрос «различима ли подпись на этой кнопке?» помогает принять решение точнее, чем общее «нравится ли вам синий?».

Для тёмной темы сохраните смысл ролей, но подберите значения заново. Цвет светлой карточки не обязан превращаться в чистый чёрный, а акцент может потребовать другой светлоты, чтобы оставаться заметным.

Шесть способов использовать цвет в приложении

Аналоговая цветовая схема

Одной из распространенных цветовых схем, используемых дизайнерами, является аналоговая цветовая схема. Это расположение похожих оттенков близко друг к другу на цветовом круге. Обычно один оттенок доминирует в схеме, в то время как другие добавляют насыщенности. Однако некоторые дизайны допускают равное использование всех оттенков в сопоставимой цветовой гамме. В природе легко найти похожие оттенки. В дизайне мобильных приложений они особенно приятны с эстетической точки зрения, потому что очень гармоничны.

Монохроматическая схема

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

Триадная схема

Триадная цветовая гамма состоит из трех оттенков, равномерно распределенных по всему цветовому кругу. Ключ к успешному использованию триадной цветовой схемы заключается в том, чтобы позволить одному оттенку доминировать, подчеркивая другие. Триадную схему определяют положения выбранных оттенков на цветовом круге, а не просто наличие трёх цветов на экране.

Красочные иллюстрации

Яркие иллюстрации могут объяснять назначение приложения и поддерживать характер бренда. В примере ниже цвет разделяет экраны знакомства с продуктом. Сохраняйте читаемость заголовков и действий: декоративная палитра иллюстрации не обязана становиться палитрой всех элементов управления.

Красочные градиенты

Градиент может соединять близкие оттенки, например красный с оранжевым или фиолетовый с синим, либо более контрастные цвета. Проверяйте читаемость текста по всей области градиента и не используйте декоративный переход вместо понятного обозначения состояния.

Чёрный, белый и серый

Чёрный, белый и серый позволяют построить сдержанную палитру. Иерархия зависит от светлоты поверхностей и текста: чёрный элемент не будет заметен на таком же тёмном фоне. Проверяйте контраст каждой пары отдельно.

Выберите палитру по поведению экрана

Удачная цветовая схема помогает найти действие, прочитать данные и понять результат. Сравните выбранные оттенки на одном и том же экране, включая ошибку и длинный текст. Если новая палитра меняет смысл состояния или прячет важную подпись, сначала исправьте роль и контраст, а затем возвращайтесь к декоративным сочетаниям.

Проработайте цветовую схему приложения в Pixso