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

Строит цветовые схемы от одного базового цвета, генерирует случайные палитры и создаёт градиенты, которые можно скопировать как CSS или сохранить как изображение PNG. Пригодится, чтобы подобрать цвета для дизайна, презентации или веб-страницы.

Как пользоваться

1. На вкладке «Палитра» выберите «Базовый цвет» и «Схема». Если результат нравится, нажмите «Взять эту схему в палитру».
2. Нажмите «Сгенерировать (пробел)», чтобы получить новые цвета; закрепите те, что хотите оставить, и сгенерируйте снова.
3. Заберите цвета кнопками «Копировать список HEX», «Копировать CSS-переменные» или «Сохранить как изображение», а «Запомнить палитру» сохранит палитру на потом.
4. На вкладке «Градиент» задайте «Тип», «Угол» и «Опорные точки», затем скопируйте CSS-код или нажмите «Сохранить PNG».

Как это работает

• Схемы поворачивают цветовой тон на цветовом круге HSL: комплементарная — 180°, аналоговая — ±30°, триада — 120°, раздельно-комплементарная — 150° и 210°, квадрат — шаги по 90°.
• Оценки контраста соответствуют WCAG 2.2: для AA нужно 4,5:1, для AAA — 7:1, для крупного текста — 3:1.
• «Имитация цветового зрения» — приближение по Machado et al. (2009). Она меняет только цвета на экране, а не копируемые или сохраняемые значения.
• В этом браузере на этом устройстве хранится до 40 запомненных палитр.

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

Как найти дополнительный (комплементарный) цвет?

Это цвет прямо напротив на цветовом круге, через 180°. Установите «Схема» на «Комплементарная», чтобы увидеть его, и нажмите на образец, чтобы скопировать его значение HEX.

Как сделать градиент в CSS?

На вкладке «Градиент» нажимайте на полосу, чтобы добавить опорные точки, и задайте их цвета и положение. В поле CSS показан готовый для копирования код.

Почему цвета в середине градиента выглядят тусклыми?

Установите «Пространство интерполяции» на OKLCH. Цвета в середине останутся ярче, а в CSS добавится запасная строка для старых браузеров.

Как понять, будет ли текст читаемым на этом цвете?

Для каждого цвета показаны коэффициент контраста и оценка для более читаемого цвета текста — белого или чёрного. Коэффициент равен (L1 + 0,05) ÷ (L2 + 0,05), где L1 и L2 — относительная яркость более светлого и более тёмного цвета.