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

Создавайте палитры из базового цвета: комплементарные, аналоговые, триадные, тетрадные, квадратные и монохромные гармонии. Экспорт в CSS и Tailwind.

Настройки палитры

Базовый цвет

Цветовая гармония

Базовый тон + противоположный (180°).

Поворот тона в

Закрепите понравившиеся цвета: «Сгенерировать заново» выберет новый случайный базовый цвет и сохранит закреплённые.

Экспорт

Формат

Имя токена

Палитра

#3b82f6

oklch(62.3% 0.188 259.8)

#b07d00

oklch(62.5% 0.129 79.9)

Код для экспорта

:root {
  --palette-1: #3b82f6;
  --palette-2: #b07d00;
}

Что такое Генератор цветовых палитр?

Строит палитру из одного базового цвета по классическим гармониям цветового круга. Поворот оттенка можно выполнять в перцептивном OKLCH (воспринимаемая яркость остаётся одинаковой) или в привычном HSL. Цвета можно зафиксировать перед перегенерацией, а палитру экспортировать как переменные CSS, SCSS, конфиг Tailwind v3, @theme Tailwind v4 или JSON.

Как пользоваться Генератор цветовых палитр

Введите базовый цвет (hex, rgb(), hsl() или oklch()) или нажмите «Случайно», чтобы получить случайный.
Выберите цветовую гармонию и пространство поворота оттенка: OKLCH или HSL.
Зафиксируйте цвета, которые хотите сохранить; перегенерация заменит только незафиксированные.
Щёлкните по образцу, чтобы скопировать его hex-значение.
Выберите формат экспорта и имя токена и скопируйте код.

Пример

Ввод

Base #ff0000, Triadic, HSL

Вывод

:root {
  --palette-1: #ff0000;
  --palette-2: #00ff00;
  --palette-3: #0000ff;
}

Когда использовать Генератор цветовых палитр

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

Как работает Генератор цветовых палитр

Гармонии поворачивают оттенок базового цвета на фиксированные углы, сохраняя насыщенность и яркость: комплементарная 0°/180°, аналоговая 0°/±30°/±60°, триадная 0°/120°/240°, расщеплённая комплементарная 0°/150°/210°, тетрадная 0°/60°/180°/240°, квадратная 0°/90°/180°/270°. Монохромная сохраняет оттенок и меняет яркость на −30, −15, 0, +15, +30 (HSL %) или ±0,15/±0,3 (L в OKLCH). Цвета OKLCH вне sRGB приводятся к гамме уменьшением насыщенности. Случайная генерация выбирает базу с оттенком 0–360°, насыщенностью 55–85% и яркостью 45–60%.

Распространенные Случаи Использования

Поиск цветов бренда по цвету логотипа
Акцентные цвета для темы интерфейса
Цвета категорий для визуализации данных
Экспорт палитры в пользовательские свойства CSS
Настройка темы Tailwind

Часто Задаваемые Вопросы

Поворачивать оттенок в OKLCH или HSL?

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