Генератор цветовых палитр создаёт гармоничные наборы цветов по правилам теории цвета: монохромные, комплементарные, аналоговые, триадные, тетрадные. Из одного базового цвета получаете готовый набор 5–10 оттенков с привязкой к светлоте, насыщенности и оттенку в пространствах HSL и OKLCH.
Палитра полезна дизайнерам для бренд-гайдлайнов (primary, secondary, accent), frontend-разработчикам для Tailwind config с 50, 100, 200 ... 900 оттенками, продуктовым командам для дизайн-систем и shadcn/ui тем. Все цвета проверяются на контрастность по WCAG — видно, какие пары проходят AA/AAA.
Экспорт в CSS-переменные (`--color-primary-500`), Tailwind config, Figma Styles, JSON для Design Tokens. Поддерживается OKLCH-шкала — перцептивно равномерные оттенки, где светлота выглядит одинаково для жёлтого и фиолетового.
Введите базовый HEX или выберите его на color picker.
Бесплатный виджет с бэклинком на ваш сайт
Загрузка…
Выберите схему гармонии: monochrome, complementary и т. д.
Настройте количество оттенков (5, 10, 11-ступенчатая).
Проверьте WCAG-контраст пар и скорректируйте светлоту.
Скопируйте в Tailwind config, CSS-переменные или Figma.
Monochromatic, analogous, complementary, triad, tetrad.
Автоматические 11 оттенков 50–950 для каждого цвета палитры.
Шкалы светлоты в OKLCH — одинаково читаются для всех оттенков.
Матрица контрастов всех пар цветов — AA, AAA, fail.
CSS-переменные, Tailwind, Figma Styles, shadcn/ui, JSON tokens.
Для лучших результатов используйте современный браузер (Chrome, Firefox, Edge)
Все файлы обрабатываются локально в вашем браузере для максимальной безопасности
Сохраняйте результат сразу после обработки
Попробуйте разные настройки для оптимального результата
Monochromatic — сдержанный и профессиональный. Complementary — яркий контрастный. Analogous — мягкий «природный». Triadic — сбалансированный, подходит для многокомпонентных интерфейсов. Для большинства SaaS — monochromatic + 1 accent.
Такое разбиение покрывает фон (50, 100), текст (700–950), границы (200–300), состояния hover/active (500/600) и акценты. Делает дизайн-систему предсказуемой на всём проекте.
В OKLCH L (lightness) перцептивно равномерен — при одинаковой L жёлтый и синий кажутся одинаково светлыми. В HSL жёлтый с L=50% выглядит намного ярче синего с L=50%, и шкала становится неравномерной.
Проверьте все пары «текст на фоне» на контраст ≥ 4.5:1 (AA) для обычного текста и ≥ 3:1 для UI-элементов. Наш генератор показывает матрицу контрастов — красные ячейки нужно править.
Да — инструмент инвертирует шкалу (50 ↔ 950, 100 ↔ 900 ...) и корректирует насыщенность. Получаете готовую dark-палитру с сохранением бренд-оттенков.
Создайте QR-код из текста, URL или данных