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

Почему цвет ломается раньше, чем кажется

Дизайнер выбирает красивую палитру в начале проекта. Синий для кнопок, серый для фона, зелёный для иконок. Через три месяца появляется второй синий - чуть темнее, для hover. Потом третий - для ссылок. Потом зелёный начинают использовать и для успеха, и для тегов, и для онлайн-статуса. Серых становится семь штук, и никто не помнит, какой из них «основной фон», а какой «граница карточки».

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

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

Структура: из чего состоит цветовая система

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

Когда роли определены, палитра перестаёт быть просто набором цветов и становится языком. Разработчик знает, что color-primary - это всегда главное действие. Дизайнер не придумывает каждый раз, какой оттенок взять для нового компонента.

Как выбрать базовые оттенки

Начинать стоит с трёх точек: основной цвет бренда, нейтральная шкала и семантические цвета. Всё остальное строится от них.

Основной цвет

Берётся из брендбука или выбирается как опорный оттенок. Важно сразу проверить его на контраст: если он не проходит 4.5:1 на белом фоне, использовать его для текста или иконок не получится. Придётся либо затемнить, либо выделить отдельный «тёмный вариант» для текстовых применений.

От базового оттенка строится шкала - обычно 9-11 ступеней от очень светлого до очень тёмного. Это не просто градиент: каждая ступень должна быть функционально отличима от соседних. Инструменты вроде Radix Colors или Palettte помогают строить такие шкалы с учётом перцептивной равномерности.

Нейтральная шкала

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

Хорошая практика - делать нейтральные с лёгким подтоном основного цвета. Чисто серые (без подтона) часто выглядят холодно и отстранённо. Тёплый или холодный подтон в 3-5% насыщенности делает палитру связной.

Семантические цвета

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

Проблема возникает, когда основной цвет бренда - красный или зелёный. Тогда семантический красный начинает конфликтовать с брендовым. Решение: сдвинуть семантический оттенок в другую сторону спектра (например, использовать более тёплый или холодный красный) или добавить дополнительный визуальный маркер - иконку, форму, текстовую подпись.

Контраст: не опция, а требование

Контрастность - это отношение яркости текста к яркости фона. Стандарт WCAG 2.1 определяет два уровня: AA (минимальный) и AAA (расширенный). Для большинства продуктов достаточно AA.

Проверить контраст можно прямо в Figma через плагин Contrast или в браузере через DevTools. Но важно понимать: автоматическая проверка не заменяет визуальную оценку. Некоторые сочетания технически проходят порог, но читаются плохо из-за вибрации цветов (например, насыщенный красный текст на насыщенном синем фоне).

Отдельная история - цвет на цвете. Когда текст лежит на цветном фоне (например, белый текст на синей кнопке), нужно проверять именно эту пару, а не текст на белом фоне отдельно.

Семантические цвета: когда они работают, а когда нет

Семантический цвет работает только тогда, когда он несёт смысл сам по себе, без опоры на подпись. Если пользователь должен прочитать текст рядом, чтобы понять, что зелёный бейдж означает «активен», а не «новый» - цвет не справляется со своей задачей.

Проверка простая: уберите все текстовые подписи с экрана и посмотрите, понятно ли состояние только по цвету. Если нет - либо добавьте иконку, либо пересмотрите, как именно используется оттенок.

Ещё одна ловушка - использовать семантический цвет вне семантического контекста. Зелёный тег «Новинка» рядом с зелёным статусом «Активен» создаёт путаницу. Один из них нужно переосмыслить: либо сменить оттенок тега, либо добавить форму.

Тёмная тема: отдельная система, а не инверсия

Самая распространённая ошибка при добавлении тёмной темы - взять светлую палитру и инвертировать её. Это не работает по нескольким причинам.

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

Во-вторых, иерархия глубины в тёмной теме строится иначе. В светлой теме более глубокие слои темнее. В тёмной - наоборот: поверхности, которые «выше», светлее. Модальное окно светлее основного фона, а не темнее.

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

Типичные ошибки при построении палитры

Большинство проблем с цветом в интерфейсах возникают не из-за плохого вкуса, а из-за конкретных структурных решений.

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

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

Серые без системы. Дизайнер добавляет новый серый каждый раз, когда предыдущий «не подходит». В итоге в проекте 12 серых, из которых 8 отличаются на 5-10% яркости и не несут разных функций.

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

Игнорирование состояний. Для кнопки определён только «нормальный» вид. Hover, active, disabled, focused - всё это отдельные состояния, которые тоже требуют цветовых решений. Если их не заложить в систему, разработчик придумает их сам - и не факт, что согласованно.

Как проверить, что система работает

Есть несколько практических тестов, которые стоит провести до финального утверждения палитры.

Тест на дальтонизм. Figma позволяет симулировать разные типы цветовосприятия через плагин Color Blind. Проверьте ключевые экраны в режиме Deuteranopia (красно-зелёный дальтонизм) - самый распространённый тип.

