Цветовая лаборатория

Лаборатория — это место, где палитра перестаёт быть набором образцов и становится интерфейсом. Вы назначаете цвета ролям, а не элементам, и превью показывает, во что это решение превращается на настоящих компонентах ещё до строчки CSS.

Открыть цветовую лабораторию

Роли, а не цвета

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

Контраст проверяется на ходу

Текст на фоне и текст на поверхности оцениваются постоянно, рядом с коэффициентом стоит оценка WCAG. Вы узнаёте о провале, пока поменять цвет ещё дёшево, — а не после релиза.

Пресеты стиля и типографики

Minimal, Classic и Glass меняют отрисовку поверхностей, границ и теней, а пары шрифтов переключают заголовочный и текстовый вместе. Быстрый способ проверить, выживет ли палитра при другой подаче.

По шагам

Задайте отправную точку — основной цвет или Smart Randomize для связного набора.
Посмотрите контраст текста на фоне и на поверхности; минимум — уровень AA.
Переключитесь между светлой и тёмной темой и убедитесь, что обе держатся.
Попробуйте другой стиль UI и пару шрифтов, чтобы проверить палитру в иной подаче.
Выгрузите результат в CSS-переменные или JSON-токены.

Частые вопросы

Нужен ли аккаунт для лаборатории?

Нет. Собирать и смотреть палитру можно без входа. Аккаунт нужен для инструментов, работающих на кредитах, и чтобы сохранять работы в дашборд.

Что делает Smart Randomize?

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

Почему в светлой теме палитра хороша, а в тёмной — нет?

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