Как собрать цветовую палитру для бренда и продукта

Коротко о главном

Рабочая палитра — это не пять красивых образцов, а система из четырёх слоёв:

1. Основной цвет — главный узнаваемый оттенок бренда.
2. Шкала светлых и тёмных вариантов этого цвета.
3. Нейтральные — серые для текста, фонов и границ.
4. Семантические — успех, предупреждение, ошибка, информация.

Дополнительный или акцентный цвет добавляйте, только если продукту он действительно нужен.

Шаг 1. Выберите основной цвет

Отталкивайтесь от смысла и контекста, а не от любимого цвета.

• Ассоциации: синий часто воспринимается как спокойный и надёжный, зелёный — как рост или деньги, красный — как энергия или опасность. Ассоциации зависят от культуры и отрасли, проверьте их для своей аудитории.
• Конкуренты: положите логотипы конкурентов рядом. Цвет, который в нише никто не использует, проще «присвоить».
• Практичность: цвет должен работать как фон кнопки с белым или тёмным текстом, а также на светлых и тёмных поверхностях.

Зафиксируйте одно базовое значение, например в HEX и OKLCH.

Шаг 2. Постройте шкалу оттенков

Нужна шкала, обычно из 10–12 ступеней (часто их называют 50, 100, 200 … 900). Светлые ступени — для фонов и hover, средние — для кнопок и ссылок, тёмные — для текста на светлом фоне и нажатых состояний.

Как сделать её хорошо:

• Работайте в перцептивном цветовом пространстве, например OKLCH. Тогда ступени выглядят равномерными для глаза, в отличие от простого изменения светлоты в HSL.
• Держите тон (hue) примерно постоянным, но снижайте насыщенность (chroma) на самых светлых и самых тёмных концах, иначе цвета станут кислотными или грязными.
• Небольшой сдвиг тона помогает: во многих палитрах тёмные ступени чуть холоднее, а светлые чуть теплее.
• Инструменты: Adobe Leonardo, Radix Colors, Coolors или плагины-генераторы шкал в Figma.

:root {
  --brand-50:  oklch(97% 0.02 270);
  --brand-100: oklch(93% 0.04 270);
  --brand-300: oklch(78% 0.11 270);
  --brand-500: oklch(58% 0.20 270);
  --brand-700: oklch(45% 0.18 270);
  --brand-900: oklch(28% 0.10 270);
}

Шаг 3. Добавьте нейтральные цвета

Нейтральные делают большую часть работы в интерфейсе: текст, фоны, разделители, неактивные состояния.

• Постройте серую шкалу с тем же количеством ступеней, что и у бренда.
• Слегка тонируйте серые в сторону основного тона (очень низкая насыщенность). Чистый серый рядом с ярким брендовым цветом может выглядеть безжизненно.
• Убедитесь, что есть достаточно тёмная ступень для основного текста и достаточно светлая для фона страницы.

Шаг 4. Задайте семантические цвета

У пользователей есть устойчивые ожидания:

Для каждого семантического цвета нужны минимум ступени для фона, границы и текста. Если бренд красный или зелёный, скорректируйте семантические оттенки, чтобы ошибка не выглядела как обычная кнопка.

Шаг 5. Превратите цвета в токены

Разделяйте значения и роли:

• примитивные токены: brand-500, gray-100;
• семантические токены: color-bg, color-text, color-primary, color-danger-bg.

Компоненты используют только семантические токены. Тогда тёмная тема или ребрендинг меняют сопоставление, а не каждый компонент.

Шаг 6. Проверьте на реальном интерфейсе

Образцы обманывают, экраны — нет. Соберите тестовую страницу:

• основные, второстепенные и ghost-кнопки во всех состояниях (обычное, hover, нажатие, неактивное);
• поля формы с ошибкой и успехом;
• карточки, таблицы, навигация, уведомления;
• график с несколькими сериями;
• та же страница в тёмной теме.

Проверьте контраст текста по WCAG для каждой реально используемой пары текста и фона. Посмотрите страницу на телефоне при дневном свете и на недорогом мониторе. Главный вопрос: основное действие по-прежнему заметнее всего?

Распространённый ориентир — 60-30-10: в основном нейтральные, часть второстепенных поверхностей и немного брендового акцента. Это отправная точка, а не закон.

Частые ошибки

• Чистый брендовый цвет везде, включая большие фоны.
• Слишком много акцентов, которые спорят за внимание.
• Осветление через прозрачность: на разных фонах цвет получается разным.
• Тёмная тема «на потом».
• Проверка контраста только для логотипа, а не для реального текста.