Тест на контраст. Прогоните все текстовые пары через проверку контраста. Особое внимание - на текст на цветных фонах и placeholder в полях ввода (его часто делают слишком светлым).

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

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

Инструменты для работы с цветом

Несколько ресурсов, которые реально ускоряют работу с палитрой:

• Radix Colors - готовые шкалы с перцептивной равномерностью, оптимизированные для интерфейсов. Есть светлая и тёмная версия каждой шкалы.
• Palettte - инструмент для построения и редактирования шкал с визуальным контролем равномерности.
• Coolors - быстрая генерация палитр, удобен для поиска стартовой точки.
• Contrast Checker (WebAIM) - простая проверка контраста по WCAG без лишних шагов.
• Tokens Studio (Figma) - плагин для управления дизайн-токенами, включая цветовые. Позволяет переключать темы и синхронизировать токены с кодом.

Чеклист: цветовая система готова к работе

1. Определены роли: primary, secondary, background, surface, neutral, semantic.
2. Каждая роль занята ровно одним значением (или набором значений для состояний).
3. Основной цвет проверен на контраст 4.5:1 для текстовых применений.
4. Нейтральная шкала содержит не менее 5 ступеней с чёткими функциональными различиями.
5. Семантические цвета (ошибка, успех, предупреждение) работают без текстовой подписи.
6. Все интерактивные состояния (hover, active, disabled, focused) определены для ключевых компонентов.
7. Проведена симуляция дальтонизма на ключевых экранах.
8. Если есть тёмная тема - она построена как отдельный набор токенов, а не инверсия.
9. Цвета оформлены как токены с понятными именами по роли, а не по оттенку.
10. Новый компонент можно собрать из существующих токенов без добавления новых значений.

Цвет и бренд: как согласовать палитру с визуальной идентичностью

Когда продукт существует внутри более широкой бренд-системы, у дизайнера появляется дополнительное ограничение: палитра должна не только работать функционально, но и соответствовать брендбуку. Это порождает типичный конфликт: маркетинговый отдел утвердил яркий оранжевый как основной цвет бренда, но на белом фоне он не проходит порог контраста для текста.

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

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

Цвет в адаптивных и мультиплатформенных продуктах

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

Насыщенные цвета на P3-экранах выглядят ярче, чем на sRGB. Если вы проектируете на MacBook и не проверяете результат на обычном мониторе, есть риск, что палитра окажется слишком бледной для большинства пользователей. Обратная ситуация: оттенок, который выглядит нормально на sRGB, на P3-экране может казаться кричащим.

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

Когда система нуждается в пересмотре

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

Первый сигнал: в проекте появляются токены с именами вроде color-primary-v2 или color-blue-new. Это значит, что кто-то не нашёл подходящего места в существующей системе и создал обходной путь. Таких токенов становится всё больше, и система теряет предсказуемость.

Второй сигнал: при добавлении нового компонента дизайнер каждый раз задаёт вопрос «какой цвет здесь использовать?» вместо того, чтобы автоматически знать ответ. Если система хорошо спроектирована, выбор очевиден из ролей.

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

Четвёртый сигнал: после редизайна бренда команда тратит больше недели на обновление цветов в интерфейсе. При правильно выстроенной токен-системе это должно занимать несколько часов.

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

FAQ

Сколько цветов нужно в интерфейсной палитре?

Нет универсального числа, но ориентир такой: 1-2 брендовых оттенка, нейтральная шкала из 7-11 ступеней, 4 семантических цвета (ошибка, успех, предупреждение, информация) и вспомогательные поверхностные оттенки. Итого 20-40 токенов достаточно для большинства продуктов. Больше - не значит лучше.

Чем отличается цветовая палитра от цветовой системы?

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

Как выбрать основной цвет, если бренда ещё нет?

Начните с задачи продукта и аудитории. Финансовые и медицинские продукты традиционно используют синий - он ассоциируется с надёжностью. Экологические и здоровье-ориентированные - зелёный. Энергичные и молодёжные - оранжевый или красный. Это не жёсткие правила, но они отражают устоявшиеся ассоциации, которые работают в пользу восприятия.

Нужно ли поддерживать WCAG, если продукт не для государственных структур?

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

Как назвать токены, чтобы они не устарели при смене палитры?

Называйте по роли, а не по оттенку. color-primary - хорошо. color-blue-500 как финальный токен кнопки - плохо: при смене бренда на зелёный имя станет ложью. Базовую шкалу можно называть по оттенку (blue-500), но токены компонентов и ролей - только по функции.

Как быть, если дизайнер и разработчик используют разные инструменты?

Токены - это и есть решение. Дизайнер управляет ими в Figma через Tokens Studio, разработчик получает их в виде JSON или CSS-переменных. Изменение значения в одном месте автоматически распространяется на оба инструмента. Без токенов любое изменение палитры превращается в ручную синхронизацию.

Итог

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

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