Практика · Логотипы
Цвета для логотипа: как собрать рабочую палитру
Палитра помогает узнавать бренд, но не спасает нечитаемую композицию. Начните с формы в одном цвете, затем подбирайте оттенки под реальные фоны и места размещения.
Короткий ответ
Начните с одного основного цвета и нейтральной версии. Палитру выбирают вместе с фоном сайта: один и тот же знак может хорошо читаться на белом и исчезать на темном. Ассоциации цвета помогают обсуждению, но не заменяют проверку.
Повторите на своем названии
Подбираем рабочую палитру для сайта
- 1
Сначала соберите одноцветный знак
Уберите разноцветные детали и убедитесь, что композиция читается без помощи цвета. Если только окраска разделяет буквы, слабое место уже найдено. Для учебной мастерской «Север» начинаем с темной надписи и простого знака. Это позволяет оценить форму отдельно от вкусовых предпочтений.
- 2
Проверьте цвет в окружении интерфейса
Возьмите фон шапки, цвет меню и основной кнопки. Логотип должен быть заметен, но не обязан повторять цвет каждой кнопки. Пример палитры для эксперимента: темный #183D36, спокойный светлый #F4F1E9, дополнительный #BF6B3B. Это пример сочетания, а не норматив для отрасли.
- 3
Сделайте светлую и темную версии
В темной шапке замените темную надпись светлой, а не добавляйте вокруг нее случайный белый прямоугольник. Проверьте, не стала ли светлая версия визуально тяжелее. Сохраните варианты с понятными названиями: «для белого фона» и «для темной шапки».
- 4
Проверьте оттенки в уменьшении
Тонкая цветная линия может выглядеть слабее, чем крупная заливка того же цвета. Посмотрите знак на телефоне без увеличения и в черно-белом виде. Не делайте различие между частями композиции зависимым только от двух близких оттенков.
Минимальный набор цветовых версий
| Версия | Где пригодится |
|---|---|
| Основная цветная | На привычном фоне сайта |
| Темная одноцветная | На светлой подложке и в простых документах |
| Светлая одноцветная | На темной шапке или фотографии с подходящей подложкой |
| Компактная | Для аватара, где мелкие цветовые детали исчезают |
Ориентируйтесь на контекст
Нет универсального цвета, гарантирующего доверие или продажи. Посмотрите на интерфейс сайта, фотографии и окружение конкурентов. Важно получить уместную и узнаваемую систему, а не следовать обещаниям из таблицы эмоций.
Сравнивайте палитры на одной композиции. Вариации можно сохранить и сопоставить рядом. Если одновременно менять форму и цвет, невозможно понять, что именно улучшило впечатление.
Типичные ошибки и как их исправить
«Синий всегда вызывает доверие»
Такие формулы слишком общие. Значение зависит от контекста, аудитории и сочетания с формой. Проверяйте собственный сценарий.
На белом красиво, на сайте не видно
Возвращайтесь к реальному фону. Возможно, нужна другая версия, а не новый логотип.
Каждая иконка своего цвета
Сначала сократите палитру. Несколько акцентов усложняют повторение знака и мешают выделить главное.
Разбор решения
Светлая шапка и темный подвал
В шапке используйте темно-зеленую надпись, в подвале — белую. Сохраните форму и интервалы. Это аккуратнее, чем помещать темный логотип на случайную белую плашку.
Как понять, что результат готов
Запишите HEX-коды выбранных цветов и фон для каждой версии. Затем проверьте страницу целиком: меню, кнопку и логотип. Хорошая палитра не заставляет переделывать интерфейс ради того, чтобы название компании стало читаемым.
- Фон отделен от цвета знака.
- Есть одноцветная версия.
- Элементы видны на темном фоне.
- HEX-значения сохранены.
Частые вопросы
Можно ли отказаться от фирменного цвета?
В отдельной белой или темной версии — да. Узнаваемость сохраняется за счет формы и пропорций.
Редактор выберет палитру за меня?
Он предлагает варианты и подсказки по контрасту, но результат нужно оценивать на реальном сайте.
Проверьте решение на своем логотипе
Соберите вариант, сравните его с примером и проверьте на нужном носителе. Редактирование и комплект файлов бесплатны; для получения файлов нужен email. Телефон необязателен.
Открыть конструктор логотипов