Клиент присылает логотип и говорит: вот наши цвета, синий и оранжевый, из них и делайте сайт. Проблема в том, что для сайта двух цветов не хватает физически: интерфейсу нужны десятки оттенков, чтобы кнопка отличалась от фона, ошибка от успеха, а мелкий текст оставался читаемым. Разбираем, из чего на самом деле собирается палитра и почему нельзя просто раскрасить макет в фирменные цвета.
Брендбук решал другую задачу: логотип, визитка, баннер на выставке - там достаточно двух-трёх точных цветов и правил их сочетания. Сайт живёт по другим законам: на одном экране одновременно нужны фон, текст, три состояния кнопки, рамка поля ввода, плашка ошибки и десяток оттенков серого для карточек. Отсюда и путаница: заказчик ждёт "фирменный дизайн", а получает вопрос от дизайнера, какого цвета должна быть неактивная кнопка.
Сколько цветов на самом деле нужно интерфейсу
У рабочей палитры сайта три роли, а не список любимых цветов.
Основной цвет. Обычно это и есть фирменный цвет из логотипа. Он идёт в шапку, в заголовки, в основные кнопки - туда, где должен читаться бренд.
Акцентный цвет. Второй, контрастный к основному. Его задача - выделить ровно одно действие на экране, то, которое важнее остальных.
Нейтральная шкала. Серые оттенки от почти белого до почти чёрного. На них держится весь остальной интерфейс: фон страницы, текст, границы, карточки, разделители. По объёму использования нейтральная шкала обычно перевешивает оба фирменных цвета вместе взятых.
Палитра из семи равноправных цветов, которую иногда присылают в брендбуке, для интерфейса не подходит именно поэтому: там нет иерархии. Глаз не понимает, что главное, а разработчик не знает, какой из семи цветов ставить на кнопку "Отправить заявку", а какой на подпись к полю. У хорошей палитры сайта немного цветов. Зато у каждого есть чёткая работа.
Зачем каждому цвету шкала оттенков
Одного кода цвета хватает для логотипа, но не для кнопки. У кнопки минимум три состояния - обычное, наведение курсора и нажатие, - и у каждого свой оттенок. Добавьте неактивное состояние, светлый фон-подложку под тот же цвет и тёмный вариант для текста поверх светлого фона - и одного кода становится явно недостаточно.
У нас в проекте каждый цвет устроен не кодом, а шкалой: например, фиолетовый идёт от 50 (едва заметный лиловый оттенок) до 950 (почти чёрный) с шагом примерно в сто пунктов, и то же самое для акцентного оранжевого. Получается таблица применения:
| Ступень шкалы | Где используется |
|---|---|
| 50-100 (самая светлая) | Фон плашки, подложка под тег или бейдж |
| 200-300 | Границы, разделители, неактивные элементы |
| 400-500 (базовая) | Основная кнопка, ссылки, иконки |
| 600-700 | Наведение и нажатие кнопки |
| 800-950 (самая тёмная) | Текст на светлом фоне, крупные заголовки |
Без шкалы дизайнер каждый раз подбирает соседний оттенок на глаз, и в интерфейсе накапливаются десятки почти одинаковых, но чуть разных синих. По отдельности в вёрстке это почти незаметно, а всё вместе выглядит неряшливо.
Акцентный цвет - только для одного действия
Правило простое: акцентом красят одну кнопку на экране - ту, ради которой сделана вся страница. Обычно это "Оставить заявку" или "Купить". Всё остальное - вторичные кнопки, ссылки, декоративные элементы - живёт на основном цвете и нейтральной шкале.
Когда акцентом красят всё подряд: заголовки, иконки, рамки карточек, фоновые плашки, - цвет перестаёт быть сигналом. Посетитель на странице с десятком ярко-оранжевых элементов не понимает, куда смотреть в первую очередь, и главная кнопка перестаёт выделяться среди остальных элементов. О том же принципе - выделять только одно действие - мы писали в статье про способы поднять конверсию сайта: там речь про кнопки и офферы, но правило то же самое.
Контраст и читаемость: минимум, который нельзя нарушать
Здесь заканчивается свобода дизайна и начинается арифметика. Для обычного текста контраст между цветом текста и цветом фона должен быть не ниже 4,5 к 1, для крупного текста (от 24 пикселей или жирного от 19) - не ниже 3 к 1. Это не рекомендация, а минимальный порог, ниже которого часть посетителей текст физически не разберёт, особенно на солнце с телефона или при возрастном снижении зрения.
Именно тут фирменный жёлтый или светло-оранжевый почти всегда подводит: на белом фоне такой цвет даёт контраст в районе 2 к 1, то есть вдвое ниже нормы. Решение - развести роли: светлый оттенок из шкалы идёт на фон и декоративные элементы, а для текста и значков берётся тёмная ступень той же шкалы - она визуально узнаётся как тот же фирменный цвет, но проходит по контрасту. Подробнее о требованиях к контрасту и других правилах доступности - в статье про WCAG простыми словами.
Проверяется контраст инструментами, которые встроены в панель разработчика браузера или доступны отдельным сайтом-калькулятором: вводите два кода цвета, получаете число и вердикт "проходит" или "не проходит".
Цвета состояний берут не из брендбука
Зелёный для успешного действия, красный для ошибки, жёлтый или оранжевый для предупреждения - такая привычка закрепилась у пользователей годами, и спорить с ней бессмысленно. Если в форме появляется красная рамка и текст "заполните поле", человек реагирует на цвет быстрее, чем успевает прочитать текст.
Тут возникает конфликт: если фирменный акцентный цвет сам оранжевый или красный, он начинает конкурировать с сигналом ошибки или предупреждения. Решение - развести их по оттенку и обязательно дублировать смысл иконкой или текстом: часть посетителей физически не различает красный и зелёный, и один только цвет для них ничего не сообщает. Цвета состояний можно взять готовым, привычным набором и не пытаться вписать их в фирменную гамму любой ценой.
Что ломается в тёмной теме
Тёмная тема - это не инверсия цветов, а отдельная работа с той же шкалой. Насыщенный фирменный синий, который прекрасно читался текстом на белом фоне, на тёмно-сером фоне часто становится либо слишком тусклым, либо, наоборот, начинает слепить и вибрировать по краям букв.
Рабочий подход: для тёмной темы берутся другие ступени той же шкалы - обычно более светлые и чуть менее насыщенные, чем для светлой темы. Если шкала оттенков уже собрана правильно (см. раздел выше), это просто подстановка готовых значений, а не сборка второй палитры с нуля. Если её не было, тёмную тему приходится собирать заново методом проб, и получается ровно то, о чём мы разбирали в статье про тёмную тему на сайте: красиво в макете, нечитаемо в реальном интерфейсе.
Как хранить цвета в проекте
Коды цветов должны жить в одном месте - в переменных CSS или токенах дизайн-системы. Хардкодить их напрямую в стили каждого элемента - плохая идея, и разница на практике огромная: если фирменный цвет вдруг меняется (ребрендинг, обновление логотипа, просто "давайте сделаем чуть темнее"), с переменными правка занимает одну строку и применяется везде разом. Без переменных приходится искать все вхождения кода по всему проекту, и часть почти наверняка останется незамеченной.
Тот же принцип применяют к шкале оттенков: вместо десяти хаотично подобранных серых - именованный набор, где 500-я ступень везде значит одно и то же. Это же основа того, что называют дизайн-системой сайта - мы подробно разбирали состав такой системы и когда она вообще нужна в статье про дизайн-систему сайта.
Проверка на цветовую слепоту
Около 8% мужчин и меньше процента женщин не различают красный и зелёный в том или ином виде. Для сайта это значит одно: цвет никогда не должен быть единственным носителем смысла. У поля с ошибкой должна быть подпись текстом и иконка - одной красной рамки мало. График с несколькими линиями должен различаться не только оттенком, но и пунктиром или подписями напрямую на линиях.
Проверить палитру можно симулятором цветовой слепоты - таких инструментов много в открытом доступе, они накладывают фильтр на скриншот интерфейса и показывают, как его видит человек с той или иной формой дальтонизма. Проверка занимает пять минут и снимает добрую половину рисков, о которых дизайнер обычно не задумывается заранее.
Порядок сборки палитры за один вечер
Если фирменных цветов пока только два и дизайн-системы ещё нет, палитру можно собрать по шагам за один рабочий вечер:
- Зафиксировать основной и акцентный цвет - обычно они уже есть в логотипе.
- Построить для каждого шкалу из 8-10 ступеней от светлой к тёмной - вручную или генератором палитр по одному базовому коду.
- Выбрать нейтральную серую шкалу такой же длины: тёплую или холодную, в тон основному цвету.
- Проверить контраст для типовых пар "текст на фоне" - минимум для основного текста и для текста на кнопках.
- Взять готовый набор цветов состояний (успех, ошибка, предупреждение, информация) и свести с акцентным цветом на предмет конфликта.
- Прогнать макет через симулятор цветовой слепоты.
- Оформить всё переменными в коде и передать разработчику файлом, а не скриншотом макета.
Этого достаточно для рабочей версии 1.0. Дальше палитра дорабатывается по мере появления новых экранов - личного кабинета, форм, уведомлений, - но костяк уже не меняется.
От двух цветов в брендбуке до полусотни в интерфейсе
Палитра сайта - это система ролей: основной цвет, акцент, нейтральная шкала и цвета состояний, у каждого своя лестница оттенков от светлого до тёмного. Два фирменных цвета из брендбука в этой системе занимают ровно две ячейки, а не всю таблицу.
Собрать её один раз и сохранить переменными дешевле, чем каждый раз подбирать оттенок кнопки на глаз - и надёжнее, чем полагаться на память дизайнера, который через год займётся другим проектом.
Если хотите увидеть, как разведение цветов на роли выглядит в готовых интерфейсах, загляните в наши кейсы: у медцентров и у интернет-магазинов из этой подборки палитра держится на двух фирменных цветах и десятках их оттенков, а не на семи разных красках сразу.
