Сколько цветов должно быть в фирменной палитре
Сколько цветов на самом деле нужно бренду
Правило «3–5 цветов» — не догма, а усреднённая рекомендация для типичного бренда с логотипом, сайтом и соцсетями. В неё закладывают 1–2 основных цвета, 1–2 вспомогательных и один акцентный, плюс нейтральная база — белый, серый, чёрный. Для большинства компаний среднего размера это рабочий диапазон. Но он ломается в двух направлениях сразу: минималистичные бренды сознательно урезают палитру до одного-двух цветов, а сложные цифровые продукты расширяют её до десяти и более оттенков, потому что им нужно кодировать статусы, категории и уровни доступа.
Показательна статистика Marketo: среди топ-100 компаний мира 33% используют синий логотип, 29% — красный, 28% — серо-чёрный, 13% — зелёный. Это не просто предпочтения — это доказательство того, что скромная, почти монохромная палитра работает на самых высоких уровнях узнаваемости. Netflix и Mastercard обходятся двумя-тремя цветами: чёрным, белым и одним акцентным. Здесь минимализм — не ограничение, а осознанная стратегия.
Почему избыток цветов бьёт по узнаваемости
Мозг запоминает бренд через паттерн, а не через перечень оттенков. Когда в коммуникации участвует восемь ярких равнозначных цветов без иерархии, глазу не за что зацепиться — все сигналы конкурируют между собой и взаимно гасятся. В итоге пользователь не запоминает ни один из цветов конкретно, а бренд теряет визуальный «якорь», по которому его узнают на полке, в ленте соцсетей или в интерфейсе.
Проблема не в количестве цветов как таком, а в отсутствии ролей. Ошибка почти всегда одна и та же: дизайнер добавляет цвет, потому что «так красивее», а не потому что этот цвет решает конкретную задачу — привлечь внимание к кнопке, показать ошибку, обозначить категорию товара. Без назначения даже три цвета создадут хаос, а десять цветов со строгой системой ролей будут восприниматься спокойно и узнаваемо — как в Google Workspace или в интерфейсах государственных сервисов.
Правило 60-30-10: как распределить цвета по площади
Даже если в палитре разрешено использовать пять-семь цветов, на макете они не должны быть равнозначны по площади. Стандарт, который используют и в графическом дизайне, и в UI, звучит так: 60% площади — основной (базовый, часто нейтральный) цвет, 30% — дополнительный, 10% — акцент для призывов к действию и важных элементов.
- 60% — фон, крупные блоки, основа композиции; чаще всего это нейтральный или приглушённый фирменный цвет.
- 30% — вторичные элементы: заголовки, иконки, карточки, разделители.
- 10% — акцент: кнопки, ссылки, важные уведомления — цвет, который должен «кричать» громче остальных именно потому, что его мало.
В цифровых продуктах нейтральные оттенки — белый, серый, светлые версии фирменного цвета — обычно занимают 60–70% всей поверхности интерфейса. Это не признак бедной палитры, а условие читаемости: чем больше ярких цветов претендуют на внимание одновременно, тем хуже пользователь ориентируется в интерфейсе.
Логотип и SaaS-продукт: две разные задачи
Палитра для логотипа и палитра для сложного цифрового продукта решают принципиально разные задачи, и сравнивать их количество цветов напрямую — методологическая ошибка.
| Параметр | Минималистичный бренд (логотип, стартап) | Комплексный продукт (SaaS, госплатформа) |
|---|---|---|
| Типичное число цветов | 1–3 | 8–15+ |
| Задача цвета | Мгновенное узнавание, эмоция | Навигация, статусы, роли пользователей, доступность |
| Пример | Mastercard, Netflix | IBM (3–4 суб-палитры), Google Workspace |
| Риск при ошибке | Бренд «размывается», теряет узнаваемость | Интерфейс становится нечитаемым, конфликт сигналов |
У IBM, по сути, не одна палитра, а несколько параллельных систем — под корпоративный бренд, под продуктовые линейки, под маркетинговые материалы. Это осознанная архитектура, а не разрастание «на глазок»: каждая суб-палитра закреплена за своей зоной применения и не пересекается с другими бессистемно.
Что обязательно должно быть в палитре кроме основного цвета
Вне зависимости от общего количества цветов, в палитре почти всегда нужны несколько категорий, без которых система не работает:
- Нейтральные оттенки — белый, чёрный, шкала серого. Они несут основную текстовую и фоновую нагрузку и не должны считаться «неглавными» — по площади это обычно большинство макета.
- Акцентный цвет — для действий, требующих внимания: кнопки, ссылки, уведомления.
- Статус-цвета — если продукт цифровой: зелёный для успеха, красный для ошибки, жёлтый или оранжевый для предупреждения. Это функциональный слой, не связанный напрямую с эстетикой бренда.
- Категориальные цвета — нужны там, где бренд явно кодирует товарные линейки или функции. У Garnier зелёный означает увлажнение, оранжевый — восстановление: количество таких цветов определяется числом категорий продукта, а не желанием дизайнера разнообразить палитру.
Как посчитать нужное число цветов для своего продукта
Практический способ — не выбирать число «на глаз», а вывести его из структуры продукта.
- Определите, сколько у бренда самостоятельных зон коммуникации: логотип, сайт, приложение, упаковка. Для простого лого — минимум цветов, для многоканального продукта — больше.
- Посчитайте, сколько функциональных состояний нужно кодировать цветом: ошибка, успех, предупреждение, неактивность. Каждое состояние — это отдельный цвет вне основной фирменной гаммы.
- Посчитайте категории товаров или услуг, если бренд использует цветовое кодирование по типу Garnier — количество категорий обычно равно количеству дополнительных цветов.
- Заложите нейтральную базу — минимум три-четыре оттенка серого плюс белый и чёрный для фона, текста и границ.
- Сложите получившиеся числа и проверьте через правило 60-30-10 — если сумма цветов не укладывается в понятную иерархию по площади, палитру нужно сокращать или перераспределять роли, а не количество.
Итоговое число может оказаться и два, и пятнадцать — это нормально, если за каждым цветом стоит функция, а не желание «добавить разнообразия». Хорошая палитра не измеряется количеством оттенков — она измеряется тем, насколько быстро пользователь понимает, что означает каждый цвет.
Сколько цветов на самом деле нужно бренду
Правило «3–5 цветов» — не догма, а усреднённая рекомендация для типичного бренда с логотипом, сайтом и соцсетями. В неё закладывают 1–2 основных цвета, 1–2 вспомогательных и один акцентный, плюс нейтральная база — белый, серый, чёрный. Для большинства компаний среднего размера это рабочий диапазон. Но он ломается в двух направлениях сразу: минималистичные бренды сознательно урезают палитру до одного-двух цветов, а сложные цифровые продукты расширяют её до десяти и более оттенков, потому что им нужно кодировать статусы, категории и уровни доступа.
Показательна статистика Marketo: среди топ-100 компаний мира 33% используют синий логотип, 29% — красный, 28% — серо-чёрный, 13% — зелёный. Это не просто предпочтения — это доказательство того, что скромная, почти монохромная палитра работает на самых высоких уровнях узнаваемости. Netflix и Mastercard обходятся двумя-тремя цветами: чёрным, белым и одним акцентным. Здесь минимализм — не ограничение, а осознанная стратегия.
Почему избыток цветов бьёт по узнаваемости
Мозг запоминает бренд через паттерн, а не через перечень оттенков. Когда в коммуникации участвует восемь ярких равнозначных цветов без иерархии, глазу не за что зацепиться — все сигналы конкурируют между собой и взаимно гасятся. В итоге пользователь не запоминает ни один из цветов конкретно, а бренд теряет визуальный «якорь», по которому его узнают на полке, в ленте соцсетей или в интерфейсе.
Проблема не в количестве цветов как таком, а в отсутствии ролей. Ошибка почти всегда одна и та же: дизайнер добавляет цвет, потому что «так красивее», а не потому что этот цвет решает конкретную задачу — привлечь внимание к кнопке, показать ошибку, обозначить категорию товара. Без назначения даже три цвета создадут хаос, а десять цветов со строгой системой ролей будут восприниматься спокойно и узнаваемо — как в Google Workspace или в интерфейсах государственных сервисов.
Правило 60-30-10: как распределить цвета по площади
Даже если в палитре разрешено использовать пять-семь цветов, на макете они не должны быть равнозначны по площади. Стандарт, который используют и в графическом дизайне, и в UI, звучит так: 60% площади — основной (базовый, часто нейтральный) цвет, 30% — дополнительный, 10% — акцент для призывов к действию и важных элементов.
- 60% — фон, крупные блоки, основа композиции; чаще всего это нейтральный или приглушённый фирменный цвет.
- 30% — вторичные элементы: заголовки, иконки, карточки, разделители.
- 10% — акцент: кнопки, ссылки, важные уведомления — цвет, который должен «кричать» громче остальных именно потому, что его мало.
В цифровых продуктах нейтральные оттенки — белый, серый, светлые версии фирменного цвета — обычно занимают 60–70% всей поверхности интерфейса. Это не признак бедной палитры, а условие читаемости: чем больше ярких цветов претендуют на внимание одновременно, тем хуже пользователь ориентируется в интерфейсе.
Логотип и SaaS-продукт: две разные задачи
Палитра для логотипа и палитра для сложного цифрового продукта решают принципиально разные задачи, и сравнивать их количество цветов напрямую — методологическая ошибка.
| Параметр | Минималистичный бренд (логотип, стартап) | Комплексный продукт (SaaS, госплатформа) |
|---|---|---|
| Типичное число цветов | 1–3 | 8–15+ |
| Задача цвета | Мгновенное узнавание, эмоция | Навигация, статусы, роли пользователей, доступность |
| Пример | Mastercard, Netflix | IBM (3–4 суб-палитры), Google Workspace |
| Риск при ошибке | Бренд «размывается», теряет узнаваемость | Интерфейс становится нечитаемым, конфликт сигналов |
У IBM, по сути, не одна палитра, а несколько параллельных систем — под корпоративный бренд, под продуктовые линейки, под маркетинговые материалы. Это осознанная архитектура, а не разрастание «на глазок»: каждая суб-палитра закреплена за своей зоной применения и не пересекается с другими бессистемно.
Что обязательно должно быть в палитре кроме основного цвета
Вне зависимости от общего количества цветов, в палитре почти всегда нужны несколько категорий, без которых система не работает:
- Нейтральные оттенки — белый, чёрный, шкала серого. Они несут основную текстовую и фоновую нагрузку и не должны считаться «неглавными» — по площади это обычно большинство макета.
- Акцентный цвет — для действий, требующих внимания: кнопки, ссылки, уведомления.
- Статус-цвета — если продукт цифровой: зелёный для успеха, красный для ошибки, жёлтый или оранжевый для предупреждения. Это функциональный слой, не связанный напрямую с эстетикой бренда.
- Категориальные цвета — нужны там, где бренд явно кодирует товарные линейки или функции. У Garnier зелёный означает увлажнение, оранжевый — восстановление: количество таких цветов определяется числом категорий продукта, а не желанием дизайнера разнообразить палитру.
Как посчитать нужное число цветов для своего продукта
Практический способ — не выбирать число «на глаз», а вывести его из структуры продукта.
- Определите, сколько у бренда самостоятельных зон коммуникации: логотип, сайт, приложение, упаковка. Для простого лого — минимум цветов, для многоканального продукта — больше.
- Посчитайте, сколько функциональных состояний нужно кодировать цветом: ошибка, успех, предупреждение, неактивность. Каждое состояние — это отдельный цвет вне основной фирменной гаммы.
- Посчитайте категории товаров или услуг, если бренд использует цветовое кодирование по типу Garnier — количество категорий обычно равно количеству дополнительных цветов.
- Заложите нейтральную базу — минимум три-четыре оттенка серого плюс белый и чёрный для фона, текста и границ.
- Сложите получившиеся числа и проверьте через правило 60-30-10 — если сумма цветов не укладывается в понятную иерархию по площади, палитру нужно сокращать или перераспределять роли, а не количество.
Итоговое число может оказаться и два, и пятнадцать — это нормально, если за каждым цветом стоит функция, а не желание «добавить разнообразия». Хорошая палитра не измеряется количеством оттенков — она измеряется тем, насколько быстро пользователь понимает, что означает каждый цвет.
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
