Как подобрать цвета,
чтобы дашборд хотелось читать

1. Сначала определите, что цвет означает

Представьте отчёт, в котором каждая карточка имеет собственный яркий фон, графики собраны из случайных цветов, а все изменения выделены красным или зелёным. Отдельные элементы могут выглядеть эффектно, но вместе они спорят за внимание.

Начните с ролей. Фон создаёт спокойную основу. Текст сообщает смысл. Цвет данных показывает значения. Акцент выделяет то, на что нужно посмотреть сейчас. Цвет состояния помогает заметить ошибку или предупреждение.

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

В предыдущей статье мы выбирали форму графика. Теперь оставим форму и числа одинаковыми, чтобы сравнить именно оформление.

2. Три палитры на одном наборе данных

В учебном примере магазина за 5–11 октября 2026 года оплачено 1 475 заказов: поиск — 583, реклама — 421, прямые заходы — 287, рассылки — 184. Каждый заказ учитывается один раз по времени полной оплаты, часовой пояс — Москва. Для распределения используется последний известный непрямой переход за 30 дней до оплаты; если его нет — прямой заход.

Все три графика ниже имеют общую шкалу от 0 до 650 заказов и одинаковые пропорции. Меняются фон и палитра. Коды цветов под графиками можно использовать как отправную точку для своего макета.

Молочный фон и синий

Подходит для подробного аналитического отчёта со статьями, таблицами и графиками. Тёплый фон смягчает впечатление, тёмный текст остаётся заметным, а синий объединяет элементы. Это близко к оформлению нашего сайта.

Светлый шалфей

Более мягкий вариант для спокойного обзора. В этой палитре зелёный — цвет данных, а не знак хорошего результата. Поэтому не стоит на соседнем экране использовать тот же оттенок как единственное обозначение «всё в порядке».

Глубокий синий

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

Не обязательно использовать все три темы в одном дашборде. Выберите основную и поддерживайте её на связанных страницах. Галерея показывает варианты выбора, а не рекомендацию смешать их.

3. Один акцент помогает увидеть нужное

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

Акцент обозначает выбранный канал. Он не означает, что реклама лучшая, худшая или самая прибыльная. Это прямо сказано в заголовке. Если пользователь переключит канал, выделение и подпись должны обновиться вместе.

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

Слишком бледные соседние столбцы тоже мешают: они нужны для сравнения. Подписи и значения должны оставаться читаемыми, даже когда группа не выбрана.

4. Разные задачи требуют разных цветовых шкал

Категории: цвета различают, но не ранжируют

Если цвет обозначает источник трафика, закрепите соответствие: поиск всегда одного цвета, реклама — другого. Не меняйте его после сортировки. Иначе человек решит, что видит ту же категорию на соседней странице, хотя это уже другой канал.

При большом числе категорий палитра быстро становится трудной для чтения. Вместо десятка близких оттенков попробуйте прямые подписи, фильтр или отдельные небольшие графики.

Количество: от светлого к насыщенному

Для тепловой карты более насыщенный цвет может означать больше заказов. Переход должен быть последовательным, а шкала — общей для сравниваемых участков.

Числа на шкале — ориентиры диапазона. Цвет не заменяет точное значение: при необходимости подпишите ячейки или дайте доступ к таблице. Пропуск данных должен иметь отдельное обозначение, чтобы его не путали с минимальным значением.

Отклонение: два направления от осмысленного центра

Для отклонения от плана можно использовать два цвета: один для значения ниже плана, другой для значения выше. Центр — ноль, а не среднее наблюдений. Назовите единицу: например, процент отклонения от плана.

Это схема палитры, а не измеренные результаты магазина. Симметричные границы позволяют одинаковым по модулю отклонениям получать сопоставимую насыщенность. При фильтрации следите, чтобы автоматическая смена диапазона не меняла впечатление от тех же значений.

5. Красный и зелёный требуют контекста

Рост не всегда означает улучшение. Средний чек может вырасти, пока число заказов и общая сумма снижаются. Увеличение времени на странице может означать интерес или затруднение. Цвет не должен принимать решение вместо аналитика.

Если бизнес определил целевой диапазон, покажите его и подпишите состояние: «Ниже целевого диапазона», «В пределах», «Нет данных». Сохраняйте знак и величину изменения. Человек должен понимать результат даже без цвета.

Вторая карточка демонстрирует предупреждение, а не утверждает, что наш учебный набор неполный. В рабочем отчёте такой статус должен приходить из проверок данных.

6. Красивый оттенок ещё нужно проверить на читаемость

Светло-серый текст на молочном фоне может выглядеть изящно на большом мониторе и теряться на телефоне. Проверяйте именно сочетание текста и фона, а не цвет по отдельности.

Для обычного текста ориентир WCAG уровня AA — контраст не ниже 4,5:1. Цвет не должен быть единственным носителем смысла: используйте подписи, знаки, форму маркеров или пунктир. Проверка одной пары цветов не означает, что весь дашборд соответствует требованиям доступности.

В этой статье для текста на светлом фоне используются тёмные оттенки, а на тёмном — светлые. Числа вынесены за пределы столбцов: не нужно подбирать отдельный цвет текста под каждую заливку.

Посмотрите макет в оттенках серого. Сохранились ли названия, значения и выбранная группа? Это полезная быстрая проверка, но она не заменяет проверку контраста и особенностей цветового восприятия.

Убедитесь, что объяснения доступны без наведения мыши. При увеличении масштаба текст не должен обрезаться. Экспорт в картинку или PDF также стоит проверить отдельно: тонкие линии и бледные подписи могут стать менее заметными.

7. Соберите небольшую систему, которую легко поддерживать

Это пример ролей, а не универсальный набор для всех экранов. Если одновременно показываете категорию, выбор и состояние, определите, какой признак передаётся цветом, а какой — рамкой, знаком или подписью. Один элемент не должен пытаться рассказать всё одной заливкой.

В веб-проекте такие роли удобно хранить в переменных стилей, а в BI-инструменте — в теме или согласованной палитре. Тогда смена оформления не потребует вручную перекрашивать каждую карточку. Конкретный способ зависит от платформы.

8. Практическое задание и проверка перед публикацией

Возьмите один экран. Выпишите, что означает каждый цвет. Если объяснение звучит как «так красивее», попробуйте временно сделать этот элемент нейтральным. Затем верните один акцент на то, что нужно заметить первым.

• Одинаковые сущности сохраняют цвета на разных страницах.
• Выделение связано с вопросом, а не со случайным порядком строк.
• Подписи и числа можно прочитать на фоне.
• Значения понятны без различения цветов.
• Пропуск, ноль и ошибка не выглядят одинаково.
• Цветовые шкалы подписаны и сопоставимы между периодами.
• Мобильный экран и экспорт сохраняют важные пояснения.

Попросите будущего читателя объяснить, что означает выделенный элемент. Если его ответ отличается от вашего замысла, исправьте подпись или роль цвета. Это более полезная проверка, чем вопрос «Нравится ли палитра?».