Генератор случайного цвета онлайн

Нужен оттенок для фона, кнопки или обложки, а пипеткой тыкать уже надоело? Жмите кнопку — получите цвет с готовым кодом в HEX, RGB или HSL, который остаётся скопировать в проект. Есть пастель, неон, тёмные и тёплые гаммы.

⚙️ Настройки генератора

Выберите стиль цветовой палитры для вашего проекта
От 1 до 20 цветов в палитре
Выберите формат для использования в коде

⚡ Дополнительные настройки

🎯 Сгенерированные цвета

Настройте параметры и нажмите "Сгенерировать цвета"
Доступны форматы: HEX, RGB, RGBA, HSL, HSLA и названия цветов

💡 Практическое применение

🎨
Веб-дизайн
Цветовые схемы для сайтов и веб-приложений
📱
UI/UX дизайн
Подбор цветов для интерфейсов мобильных приложений
🖼️
Графический дизайн
Создание палитр для иллюстраций и баннеров
🎯
Брендинг
Подбор корпоративных цветов для айдентики

Когда палитра не складывается сама

У дизайнеров это называется «страх белого холста», у остальных — «какой фон поставить, чтобы не резало глаз». Случайность здесь работает как источник идей: пролистайте двадцать вариантов, и рука сама потянется к одному из них. А чтобы перебор не был совсем слепым, задайте направление — пастель для нежного лендинга, тёмные оттенки для ночной темы, неон для афиши.

Режимов десять: помимо тематических гамм есть монохромный (оттенки одного тона), аналогичный (соседи по цветовому кругу — спокойные сочетания) и комплементарный (противоположности, дающие максимальный контраст). Это базовые приёмы теории цвета, только без ручного подбора.

Форматы на выходе

HEX
#FF5733 — веб-стандарт: CSS, Figma, соцсети
RGB / RGBA
rgb(255, 87, 51) — с прозрачностью для оверлеев
HSL / HSLA
hsl(14, 100%, 60%) — удобно крутить яркость, не меняя тон
Name
английские названия — tomato, teal, lavender

Мелочи для работы

Проверка контраста

Для каждого результата виден контраст с белым — сразу понятно, выживет ли светлый текст на этом фоне.

Сразу несколько

Генерируйте не по одному, а серией — удобно собирать палитру проекта целиком, а коды копировать в один клик.

Разбор по HSL

Оттенок, насыщенность и яркость показываются для каждого варианта — легко понять, почему сочетание работает, и повторить приём вручную.

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

Чем HEX отличается от RGB и HSL?

Это три записи одного и того же: HEX компактен и привычен в вебе, RGB раскладывает оттенок на красный-зелёный-синий, а HSL — на тон, насыщенность и яркость, поэтому в нём проще осветлить или приглушить цвет, не «уводя» его в другой тон.

Как подобрать пару цветов, которые точно сочетаются?

Возьмите аналогичный режим для спокойной пары или комплементарный — для контрастной. Первый хорош для фонов и карточек, второй — для кнопок и акцентов на нейтральной подложке.

Подойдёт ли не-дизайнеру?

Именно для этого и сделано: цвет для презентации, таблицы, ника в игре или вязаного свитера выбирается одной кнопкой, а знать теорию цвета не обязательно.

Поболтаем?
Перейти