Генератор цветовой палитры

Выберите подходящую схему

Практическая структура палитры

Сгенерированная гармония является отправной точкой, а не полной дизайн-системой. Для рабочего UI называйте цвета по роли, а не по внешнему виду: primary, secondary, accent, surface, border, text, success, warning и error. Нейтральные серые оттенки добавляйте отдельно, потому что они обычно требуют более точного контроля, чем генератор на основе оттенка.

Используйте сгенерированные HEX-цвета прямо в прототипе, а затем оставляйте только те, которые работают на реальных экранах, светлых и темных фонах, а также в состояниях hover и disabled.

Экспорт CSS-переменных

Шаг экспорта использует простые пользовательские свойства:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

Переименуйте эти переменные под свою систему, когда вставляете их в CSS, токены темы Tailwind или файл design tokens.

HEX, RGB и HSL

Ввод и видимый вывод используют HEX, потому что этот формат проще всего копировать между CSS, дизайн-инструментами и комментариями к задачам. Внутри базовый цвет переводится в HSL, затем сдвигается оттенок или светлота, а результат снова выводится в HEX. Если нужны RGB или HSL, пропустите сгенерированные HEX-значения через конвертер цветовых кодов.

Контраст и доступность

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

• Обычный текст на фоне: минимум 4,5:1 для WCAG AA.
• Крупный текст: минимум 3:1.
• Важные нетекстовые части UI, например границы кнопок, иконки, индикаторы фокуса и края графиков: минимум 3:1 относительно соседних цветов.

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

Советы

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