Расширенная цветовая система бренда (extended palette)
Зачем расширенная палитра, если есть основной цвет
Основная палитра — это то, что делает бренд узнаваемым: один-два цвета, максимум три, которые человек считывает за долю секунды и ассоциирует с компанией. Расширенная палитра узнаваемость не строит — она обслуживает функциональность. Статусы, категории, графики, состояния интерфейса, доступность по контрасту, тёмная тема — всё это нельзя закрыть одним фирменным оттенком, даже если очень хочется сохранить визуальную чистоту.
Хороший ориентир — правило 60-30-10: 60% композиции держит основной цвет, 30% занимают дополнительные оттенки из расширенной палитры, 10% — акцент для критичных точек внимания (CTA, ошибка, важное уведомление). Если в макете фирменный цвет занимает 90% пространства, это не сила бренда, а визуальный шум: глаз не за что зацепиться, всё кричит одинаково громко.
Когда включать основную палитру, а когда расширенную
Практический критерий простой: если элемент должен маркировать принадлежность к бренду — логотип, заголовки, ключевые CTA — работает основная палитра. Если элемент должен передавать информацию — статус, категорию, уровень риска, данные на графике — работает расширенная. Смешивать эти роли — типичная ошибка: например, использовать фирменный цвет и для кнопки "Купить", и для индикатора "Просрочено". Пользователь перестаёт понимать, что означает цвет.
| Задача | Какая палитра | Почему |
|---|---|---|
| Логотип, шапка сайта, брендовая упаковка | Основная | Строит узнаваемость |
| Диаграммы, графики с несколькими категориями | Расширенная | Нужно различать 5–12 групп данных |
| Статусы: успех, ошибка, предупреждение | Расширенная | Смысл цвета важнее бренд-ассоциации |
| Текст на светлом/тёмном фоне | Расширенная (шкала оттенков) | Нужен контраст, а не фирменный тон |
| HR-бренд, мероприятия, спецпроекты | Расширенная | Сохраняет узнаваемость без буквального копирования основной палитры |
Как построить расширенную палитру, чтобы она не спорила с основной
Расширенная палитра гармонирует с основной, если она построена по той же логике генерации, а не подобрана "на глаз" из библиотеки цветов. Практика — строить каждый цвет как шкалу из 9–11 шагов (обычно 50, 100, 200 ... 900, 950 по модели Tailwind), где шаг 500 — это «чистый» цвет из брендбука, а 600–700 обычно уходят на интерактивные состояния: hover, active, focus.
Для генерации таких шкал сейчас почти везде используют OKLCH, а не HSL. Причина не в моде: канал светлоты (Lightness) в OKLCH перцептивно равномерен — равный числовой шаг даёт равный воспринимаемый шаг яркости. В HSL шаг в 10% светлоты на синем и на жёлтом воспринимается совершенно по-разному, из-за чего шкалы получаются кривыми и требуют ручной докрутки на каждый цвет.
- Определить роль нового цвета — статус, категория, нейтральный фон.
- Задать базовый тон (шаг 500) так, чтобы он не конфликтовал по насыщенности с основным брендовым цветом.
- Сгенерировать шкалу 50–950 в OKLCH, сохраняя равные перцептивные шаги светлоты.
- Проверить контраст текста на каждом фоновом шаге по WCAG.
- Свести цвета в семантические токены, а не оставлять «сырые» значения в коде.
Сколько цветов нужно и как их организовать
Универсального числа нет, но есть закономерность: чем сложнее продукт, тем больше семейств оттенков нужно расширенной палитре, и это не значит, что дизайнер обязан использовать их все одновременно. Royal London Design System, например, содержит 141 оттенок в системе, но в реальных интерфейсах команда работает с курированным подмножеством — большая библиотека нужна для гибкости, а не для того, чтобы каждый экран пестрел разноцветием.
Иерархию проще держать в трёх слоях токенов:
- Примитивные токены — сырые значения без смысла, например
blue-500 = #3B82F6. - Брендовые токены — те же значения, но привязанные к конкретному бренду или продуктовой линейке.
- Семантические токены — роли, а не цвета:
primary-action,surface-default,text-primary,status-error.
Компонент в коде ссылается только на семантический токен. Это даёт критичное преимущество для тёмной темы: при переключении темы семантические токены переназначаются на другие примитивы, но их имена не меняются — интерфейсу не нужно переписывать логику, меняется только маппинг.
Как это выглядит в реальных брендбуках
HPE Design System не использует маркетинговую палитру бренда напрямую в цифровых продуктах — она расширяет базовые цвета отдельным набором, адаптированным под интерфейсные сценарии: плотные таблицы, длинные формы, состояния данных. Логика в том, что маркетинговая палитра оптимизирована для впечатления, а не для считываемости на экране в течение часа работы.
Selectel пошёл по другому пути разделения ответственности: основная палитра — синий и красный — держит узнаваемость бренда во всех каналах, а расширенная палитра добавляет оттенки и отдельные цвета для HR-бренда и мероприятий. Это позволяет отделу маркетинга делать яркие материалы для конференций без риска "размыть" основной бренд-код в глазах клиентов.
Как документировать расширенную палитру, чтобы командой пользовались правильно
Самая частая причина, почему расширенная палитра превращается в хаос — отсутствие внятной документации о том, для чего каждый цвет. Просто выложить HEX-коды в Figma недостаточно: через полгода никто не вспомнит, зачем нужен именно этот оттенок зелёного из шести похожих.
В брендбуке для каждого цвета расширенной палитры стоит зафиксировать:
- роль (семантический токен) — что этот цвет обозначает, а не как называется;
- допустимые и запрещённые применения — например, "status-success не используется для декоративных элементов";
- минимальный контраст для текста и фона на каждом шаге шкалы;
- поведение в тёмной теме — на какой примитив переназначается токен;
- владельца изменений — кто согласовывает добавление нового цвета в систему.
Без этого пятого пункта расширенная палитра неизбежно разрастается стихийно: каждый дизайнер добавляет "свой" оттенок под конкретную задачу, и через год система токенов превращается в кладбище неиспользуемых цветов, которые никто не решается удалить.
Зачем расширенная палитра, если есть основной цвет
Основная палитра — это то, что делает бренд узнаваемым: один-два цвета, максимум три, которые человек считывает за долю секунды и ассоциирует с компанией. Расширенная палитра узнаваемость не строит — она обслуживает функциональность. Статусы, категории, графики, состояния интерфейса, доступность по контрасту, тёмная тема — всё это нельзя закрыть одним фирменным оттенком, даже если очень хочется сохранить визуальную чистоту.
Хороший ориентир — правило 60-30-10: 60% композиции держит основной цвет, 30% занимают дополнительные оттенки из расширенной палитры, 10% — акцент для критичных точек внимания (CTA, ошибка, важное уведомление). Если в макете фирменный цвет занимает 90% пространства, это не сила бренда, а визуальный шум: глаз не за что зацепиться, всё кричит одинаково громко.
Когда включать основную палитру, а когда расширенную
Практический критерий простой: если элемент должен маркировать принадлежность к бренду — логотип, заголовки, ключевые CTA — работает основная палитра. Если элемент должен передавать информацию — статус, категорию, уровень риска, данные на графике — работает расширенная. Смешивать эти роли — типичная ошибка: например, использовать фирменный цвет и для кнопки "Купить", и для индикатора "Просрочено". Пользователь перестаёт понимать, что означает цвет.
| Задача | Какая палитра | Почему |
|---|---|---|
| Логотип, шапка сайта, брендовая упаковка | Основная | Строит узнаваемость |
| Диаграммы, графики с несколькими категориями | Расширенная | Нужно различать 5–12 групп данных |
| Статусы: успех, ошибка, предупреждение | Расширенная | Смысл цвета важнее бренд-ассоциации |
| Текст на светлом/тёмном фоне | Расширенная (шкала оттенков) | Нужен контраст, а не фирменный тон |
| HR-бренд, мероприятия, спецпроекты | Расширенная | Сохраняет узнаваемость без буквального копирования основной палитры |
Как построить расширенную палитру, чтобы она не спорила с основной
Расширенная палитра гармонирует с основной, если она построена по той же логике генерации, а не подобрана "на глаз" из библиотеки цветов. Практика — строить каждый цвет как шкалу из 9–11 шагов (обычно 50, 100, 200 ... 900, 950 по модели Tailwind), где шаг 500 — это «чистый» цвет из брендбука, а 600–700 обычно уходят на интерактивные состояния: hover, active, focus.
Для генерации таких шкал сейчас почти везде используют OKLCH, а не HSL. Причина не в моде: канал светлоты (Lightness) в OKLCH перцептивно равномерен — равный числовой шаг даёт равный воспринимаемый шаг яркости. В HSL шаг в 10% светлоты на синем и на жёлтом воспринимается совершенно по-разному, из-за чего шкалы получаются кривыми и требуют ручной докрутки на каждый цвет.
- Определить роль нового цвета — статус, категория, нейтральный фон.
- Задать базовый тон (шаг 500) так, чтобы он не конфликтовал по насыщенности с основным брендовым цветом.
- Сгенерировать шкалу 50–950 в OKLCH, сохраняя равные перцептивные шаги светлоты.
- Проверить контраст текста на каждом фоновом шаге по WCAG.
- Свести цвета в семантические токены, а не оставлять «сырые» значения в коде.
Сколько цветов нужно и как их организовать
Универсального числа нет, но есть закономерность: чем сложнее продукт, тем больше семейств оттенков нужно расширенной палитре, и это не значит, что дизайнер обязан использовать их все одновременно. Royal London Design System, например, содержит 141 оттенок в системе, но в реальных интерфейсах команда работает с курированным подмножеством — большая библиотека нужна для гибкости, а не для того, чтобы каждый экран пестрел разноцветием.
Иерархию проще держать в трёх слоях токенов:
- Примитивные токены — сырые значения без смысла, например
blue-500 = #3B82F6. - Брендовые токены — те же значения, но привязанные к конкретному бренду или продуктовой линейке.
- Семантические токены — роли, а не цвета:
primary-action,surface-default,text-primary,status-error.
Компонент в коде ссылается только на семантический токен. Это даёт критичное преимущество для тёмной темы: при переключении темы семантические токены переназначаются на другие примитивы, но их имена не меняются — интерфейсу не нужно переписывать логику, меняется только маппинг.
Как это выглядит в реальных брендбуках
HPE Design System не использует маркетинговую палитру бренда напрямую в цифровых продуктах — она расширяет базовые цвета отдельным набором, адаптированным под интерфейсные сценарии: плотные таблицы, длинные формы, состояния данных. Логика в том, что маркетинговая палитра оптимизирована для впечатления, а не для считываемости на экране в течение часа работы.
Selectel пошёл по другому пути разделения ответственности: основная палитра — синий и красный — держит узнаваемость бренда во всех каналах, а расширенная палитра добавляет оттенки и отдельные цвета для HR-бренда и мероприятий. Это позволяет отделу маркетинга делать яркие материалы для конференций без риска "размыть" основной бренд-код в глазах клиентов.
Как документировать расширенную палитру, чтобы командой пользовались правильно
Самая частая причина, почему расширенная палитра превращается в хаос — отсутствие внятной документации о том, для чего каждый цвет. Просто выложить HEX-коды в Figma недостаточно: через полгода никто не вспомнит, зачем нужен именно этот оттенок зелёного из шести похожих.
В брендбуке для каждого цвета расширенной палитры стоит зафиксировать:
- роль (семантический токен) — что этот цвет обозначает, а не как называется;
- допустимые и запрещённые применения — например, "status-success не используется для декоративных элементов";
- минимальный контраст для текста и фона на каждом шаге шкалы;
- поведение в тёмной теме — на какой примитив переназначается токен;
- владельца изменений — кто согласовывает добавление нового цвета в систему.
Без этого пятого пункта расширенная палитра неизбежно разрастается стихийно: каждый дизайнер добавляет "свой" оттенок под конкретную задачу, и через год система токенов превращается в кладбище неиспользуемых цветов, которые никто не решается удалить.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
