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

Генерируйте случайные цвета с их значениями в форматах HEX, RGB и HSL. Закрепляйте понравившиеся цвета, перегенерируйте остальные и копируйте любой цветовой код одним кликом.

Нажмите пробел (или кнопку «Сгенерировать») и страница покажет новый ряд случайных цветов, каждый с названием и значениями HEX, RGB и HSL. Передвиньте ползунок — и палитра меняется от одного акцентного цвета до восьми образцов. Переключите «Стиль» на Пастель, Яркий, Тёмный или Земляные, чтобы направить случайность в нужное настроение, или выберите правило «Гармония» (комплементарная, аналогичная, триадная, тетрадная) — и оттенки сложатся по теории цвета, а не сами по себе. Закрепите понравившиеся замком и перетряхните остальные. Любой код копируется одним кликом, а вся палитра скачивается в виде обычного текстового файла или готовой к публикации картинки PNG. Нужен код? Одно нажатие копирует весь набор как блок :root с пользовательскими свойствами CSS, а другое — ссылку, которая открывает именно эту палитру там, куда вы её вставите. Откройте полоску светлых и тёмных оттенков под любым образцом, чтобы взять пять более светлых и пять более тёмных шагов — для состояний наведения, рамок и подкрашенных фонов.

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

1. Задайте, сколько цветов нужно (от 1 до 8, по умолчанию 5), и нажмите «Сгенерировать», чтобы заполнить палитру.
2. Закрепите цвета, которые хотите сохранить, и сгенерируйте заново — обновятся только незакреплённые.
3. Кликните на любой цветовой код (HEX, RGB или HSL), чтобы скопировать его в буфер обмена.

Когда использовать

• Сбить творческий ступор, когда смотришь в пустой Figma и нет ни намёка на цветовую идею.
• Подобрать «семью» оттенков для пет-проекта, мозговой штурм-документа или арт-занятия с детьми — подойдёт любая случайная тональность.
• Быстро взять HEX для разовой графики (баннер, плитка для соцсетей, обои) без чтения подборок «цвет года».

Результат

Веб-дизайнер ищет акцентные цвета для нового проекта. Генерирует палитры, пока не находит #E8674A (тёплый коралловый), закрепляет его и продолжает искать подходящие дополнительные цвета.

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

Как именно выбирается цвет?

В режиме по умолчанию «Случайно + Любой» каждый канал (красный, зелёный, синий) получает новое целое число от 0 до 255, так что выпасть может любой из примерно 16,7 миллионов RGB-троек — действительно равномерная случайность, без перекоса в сторону «красивых» цветов. Когда вы выбираете Стиль (Пастель, Яркий, Тёмный, Земляные), инструмент случайно подбирает тон, насыщенность и светлоту внутри диапазона этого настроения. Режимы Гармонии берут одну случайную базу и выводят остальные оттенки через сдвиги по цветовому кругу.

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

В RGB равномерный случайный выбор тяготеет к серединным серо-коричневым тонам — большая часть куба попадает именно туда. Самый быстрый способ это исправить — переключить «Стиль» с «Любой» на Яркий или Пастель: инструмент возьмёт цвет из подобранного диапазона тона/насыщенности/светлоты, и мутная середина просто не появится. Можно также зафиксировать удачные яркие цвета и перетряхнуть остальные пару раз, пока ряд не сложится.

Можно сохранить понравившийся цвет, перегенерировав остальные?

Да. Нажмите замок на нужной плашке, потом «генерировать». Заблокированные цвета остаются, остальные тасуются заново. Самый быстрый способ зафиксировать базу и подобрать к ней акценты.

В чём разница между HEX, RGB и HSL?

HEX (#1A2B3C) — это тот же RGB в шестнадцатеричной записи, привычно для CSS и дизайн-инструментов. RGB (rgb(26,43,60)) задаёт три канала в десятичных. HSL (hsl(210,40%,17%)) описывает тон, насыщенность и светлоту — удобнее для ручной донастройки.

Это настоящий случайный выбор или на основе seed?

Используется Math.random из JavaScript внутри вкладки. Формально это псевдослучайный поток, но для подбора цветов он неотличим от настоящего случайного. Перезагрузите страницу — получите полностью новую палитру.

Похожие инструменты