Основной, вторичный и акцентный цвет: роли в системе бренда
Что на самом деле окрашивает каждый цвет
Большинство статей в топе ограничиваются формулировкой «основной цвет — главный, вторичный — дополняет, акцентный — привлекает внимание». Формулировка верная, но бесполезная без привязки к конкретным элементам интерфейса или полиграфии. Разберём это по существу.
| Роль цвета | Что окрашивает | Частота использования |
|---|---|---|
| Основной | Логотип, primary-кнопки, ссылки, шапка сайта, ключевые заголовки | Часто — 60% визуального поля |
| Вторичный | Фоны блоков, второстепенные кнопки, иконки, разделители, навигация | Умеренно — 30% |
| Акцентный | Badge, статус ошибки/успеха, hover-состояния, важные уведомления, единичный CTA на странице | Редко — 10%, точечно |
Ключевая ошибка новичков — использовать акцентный цвет для украшения, а не для сигнала. Autodesk в своей дизайн-системе прямо оговаривает: tertiary-цвет должен быть исключительно функциональным — статус, подсказка, предупреждение — а не декоративным элементом. Если акцентный цвет встречается на странице десять раз, он перестаёт быть акцентом и превращается в шум.
Правило 60-30-10: перенос из интерьера в интерфейс
Правило родом не из графического дизайна. Оно пришло из интерьерного дизайна: стены — 60%, мебель — 30%, декоративные акценты — 10%. Принцип сработал в комнате и сработал в интерфейсе по одной причине — глазу нужна большая спокойная зона для отдыха, средняя зона для ориентации в структуре и маленькая яркая зона для фокуса внимания.
Проблема в том, что «60-30-10» на бумаге и «60-30-10» в реальном продукте — разные вещи. На сайте это не значит «залить фон основным цветом». Обычно происходит так:
- 60% — нейтральные поверхности (белый, светло-серый фон), а не сам брендовый цвет в чистом виде
- 30% — вторичный цвет в навигации, карточках, второстепенных блоках
- 10% — основной брендовый цвет концентрируется в CTA и интерактивных элементах, а акцентный — в статусах и уведомлениях
Показательный пример — GitHub: почти весь интерфейс держится на нейтральных серых тонах, а фирменный зелёный появляется точечно — в кнопках и иллюстрациях. Это не нарушение правила 60-30-10, а его правильное применение: основной цвет не заливает экран, он маркирует действие.
На разных носителях пропорция меняется
На печатной визитке или упаковке 60-30-10 работает буквально — большая площадь фона, средняя площадь под текст и логотип, маленькая под акцент. В цифровом интерфейсе пропорция смещается в сторону нейтралов (белый, серый), и уже внутри «цветной» части бренда соблюдается соотношение основной/вторичный/акцентный. Пытаться механически залить 60% интерфейса фирменным цветом — распространённая ошибка, которая делает продукт визуально тяжёлым и снижает читаемость текста.
Почему равные пропорции не работают
Если раздать всем трём цветам по 33%, глаз не понимает, куда смотреть. Пропадает иерархия: пользователь не отличает кнопку от декоративного блока, а статус ошибки — от обычного текста. Исследование Университета Лойолы в Мэриленде показывает, что использование фирменного цвета повышает узнаваемость бренда на 80% — но это работает только при последовательном, а не хаотичном применении. Смешение пропорций уничтожает этот эффект.
Вторая проблема — доступность. WCAG AA требует коэффициент контраста 4.5:1 для обычного текста, 3:1 для крупного текста (от 18pt) и 3:1 для не текстовых UI-элементов. Уровень AAA поднимает планку до 7:1 и 4.5:1 соответственно. Большинство насыщенных фирменных цветов среднего тона — зелёный #1FA85A, синий #5B5BFF, оранжевый #FF8800 — дают против белого фона контраст в диапазоне 3:1–5:1. Этого достаточно для крупных элементов, но недостаточно для основного текста.
Решение простое и системное: брендовый цвет в средней (500-й) ступени насыщенности используется как UI-акцент — кнопки, бейджи, hover-состояния. А для текста берётся та же цветовая линия, но в ступени 700–800 — более тёмный тон того же оттенка. Бренд остаётся узнаваемым, но текст читается и проходит проверку контраста.
Функциональные роли и переход к семантическим токенам
Здесь начинается то, о чём почти не пишут в статьях о психологии цвета, но что реально определяет, как палитра живёт в продукте. Современные дизайн-системы не оперируют понятиями «основной» и «вторичный» цвет напрямую в коде — они вводят слой семантических токенов, которые ссылаются на физические цвета бренда.
| Бренд-роль | Семантический токен | Пример применения |
|---|---|---|
| Основной | --color-interactive | Кнопки, ссылки, чекбоксы, слайдеры |
| Вторичный | --color-surface, --color-border | Фоны карточек, разделители, второстепенная навигация |
| Акцентный | --color-accent, --color-status-* | Badge, ошибки, успех, предупреждения |
Такая архитектура даёт критичное преимущество: при смене темы (светлая/тёмная) или ребрендинге меняется не сотня мест в коде, а значение токена. Компонент кнопки всегда ссылается на --color-interactive — что физически стоит за этим токеном (синий #2D5BFF в светлой теме или его светлая версия #6E8FFF в тёмной), решает система, а не разработчик вручную. Это и есть разница между «палитрой из трёх цветов» и масштабируемой цветовой системой.
В white-label продуктах эта модель работает особенно наглядно. Каждый клиентский бренд поставляет только основной цвет (главный интерактивный) и опционально вторичный акцент и цвета поверхностей. Все семантические цвета — ошибка, успех, предупреждение, нейтральные оттенки текста — берутся из глобального слоя дизайн-системы и не переопределяются брендом. Это экономит десятки часов на каждом новом клиенте и гарантирует, что интерфейс останется доступным независимо от того, насколько «смелый» цвет выбрал очередной бренд.
Как построить многоступенчатую палитру из одного базового цвета
Три плоских цвета — это минимально жизнеспособный набор, но не система. Полноценная палитра строится через шкалу оттенков (tints — светлее, tones — с добавлением серого, shades — темнее) для каждой из трёх ролей.
- Возьмите базовый брендовый цвет и зафиксируйте его как ступень 500 — это «эталонный» тон, который используется в логотипе и как основной UI-акцент.
- Постройте светлые ступени (50, 100, 200, 300, 400) для фонов, hover-состояний с низким контрастом, disabled-состояний.
- Постройте тёмные ступени (600, 700, 800, 900) — они пойдут на текст, границы с усиленным контрастом, состояния нажатия (pressed).
- Повторите процедуру для вторичного и акцентного цвета отдельными шкалами — не смешивайте их со шкалой основного, иначе теряется различимость ролей.
- Проверьте каждую пару «текст на фоне» по калькулятору контраста и держите ориентир 4.5:1 для текста, 3:1 для крупных элементов и UI-компонентов.
В результате вместо трёх изолированных цветов появляется система из 27–45 управляемых значений, из которых собираются токены для светлой и тёмной темы, состояний интерактивности и уровней поверхностей. Это тот момент, когда цветовая палитра перестаёт быть вопросом вкуса дизайнера и становится инженерным активом бренда — воспроизводимым, тестируемым и устойчивым к масштабированию продукта.
Что на самом деле окрашивает каждый цвет
Большинство статей в топе ограничиваются формулировкой «основной цвет — главный, вторичный — дополняет, акцентный — привлекает внимание». Формулировка верная, но бесполезная без привязки к конкретным элементам интерфейса или полиграфии. Разберём это по существу.
| Роль цвета | Что окрашивает | Частота использования |
|---|---|---|
| Основной | Логотип, primary-кнопки, ссылки, шапка сайта, ключевые заголовки | Часто — 60% визуального поля |
| Вторичный | Фоны блоков, второстепенные кнопки, иконки, разделители, навигация | Умеренно — 30% |
| Акцентный | Badge, статус ошибки/успеха, hover-состояния, важные уведомления, единичный CTA на странице | Редко — 10%, точечно |
Ключевая ошибка новичков — использовать акцентный цвет для украшения, а не для сигнала. Autodesk в своей дизайн-системе прямо оговаривает: tertiary-цвет должен быть исключительно функциональным — статус, подсказка, предупреждение — а не декоративным элементом. Если акцентный цвет встречается на странице десять раз, он перестаёт быть акцентом и превращается в шум.
Правило 60-30-10: перенос из интерьера в интерфейс
Правило родом не из графического дизайна. Оно пришло из интерьерного дизайна: стены — 60%, мебель — 30%, декоративные акценты — 10%. Принцип сработал в комнате и сработал в интерфейсе по одной причине — глазу нужна большая спокойная зона для отдыха, средняя зона для ориентации в структуре и маленькая яркая зона для фокуса внимания.
Проблема в том, что «60-30-10» на бумаге и «60-30-10» в реальном продукте — разные вещи. На сайте это не значит «залить фон основным цветом». Обычно происходит так:
- 60% — нейтральные поверхности (белый, светло-серый фон), а не сам брендовый цвет в чистом виде
- 30% — вторичный цвет в навигации, карточках, второстепенных блоках
- 10% — основной брендовый цвет концентрируется в CTA и интерактивных элементах, а акцентный — в статусах и уведомлениях
Показательный пример — GitHub: почти весь интерфейс держится на нейтральных серых тонах, а фирменный зелёный появляется точечно — в кнопках и иллюстрациях. Это не нарушение правила 60-30-10, а его правильное применение: основной цвет не заливает экран, он маркирует действие.
На разных носителях пропорция меняется
На печатной визитке или упаковке 60-30-10 работает буквально — большая площадь фона, средняя площадь под текст и логотип, маленькая под акцент. В цифровом интерфейсе пропорция смещается в сторону нейтралов (белый, серый), и уже внутри «цветной» части бренда соблюдается соотношение основной/вторичный/акцентный. Пытаться механически залить 60% интерфейса фирменным цветом — распространённая ошибка, которая делает продукт визуально тяжёлым и снижает читаемость текста.
Почему равные пропорции не работают
Если раздать всем трём цветам по 33%, глаз не понимает, куда смотреть. Пропадает иерархия: пользователь не отличает кнопку от декоративного блока, а статус ошибки — от обычного текста. Исследование Университета Лойолы в Мэриленде показывает, что использование фирменного цвета повышает узнаваемость бренда на 80% — но это работает только при последовательном, а не хаотичном применении. Смешение пропорций уничтожает этот эффект.
Вторая проблема — доступность. WCAG AA требует коэффициент контраста 4.5:1 для обычного текста, 3:1 для крупного текста (от 18pt) и 3:1 для не текстовых UI-элементов. Уровень AAA поднимает планку до 7:1 и 4.5:1 соответственно. Большинство насыщенных фирменных цветов среднего тона — зелёный #1FA85A, синий #5B5BFF, оранжевый #FF8800 — дают против белого фона контраст в диапазоне 3:1–5:1. Этого достаточно для крупных элементов, но недостаточно для основного текста.
Решение простое и системное: брендовый цвет в средней (500-й) ступени насыщенности используется как UI-акцент — кнопки, бейджи, hover-состояния. А для текста берётся та же цветовая линия, но в ступени 700–800 — более тёмный тон того же оттенка. Бренд остаётся узнаваемым, но текст читается и проходит проверку контраста.
Функциональные роли и переход к семантическим токенам
Здесь начинается то, о чём почти не пишут в статьях о психологии цвета, но что реально определяет, как палитра живёт в продукте. Современные дизайн-системы не оперируют понятиями «основной» и «вторичный» цвет напрямую в коде — они вводят слой семантических токенов, которые ссылаются на физические цвета бренда.
| Бренд-роль | Семантический токен | Пример применения |
|---|---|---|
| Основной | --color-interactive | Кнопки, ссылки, чекбоксы, слайдеры |
| Вторичный | --color-surface, --color-border | Фоны карточек, разделители, второстепенная навигация |
| Акцентный | --color-accent, --color-status-* | Badge, ошибки, успех, предупреждения |
Такая архитектура даёт критичное преимущество: при смене темы (светлая/тёмная) или ребрендинге меняется не сотня мест в коде, а значение токена. Компонент кнопки всегда ссылается на --color-interactive — что физически стоит за этим токеном (синий #2D5BFF в светлой теме или его светлая версия #6E8FFF в тёмной), решает система, а не разработчик вручную. Это и есть разница между «палитрой из трёх цветов» и масштабируемой цветовой системой.
В white-label продуктах эта модель работает особенно наглядно. Каждый клиентский бренд поставляет только основной цвет (главный интерактивный) и опционально вторичный акцент и цвета поверхностей. Все семантические цвета — ошибка, успех, предупреждение, нейтральные оттенки текста — берутся из глобального слоя дизайн-системы и не переопределяются брендом. Это экономит десятки часов на каждом новом клиенте и гарантирует, что интерфейс останется доступным независимо от того, насколько «смелый» цвет выбрал очередной бренд.
Как построить многоступенчатую палитру из одного базового цвета
Три плоских цвета — это минимально жизнеспособный набор, но не система. Полноценная палитра строится через шкалу оттенков (tints — светлее, tones — с добавлением серого, shades — темнее) для каждой из трёх ролей.
- Возьмите базовый брендовый цвет и зафиксируйте его как ступень 500 — это «эталонный» тон, который используется в логотипе и как основной UI-акцент.
- Постройте светлые ступени (50, 100, 200, 300, 400) для фонов, hover-состояний с низким контрастом, disabled-состояний.
- Постройте тёмные ступени (600, 700, 800, 900) — они пойдут на текст, границы с усиленным контрастом, состояния нажатия (pressed).
- Повторите процедуру для вторичного и акцентного цвета отдельными шкалами — не смешивайте их со шкалой основного, иначе теряется различимость ролей.
- Проверьте каждую пару «текст на фоне» по калькулятору контраста и держите ориентир 4.5:1 для текста, 3:1 для крупных элементов и UI-компонентов.
В результате вместо трёх изолированных цветов появляется система из 27–45 управляемых значений, из которых собираются токены для светлой и тёмной темы, состояний интерактивности и уровней поверхностей. Это тот момент, когда цветовая палитра перестаёт быть вопросом вкуса дизайнера и становится инженерным активом бренда — воспроизводимым, тестируемым и устойчивым к масштабированию продукта.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
