Цвет навигации, карточек и акцентов влияет на удобство работы. Настройте палитру на живом макете дашборда — прямо здесь.
🔒 Всё работает в браузере — данные никуда не отправляются
Сайдбар — один из самых важных элементов дашборда. Его цвет задаёт общий тон интерфейса. Тёмный сайдбар (тёмно-синий, зелёный, антрацит) создаёт чёткое разделение между навигацией и рабочей областью. Светлый сайдбар выглядит воздушнее, но требует чёткой иерархии через размер и жирность текста.
Активный пункт меню лучше выделять фоном с opacity 20–30% от акцентного цвета — это мягче, чем полностью закрашенный прямоугольник.
Для графиков и диаграмм важна не только красота, но и различимость. При цветовой слепоте (8% мужчин) красный и зелёный неразличимы — не используйте их как единственный способ различить данные. Добавляйте паттерн или форму.
Хорошая последовательность для многоцветных графиков строится на фиксированном hue-шаге: возьмите акцентный цвет, добавьте 30–60° к Hue в HSL для каждого следующего ряда данных — получится гармоничная палитра.
Исследования неоднозначны, но большинство указывает: для длительной работы (8+ часов) тёмная тема снижает нагрузку на глаза в условиях низкой освещённости. В ярко освещённом офисе светлая тема читается лучше. Лучшее решение — дать пользователю выбор.
Используйте семантические цвета: зелёный (#22c55e) — рост, успех; красный (#ef4444) — спад, ошибка; жёлтый (#f59e0b) — предупреждение; синий — нейтральная информация. Не используйте эти цвета для декора — только для смысловых сигналов.
Базовая палитра: 1 акцент (навигация, кнопки) + 3 нейтральных (фон, поверхность, граница) + 4 семантических (успех, ошибка, предупреждение, информация) = 8 цветов. Этого достаточно для полноценного интерфейса.
