Генератор случайного цвета онлайн
Получите случайный цвет или палитру из 5 оттенков: светлый, тёмный, пастельный, яркий, тёплый или холодный. HEX, RGB и HSL копируются в один клик.
Что делает генератор случайного цвета
Генератор создаёт один случайный цвет или палитру из 5 оттенков в выбранной категории: любой, светлый, тёмный, пастельный, яркий, тёплый или холодный. Каждый результат сразу показан как HEX, RGB и HSL, поэтому цвет можно быстро перенести в CSS, дизайн-инструмент, прототип или тестовые данные.
Цвет выбирается через браузерный `Math.random()` и HSL-диапазоны. Это не полностью случайный RGB: диапазоны помогают получить нужный характер оттенка, например светлый фон, тёмный акцент, пастельный тон или яркую кнопку.
Как пользоваться
- Выберите тип цвета — например, «Пастельный» для нежных тонов
- Переключите режим: 1 цвет или палитра из 5
- Нажмите «Сгенерировать» или Пробел
- Кликните по строке HEX / RGB / HSL — значение скопируется
- В блоке «История» сохраняются последние 12 цветов — кликните, чтобы вернуться
Категории цветов и как они работают
Цвета выбираются в пространстве HSL: тон задаёт место на цветовом круге, насыщенность управляет чистотой оттенка, светлота делает цвет ближе к белому или чёрному. HSL-диапазон для каждой категории ограничивает эти параметры.
| Категория | HSL-диапазон | Визуальный смысл | Где применять |
|---|---|---|---|
| Любой | H 0–360, S 20–95, L 20–80 | Широкий случайный разброс | Поиск без ограничений, мудборды |
| Светлый | L 70–90 | Много света, мягкий фон | Фоны, карточки, hover-состояния |
| Тёмный | L 10–30 | Глубокий тон, высокий вес | Тёмные темы, акценты, типографика |
| Пастельный | S 25–55, L 75–88 | Приглушённая насыщенность | Детская тематика, lifestyle, инфографика |
| Яркий | S 80–100, L 45–55 | Чистый насыщенный цвет | CTA-кнопки, баннеры, иллюстрации |
| Тёплый | H 330–60, S 55–95, L 45–70 | Красно-жёлтая зона круга | Еда, осень, эмоции |
| Холодный | H 160–280, S 55–95, L 40–65 | Зелёно-сине-фиолетовая зона | Технологии, медицина, корпоратив |
HEX, RGB и HSL — в чём разница
Все три формата описывают один и тот же цвет, но разными способами. Браузеры понимают любой из них в CSS.
| Формат | Пример | Где использовать | Что важно |
|---|---|---|---|
| HEX | `#3B82F6` | CSS, HTML, Figma, дизайн-токены | Компактная запись из 6 шестнадцатеричных цифр |
| RGB | `rgb(59, 130, 246)` | Графические редакторы, данные, прозрачность через rgba | Три экранных канала от 0 до 255 |
| HSL | `hsl(217, 91%, 60%)` | Тонкая настройка оттенков и дизайн-системы | Отдельно управляет тоном, насыщенностью и светлотой |
Контраст и читаемость
Под каждым цветом отрисован пример текста «Aa» — белым или чёрным в зависимости от относительной яркости. Это быстрая подсказка для чтения образца, но она не является полноценной WCAG-проверкой и не показывает числовой contrast ratio.
- Перед использованием цвета в интерфейсе проверьте конкретную пару текст/фон отдельным contrast checker.
- Один и тот же HEX может выглядеть иначе из-за калибровки экрана, профиля sRGB/P3, яркости дисплея и соседних цветов.
- Для бренд-системы случайный цвет лучше считать отправной точкой: итоговые роли, состояния, тёмную тему и доступность нужно доработать вручную.
Чем отличается от соседних инструментов
| Задача | Что выбрать |
|---|---|
| Быстро получить случайный HEX, RGB или HSL | Генератор случайного цвета |
| Собрать гармоническую схему из 5 цветов | Генератор цветовых палитр |
| Перевести готовый цвет между форматами | Конвертер цветов |
| Сделать CSS-фон из двух и более цветов | Генератор CSS-градиентов |
| Получить случайное число или дату | Генераторы случайных чисел и дат |
Часто задаваемые вопросы
Источники и нормативная база
- HSL and HSV — WikipediaWikipedia
- Web Color — CSS Color ModuleW3C
- WCAG 2.2 — Contrast (Minimum)W3C WAI
- Math.random() — JavaScriptMDN Web Docs
Расчёты выполняются на основе указанных нормативных и справочных источников. Ссылки открываются в новой вкладке.
Похожие инструменты
Переводите цвета между HEX, RGB и HSL, выбирайте оттенок в палитре и получайте ориентировочный CMYK для печати.
Создавайте палитры из 5 цветов по базовому цвету и гармонии: монохром, аналогичная, комплементарная, триада или тетрада. HEX/RGB/HSL, UI-превью и экспорт в CSS, Tailwind или JSON.
Создайте CSS-градиент онлайн: linear, radial или conic, до 6 цветовых стопов, угол или центр, живое превью, 12 пресетов, готовый CSS и Tailwind-класс.
Сгенерируйте одно число или список случайных чисел: диапазон от и до, целые и дробные значения, без повторений, выбор из списка, монетка и кубик.
Сгенерируйте одну дату или список случайных дат между заданными границами: количество до 1000, только будни, без повторов, ISO/русский/US/Unix и CSV.