Цвет узнают раньше, чем читают название. Поэтому палитра бренда это не набор любимых оттенков, а два-три цвета, у каждого из которых своя работа: один узнаётся, второй держит фон, третий привлекает внимание. Разбираем, как подобрать такую палитру и проверить её до того, как она попадёт на сайт и в канал.
Из чего состоит палитра
- Основной цвет. Тот, по которому узнают бренд. Он в логотипе, на кнопках, в аватарке.
- Цвет фона. Обычно очень светлый или очень тёмный. На нём основной цвет читается.
- Акцент. Необязательный третий цвет для того, что должно выделяться: цена, кнопка, новинка. Его мало.
Плюс нейтральные оттенки для текста и линий: серые или тонированные в основной цвет. Для старта хватает двух цветов: у Luverist это зелёный #14D68E и почти белый #FAFAFA, у Frostu тёмно-синий #0C2444 и голубой #73CDFE. Больше пяти цветов в основной палитре уже трудно держать в одном стиле.
Как выбрать основной цвет
- Посмотрите на нишу. Выпишите цвета пяти-десяти конкурентов. Если все синие, синий бренд потеряется среди них.
- Определите характер. Спокойный и надёжный, яркий и дерзкий, дорогой и сдержанный. Насыщенные тёплые цвета звучат громче, приглушённые и холодные тише.
- Подумайте о носителях. Где бренд живёт чаще всего: в тёмной теме Telegram, на белом сайте, на упаковке. Цвет должен хорошо смотреться именно там.
- Соберите два-три варианта. Покажите их на одинаковом макете: аватарка, кнопка, пост. Выбирать цвет по квадратику на белом фоне бесполезно.
Тёмный фон с одним ярким цветом, как у MidJ Bot (#060D09 и мятный #60FFC0), хорошо работает в Telegram и для технологичных продуктов: яркий цвет светится на тёмном.
Как проверить палитру
- Контраст текста. Текст на фоне должен читаться. Ориентир из стандарта доступности WCAG: соотношение контраста не меньше 4,5 к 1 для обычного текста. Проверяется любым онлайн-калькулятором контраста по двум кодам цветов.
- Тёмная и светлая тема. Логотип и кнопки посмотрите на обоих фонах. Тёмно-синий на чёрном пропадает, бледно-жёлтый на белом тоже.
- Маленький размер. Уменьшите логотип до аватарки в списке чатов. Близкие по яркости цвета сливаются в одно пятно.
- Экраны и печать. На экране цвет светится, на бумаге тускнеет. Если будет печать, проверьте палитру на пробном отпечатке.
Как записать палитру
Цвета фиксируют кодами, а не названиями: «наш синий» у каждого подрядчика получится своим.
| Код | Где нужен |
|---|---|
| HEX, например #0C2444 | сайты, Figma, Telegram, соцсети |
| RGB | экраны, видео, презентации |
| CMYK или Pantone | печать: визитки, упаковка, мерч |
Рядом с кодами записывают роль каждого цвета и пропорции: сколько основного, сколько фона, где можно акцент. Тогда дизайнер, разработчик и типография сделают одинаково. Обычно это часть правил фирменного стиля вместе с логотипом и шрифтами, подробнее в статье про разработку логотипа.
Частые ошибки
- Слишком много цветов. Каждый макет выглядит по-разному, бренд не узнаётся.
- Градиент вместо цвета. Градиент можно добавить, но у бренда должен быть один основной цвет, который работает и без него.
- Цвет по моде. Модные оттенки быстро устаревают, а менять палитру дорого: она уже на всех носителях.
- Нет проверки в тёмной теме. Многие читают Telegram в тёмной теме, и палитра должна работать в обеих.