Генератор цветов
Система палитр // v1.0
Диапазон: 1-10
Ожидание ввода...
Что такое генератор случайных цветов?
Генератор случайных цветов выбирает цвет — или согласованную палитру — из миллионов доступных экрану и сразу выдаёт значения, которые реально нужны в работе. RandomHub возвращает от 1 до 10 цветов за клик, прогоняет их через пять правил теории цвета (монохром, аналогичные, комплементарные, триадные, тетрадные плюс чистый случай) и сдвигает результат к выбранному тону: пастель, яркий, приглушённый, тёмный, светлый или без ограничений. Каждый цвет приходит с готовыми HEX, RGB и HSL. Всё работает в браузере — без регистрации, без отправки данных, без логов.
Для кого этот генератор
UI- и продуктовые дизайнеры
Выйти из круга шести брендовых цветов, когда нужно прощупать настроение перед презентацией стейкхолдерам. Пастель-аналог для приложения по медитации, ярко-триада для детского продукта, тёмная-тетрада для девтула.
Бренд-дизайнеры
Прокручивать десятки комплементарных и тетрадных комбинаций на этапе широкого поиска в брендспринте. Помогает выбраться из колеи «опять прихожу к тёмно-синему».
Фронтенд-разработчики
Нужны три цвета-заглушки для CSS-демо или Tailwind-конфига? Один клик, копируешь HEX в стайл — и дальше, без открытия Figma.
Иллюстраторы и цифровые художники
Сгенерировать ограниченную палитру для упражнения с заданным набором цветов. Пять приглушённых аналогичных оттенков заставляют строить картинку контрастом светлоты, а не контрастом тона.
Авторы дата-визуализаций
Триадные и тетрадные палитры дают математически разнесённые тона для кодирования категорий. Поверх — тон: яркий для акцентов, приглушённый для слоёв-контекста.
Студенты и преподаватели дизайна
Увидеть правила гармонии в действии. Сгенерировать триадную палитру, потом тетрадную, потом монохром — и наблюдать, как из одного исходного тона рождается совершенно разное ощущение.
Почему этот генератор
Пять настоящих правил гармонии
Не «пять случайных цветов, которые не дерутся». Монохром, аналогичные, комплементарные, триадные, тетрадные — всё считается из базового тона по математике, которой реально учат в дизайн-школах.
Пресеты тона под реальные брифы
Пастель — велнес и образование. Яркий — спорт и молодёжка. Приглушённый — лонгриды и финансы. Тёмный — техника и люкс. Светлый — медтех и SaaS. Выбираешь настроение — попадаешь в нужный квартал палитры.
HEX, RGB и HSL рядом
Кнопки копирования по каждому формату на каждой строке. HSL удобнее всего для подкрутки насыщенности в CSS, HEX — отдать дизайнеру, RGB — для кода. Формат подбирается под место, куда цвет уйдёт.
Только в браузере, ничего не пишется
Страница генерирует локально через HSL-математику. Палитры не сохраняются, email не запрашивается, премиум-тарифа нет. Все попадают на один и тот же инструмент.
Типичные сценарии с примерами
Мудборд для wellness-приложения
Нужна палитра для приложения по медитации. Резкие цвета здесь врут. Тянем 5 цветов в аналогичной гармонии и пастельном тоне — мягкие зелёные и синие, которые перетекают друг в друга.
Настройки: 5 цветов, Аналогичные, Пастель. Возможный результат: #C8E1D2, #B6D8C7, #A4CFBC, #92C6B1, #80BDA6 — связный набор низкой насыщенности, ложится во фреймы Figma меньше чем за минуту.
Ребрендинг энергетика
Третья неделя брендспринта — и команда снова закрутилась вокруг красно-жёлтого. Тянем 4 цвета триадной гармонии и яркого тона, чтобы поломать территорию.
Настройки: 4 цвета, Триадные, Яркие. Три тона на 120° с высокой насыщенностью — поиск выпрыгивает из красно-жёлтого в комбинации мажента-циан-янтарь, которые команда раньше не пробовала.
Прототип на Tailwind CSS
Нужны акцентные цвета для демо-страницы «светлая тема». Три светлых, низконасыщенных цвета, копируешь HEX в конфиг и идёшь дальше.
Настройки: 3 цвета, Случайные, Светлые. Пример вывода: #E8DCD0, #D4E0DD, #DCD8E8. В tailwind.config как accent-50, accent-100, accent-200 — страница готова к показу.
Упражнение с заданной палитрой
Художникам и иллюстраторам помогают принудительные ограничения. Пять приглушённых цветов — и тот же натюрморт пишется только ими.
Настройки: 5 цветов, Случайные, Приглушённые. Каждый цвет около 30 % насыщенности при средней светлоте — пыльный, гармоничный набор, заставляющий строить картинку светлотой, а не тоном.
Как пользоваться
- 1.
Указать количество
От 1 до 10. Пять — удобный дефолт: достаточно вариативности, легко удерживать в голове.
- 2.
Выбрать правило гармонии
Случайное — для свободного поиска. Аналогичное — для близости. Комплементарное — для пары с сильным контрастом. Триадное и тетрадное — для категориальных палитр. Монохром — для этюдов по светлоте.
- 3.
Выбрать тон
Пастель, яркий, приглушённый, тёмный, светлый или «любой». Каждый пресет сужает диапазоны насыщенности и светлоты так, чтобы палитра попала в нужное настроение.
- 4.
Сгенерировать и скопировать
Кнопка «Сгенерировать» или Enter. У каждого цвета свои кнопки копирования HEX, RGB, HSL. «Скопировать всё» забирает всю палитру строкой — удобно вставить в Figma, в код или в заметку.
Частые вопросы
Палитры действительно случайные или из готового списка?
Случайные. Инструмент берёт базовый тон (0–360°) на каждую палитру, прикладывает правило гармонии и сэмплирует насыщенность и светлоту из диапазона выбранного тона. Два прогона с одинаковыми настройками дают разные палитры — гармоническая структура та же, конкретные значения разные.
Чем отличаются пять правил гармонии?
Монохром: один тон с разной светлотой. Аналогичные: соседи по кругу (≈ ±25°). Комплементарные: противоположные тона на 180°. Триадные: три тона на 120°. Тетрадные: четыре тона на 90°. Из одного базового тона — пять очень разных ощущений.
Как технически работают пресеты тона?
Каждый пресет ограничивает насыщенность (S) и светлоту (L). Пастель: S 25–55 %, L 78–92 %. Яркий: S 85–100 %, L 42–58 %. Приглушённый: S 15–40 %, L 40–60 %. Тёмный: S 40–95 %, L 12–32 %. Светлый: S 30–70 %, L 70–88 %.
Можно ли сохранить или поделиться палитрой?
Жмите «Скопировать всё» — палитра уходит как обычный текст (HEX · RGB · HSL по строке). Вставляйте в Figma, заметки, документ, тред в Slack. Сохранения, привязанного к аккаунту, нет — намеренно, ничего не покидает браузер.
Зачем HSL рядом с HEX и RGB?
HSL разносит тон, насыщенность и светлоту по трём отдельным значениям — это самый удобный формат для правок «+10 % насыщенности» или «+30° к тону» в CSS и в дизайн-инструментах. HEX короче для передачи. RGB ближе к тому, как экран реально рендерит цвет.
Можно ли использовать палитры в коммерческих проектах?
Да. Значения цветов не охраняются авторским правом. Используйте любую сгенерированную палитру в коммерческих проектах, в брендах, в платных клиентских работах, в продуктах, которые продаёте. Атрибуция не нужна.
Чем это отличается от Coolors или Adobe Color?
Coolors и Adobe Color — зрелые сервисы с сохранёнными библиотеками, генерацией градиентов, экстракцией из изображений и сообществом. RandomHub делает одну работу: быстро выдаёт случайные палитры по правилам, с готовыми HEX / RGB / HSL — без регистрации, без библиотеки, без апселла.
Почему максимум 10 цветов?
После семи-восьми цветов большинство правил гармонии выдают визуально близкие оттенки — глаз перестаёт различать их как палитру. Десять — щедрая верхняя граница, при которой каждый результат остаётся осмысленным.
О случайных палитрах в дизайне
Дизайнеры используют случайность как творческий ввод столько, сколько существует сама дисциплина. Баухаусовское упражнение «поставь три цвета рядом и заставь их работать» — это тот же механизм: ограничение и неожиданность выталкивают мозг за пределы первого рефлекса. С появлением экранов изменилось одно: правила гармонии считаются мгновенно. Триадная палитра, на которую в 1965 году с кругом Мунселла уходило полчаса, в 2026-м занимает один клик. Скорость и есть смысл. Первая сгенерированная палитра почти никогда не идёт в продакшн; ценность — в том, чтобы за пять минут пролистать двадцать и поймать, какая комбинация попала. RandomHub стоит на трёх решениях: правила гармонии заземляют математику в реальной теории цвета, а не в «пяти случайных», тоны соответствуют живым брифам, а не абстрактным категориям, HSL / HEX / RGB приходят вместе, чтобы не пришлось ничего конвертировать вручную. Если нужного правила или тона нет — это сигнал, напишите.
Похожие генераторы
Похожие генераторы
Продолжайте с инструментами для учебы, игр, творчества, планирования и быстрых решений.