Как построить палитру бренда на основе логотипа
Какой цвет логотипа выбрать на роль primary
Если в логотипе два-три цвета, ориентир не «что мне нравится больше», а три конкретных критерия. Во-первых, посмотрите, какой цвет несёт основную смысловую нагрузку — обычно это цвет текстовой части (wordmark) или самого крупного графического элемента, а не мелкой детали иконки. Во-вторых, оцените насыщенность и контраст: цвет, который хорошо читается и на светлом, и на тёмном фоне, почти всегда лучше подходит на роль primary, чем яркий, но капризный оттенок, который «живёт» только на белом. В-третьих, проверьте, как цвет будет вести себя при масштабировании тона — если из него легко строится шкала от почти белого до почти чёрного без «грязных» промежуточных значений, это хороший кандидат.
Второй по значимости цвет логотипа не обязан становиться secondary автоматически. Часто логичнее сделать его accent-цветом для кнопок и акцентов, а secondary подобрать теоретически, даже если его физически нет в логотипе. Это нормальная практика: логотип — источник идентичности, а не полный список цветов бренда.
Чем палитра логотипа отличается от готовой системы
Извлечение цвета из логотипа — это 5-7 значений, снятых напрямую с файла, чаще всего через алгоритм кластеризации (k-means выделяет доминирующие пиксельные группы). Это сырьё, а не готовый к работе набор. Готовая система строится на базе Material Design и содержит тональные варианты на каждый базовый цвет — шкалу от светлых к тёмным, например от 50 до 900 в Material Design 2.
| Тон | Назначение | Пример использования |
|---|---|---|
| 50-100 | почти белый | фоны карточек, подложки |
| 200-300 | светлый | границы, disabled-состояния |
| 400-500 | основной цвет бренда | кнопки, ключевые акценты |
| 600-700 | тёмный | hover, активные состояния |
| 800-900 | почти чёрный | текст на светлом фоне |
Без этой шкалы дизайнер каждый раз будет вручную подбирать оттенок для hover-состояния кнопки или для текста на цветной плашке — и палитра начнёт «разъезжаться» от макета к макету.
Теория цвета: как подбирать secondary и accent
Когда primary определён, вторичные и акцентные цвета не берутся случайно — они строятся по цветовым гармониям вокруг угла основного цвета на цветовом круге. Современный подход считает эти углы не в устаревшем HSL, а в пространстве OKLCH, где светлота (L) и насыщенность (C) остаются визуально стабильными при смене оттенка — в HSL при повороте цвета яркость «прыгает», в OKLCH нет.
| Гармония | Угол смещения | Когда использовать |
|---|---|---|
| Аналогичная | ±30° | мягкий, спокойный бренд без резких контрастов |
| Комплементарная | 180° | яркий акцент, максимальный контраст для CTA |
| Split-комплементарная | 150° и 210° | контраст без агрессии, баланс между двумя цветами |
| Триадическая | 120° и 240° | палитра с тремя равнозначными ролями цвета |
Практически это выглядит так: берём L и C основного цвета в OKLCH и просто меняем угол оттенка (H) по таблице выше — светлота и насыщенность вторичного или акцентного цвета остаются в той же «весовой категории», что и primary, поэтому цвета не спорят друг с другом визуально.
Кейс: расширение палитры на реальном логотипе
Возьмём условный логотип IT-стартапа: синий #2563eb в wordmark и оранжевый #ea580c в графическом значке. Синий занимает 80% площади знака и используется в тексте — очевидный кандидат на primary. Оранжевый визуально ярче, но по площади мал, поэтому логично отвести ему роль accent, а не secondary.
Дальше в OKLCH считаем угол #2563eb и строим комплементарный оттенок (180°) — получаем тёплый жёлто-коричневый, который становится secondary-цветом для второстепенных акцентов и графики. Оранжевый из логотипа проверяем на совпадение с триадическим углом от синего (240° от primary) — в этом случае совпадение почти точное, значит, оранжевый можно оставить как accent без изменений, он и так гармоничен теоретически, а не только «на глаз».
После этого для синего и оранжевого строятся шкалы 50-900, добавляются 5-6 нейтральных серых с лёгким синим подтоном (чтобы серые не читались как «чужие» рядом с primary) и четыре функциональных цвета. В сумме — не 5-7 значений из логотипа, а система из 40+ конкретных hex-кодов, сгруппированных в 8-18 именованных ролей.
Почему цвет логотипа ломается в интерфейсе
Цвет, который выглядит эффектно на площади логотипа в 200×60 пикселей, часто становится нечитаемым, если залить им кнопку на 300 пикселей шириной или использовать как фон на 80% макета — плотность цвета и восприятие насыщенности меняются с масштабом. Это главная причина, почему прямой перенос цвета из логотипа в UI без адаптации — ошибка.
- Использование чистого чёрного #000000 и белого #ffffff вместо near-black (#0a0a0f) и off-white (#fafafa) — резкий контраст утомляет глаза при длительном чтении.
- Игнорирование WCAG: минимальный контраст 4.5:1 для обычного текста и 3:1 для крупного (от 18pt или 14pt bold) — без проверки текст на цветном фоне часто не проходит даже базовую доступность.
- Один и тот же hex-код для веба, печати и соцсетей без учёта цветового профиля — цвет, откалиброванный в sRGB для экрана, может «сесть» на CMYK-печати и выглядеть тускло.
- Отсутствие проверки цвета на реальных элементах — кнопке, плашке уведомления, фоне карточки — а не только на плоском квадрате в Figma.
- Слишком светлый или тёмный основной цвет логотипа переносится в UI без сдвига тона: если у бренда очень светлый primary, для текста и кнопок берут тон 600-700 из его же шкалы, а не сам исходный светлый оттенок — так сохраняется узнаваемость, но текст остаётся читаемым.
Функциональные цвета и итоговая структура
Функциональные цвета — success, warning, error, info — логотип не содержит почти никогда, даже если бренд построен на зелёном или красном: смысловая нагрузка «успех» или «ошибка» в вебе и продукте — отдельная задача, не связанная с идентичностью. Их добавляют отдельным блоком, обычно используя проверенные значения: success #16a34a, warning #d97706, error #dc2626, — и подбирают info-цвет так, чтобы он не конфликтовал с primary.
Собранная система обычно выглядит так: 1-2 primary, 2-4 secondary, 5-8 нейтральных, 4 функциональных — итого 8-18 именованных цветов, не считая их тональных вариаций. Распределять их на макете помогает правило 60-30-10: около 60% площади — нейтральный или доминирующий цвет, 30% — secondary, 10% — акцент. Без этого соотношения даже правильно подобранная по теории палитра превращается в цветовой шум, потому что каждый цвет требует «своего места», а не равной доли внимания.
Какой цвет логотипа выбрать на роль primary
Если в логотипе два-три цвета, ориентир не «что мне нравится больше», а три конкретных критерия. Во-первых, посмотрите, какой цвет несёт основную смысловую нагрузку — обычно это цвет текстовой части (wordmark) или самого крупного графического элемента, а не мелкой детали иконки. Во-вторых, оцените насыщенность и контраст: цвет, который хорошо читается и на светлом, и на тёмном фоне, почти всегда лучше подходит на роль primary, чем яркий, но капризный оттенок, который «живёт» только на белом. В-третьих, проверьте, как цвет будет вести себя при масштабировании тона — если из него легко строится шкала от почти белого до почти чёрного без «грязных» промежуточных значений, это хороший кандидат.
Второй по значимости цвет логотипа не обязан становиться secondary автоматически. Часто логичнее сделать его accent-цветом для кнопок и акцентов, а secondary подобрать теоретически, даже если его физически нет в логотипе. Это нормальная практика: логотип — источник идентичности, а не полный список цветов бренда.
Чем палитра логотипа отличается от готовой системы
Извлечение цвета из логотипа — это 5-7 значений, снятых напрямую с файла, чаще всего через алгоритм кластеризации (k-means выделяет доминирующие пиксельные группы). Это сырьё, а не готовый к работе набор. Готовая система строится на базе Material Design и содержит тональные варианты на каждый базовый цвет — шкалу от светлых к тёмным, например от 50 до 900 в Material Design 2.
| Тон | Назначение | Пример использования |
|---|---|---|
| 50-100 | почти белый | фоны карточек, подложки |
| 200-300 | светлый | границы, disabled-состояния |
| 400-500 | основной цвет бренда | кнопки, ключевые акценты |
| 600-700 | тёмный | hover, активные состояния |
| 800-900 | почти чёрный | текст на светлом фоне |
Без этой шкалы дизайнер каждый раз будет вручную подбирать оттенок для hover-состояния кнопки или для текста на цветной плашке — и палитра начнёт «разъезжаться» от макета к макету.
Теория цвета: как подбирать secondary и accent
Когда primary определён, вторичные и акцентные цвета не берутся случайно — они строятся по цветовым гармониям вокруг угла основного цвета на цветовом круге. Современный подход считает эти углы не в устаревшем HSL, а в пространстве OKLCH, где светлота (L) и насыщенность (C) остаются визуально стабильными при смене оттенка — в HSL при повороте цвета яркость «прыгает», в OKLCH нет.
| Гармония | Угол смещения | Когда использовать |
|---|---|---|
| Аналогичная | ±30° | мягкий, спокойный бренд без резких контрастов |
| Комплементарная | 180° | яркий акцент, максимальный контраст для CTA |
| Split-комплементарная | 150° и 210° | контраст без агрессии, баланс между двумя цветами |
| Триадическая | 120° и 240° | палитра с тремя равнозначными ролями цвета |
Практически это выглядит так: берём L и C основного цвета в OKLCH и просто меняем угол оттенка (H) по таблице выше — светлота и насыщенность вторичного или акцентного цвета остаются в той же «весовой категории», что и primary, поэтому цвета не спорят друг с другом визуально.
Кейс: расширение палитры на реальном логотипе
Возьмём условный логотип IT-стартапа: синий #2563eb в wordmark и оранжевый #ea580c в графическом значке. Синий занимает 80% площади знака и используется в тексте — очевидный кандидат на primary. Оранжевый визуально ярче, но по площади мал, поэтому логично отвести ему роль accent, а не secondary.
Дальше в OKLCH считаем угол #2563eb и строим комплементарный оттенок (180°) — получаем тёплый жёлто-коричневый, который становится secondary-цветом для второстепенных акцентов и графики. Оранжевый из логотипа проверяем на совпадение с триадическим углом от синего (240° от primary) — в этом случае совпадение почти точное, значит, оранжевый можно оставить как accent без изменений, он и так гармоничен теоретически, а не только «на глаз».
После этого для синего и оранжевого строятся шкалы 50-900, добавляются 5-6 нейтральных серых с лёгким синим подтоном (чтобы серые не читались как «чужие» рядом с primary) и четыре функциональных цвета. В сумме — не 5-7 значений из логотипа, а система из 40+ конкретных hex-кодов, сгруппированных в 8-18 именованных ролей.
Почему цвет логотипа ломается в интерфейсе
Цвет, который выглядит эффектно на площади логотипа в 200×60 пикселей, часто становится нечитаемым, если залить им кнопку на 300 пикселей шириной или использовать как фон на 80% макета — плотность цвета и восприятие насыщенности меняются с масштабом. Это главная причина, почему прямой перенос цвета из логотипа в UI без адаптации — ошибка.
- Использование чистого чёрного #000000 и белого #ffffff вместо near-black (#0a0a0f) и off-white (#fafafa) — резкий контраст утомляет глаза при длительном чтении.
- Игнорирование WCAG: минимальный контраст 4.5:1 для обычного текста и 3:1 для крупного (от 18pt или 14pt bold) — без проверки текст на цветном фоне часто не проходит даже базовую доступность.
- Один и тот же hex-код для веба, печати и соцсетей без учёта цветового профиля — цвет, откалиброванный в sRGB для экрана, может «сесть» на CMYK-печати и выглядеть тускло.
- Отсутствие проверки цвета на реальных элементах — кнопке, плашке уведомления, фоне карточки — а не только на плоском квадрате в Figma.
- Слишком светлый или тёмный основной цвет логотипа переносится в UI без сдвига тона: если у бренда очень светлый primary, для текста и кнопок берут тон 600-700 из его же шкалы, а не сам исходный светлый оттенок — так сохраняется узнаваемость, но текст остаётся читаемым.
Функциональные цвета и итоговая структура
Функциональные цвета — success, warning, error, info — логотип не содержит почти никогда, даже если бренд построен на зелёном или красном: смысловая нагрузка «успех» или «ошибка» в вебе и продукте — отдельная задача, не связанная с идентичностью. Их добавляют отдельным блоком, обычно используя проверенные значения: success #16a34a, warning #d97706, error #dc2626, — и подбирают info-цвет так, чтобы он не конфликтовал с primary.
Собранная система обычно выглядит так: 1-2 primary, 2-4 secondary, 5-8 нейтральных, 4 функциональных — итого 8-18 именованных цветов, не считая их тональных вариаций. Распределять их на макете помогает правило 60-30-10: около 60% площади — нейтральный или доминирующий цвет, 30% — secondary, 10% — акцент. Без этого соотношения даже правильно подобранная по теории палитра превращается в цветовой шум, потому что каждый цвет требует «своего места», а не равной доли внимания.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
