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

Генерируйте случайные цвета в форматах HEX, RGB или HSL. Фильтруйте по настроению палитры — тёплые, холодные, пастельные, тёмные или неоновые.

Генератор цветов
// случайные цвета в форматах HEX, RGB или HSL
HEX RGB HSL
Нажмите «Сгенерировать»
Об инструменте

Что такое генератор случайных цветов?

Наш генератор случайных цветов создаёт цвета в трёх наиболее распространённых форматах: HEX (используется в HTML/CSS), RGB (используется в инструментах дизайна и CSS) и HSL (человекочитаемый формат оттенок/насыщенность/светлота). Переключайтесь между форматами мгновенно, не генерируя новый цвет.

Фильтр палитры ограничивает генерацию определёнными диапазонами настроения: «Тёплые» — красные, оранжевые и жёлтые; «Холодные» — синие и бирюзовые; «Пастельные» — светлые, мягкие тона; «Тёмные» — почти чёрные и глубокие оттенки; «Неоновые» — высоконасыщенные, яркие цвета, идеальные для цифровых интерфейсов.

Каждый сгенерированный цвет отображается в виде прямоугольника с живым превью, чтобы вы могли увидеть его перед копированием. Кнопка копирования всегда выводит текущий выбранный формат.

🎨
Дизайн и UI
Быстро подбирайте фоновые цвета, акцентные цвета или оттенки рамок для веб- и мобильных интерфейсов.
🖼️
Искусство и иллюстрация
Преодолевайте творческие блоки, работая с цветом, который вы бы не выбрали осознанно.
💻
Фронтенд-разработка
Получайте CSS-значение цвета для прототипирования, заглушек или тестирования контрастности.
📊
Визуализация данных
Генерируйте различающиеся цвета для серий графиков, категорий на картах или групп узлов в диаграммах.
Как пользоваться

Начните за секунды

// без регистрации, без установки — просто настройте и генерируйте.

01
Выберите палитру
Выберите «Любой» для полностью случайных цветов или отфильтруйте по настроению: тёплые, холодные, пастельные, тёмные или неоновые.
02
Выберите формат
Нажмите HEX, RGB или HSL над полем вывода, чтобы выбрать нужный формат цвета. Формат можно менять без повторной генерации.
03
Сгенерируйте
Нажмите «Сгенерировать цвет» или Enter. Прямоугольник превью обновляется мгновенно, чтобы вы могли увидеть цвет перед копированием.
04
Скопируйте и используйте
Нажмите «Копировать», чтобы получить значение цвета в выбранном формате. Вставляйте прямо в CSS, Figma, Photoshop или любой другой инструмент дизайна.
FAQ

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

HEX — шестнадцатеричный код из 6 символов, используемый в HTML и CSS (например, #FF6B35). RGB задаёт каналы красного, зелёного и синего (0-255). HSL описывает оттенок (0-360), насыщенность (%) и светлоту (%) — что более интуитивно для дизайнеров.
Да — нажатие на HEX, RGB или HSL переключает формат вывода для текущего отображаемого цвета без генерации нового.
Каждая палитра ограничивает диапазоны каналов RGB для создания цветов соответствующего настроения. «Тёплые» усиливают красный/жёлтый каналы, «Холодные» — синий, «Пастельные» устанавливают все каналы высоко, «Тёмные» — низко, а «Неоновые» создают резкие всплески насыщенности.
В настоящее время инструмент генерирует один цвет за нажатие. Нажимайте несколько раз и записывайте значения, чтобы собрать многоцветную палитру.
HEX и RGB прекрасно работают в CSS. HSL также является допустимым форматом CSS и часто предпочтителен для манипуляций с цветом, так как можно изменять только компонент оттенка.