Генератор случайных цветов
Случайные цвета и коды для дизайна и кода.
Нажмите на код, чтобы скопировать его. Нажмите на замок, чтобы сохранить цвет при следующей генерации.
- Коды HEX, RGB или HSL
- Пастельные и тёмные палитры
- Закрепляйте цвета, перебрасывайте остальные
Как сгенерировать случайные цвета
- Укажите количество цветов и выберите формат кода.
- Выберите случайную, пастельную или тёмную палитру.
- Нажмите на образец, чтобы скопировать код, или закрепите его перед новой генерацией.
HEX, RGB и HSL: сравнение
Все три формата описывают абсолютно один и тот же цвет. Какой нужен, зависит от того, куда вы его вставляете.
| Формат | Выглядит так | Лучше всего для |
|---|---|---|
| HEX | #3B82F6 | CSS, инструменты дизайна, быстрый обмен |
| RGB | rgb(59, 130, 246) | CSS, код, который смешивает или перетекает между цветами |
| HSL | hsl(217, 91%, 60%) | Ручная настройка цвета: сначала оттенок, потом насыщенность, потом светлота |
HSL обычно проще всего настраивать самому, поскольку изменение числа светлоты делает цвет светлее или темнее, сохраняя тот же оттенок, а с HEX и RGB сделать это на глаз сложнее.
Случайная, пастельная и тёмная палитры в цифрах
Каждый режим берёт цвета из своего участка цветового круга, а не просто меняет оттенок.
| Режим | Диапазон насыщенности | Диапазон светлоты |
|---|---|---|
| Случайная | 40-100% | 25-75% |
| Пастельная | 35-60% | 75-88% |
| Тёмная | 35-70% | 12-28% |
Оттенок в любом режиме всегда выбирается из полного диапазона 0-359, поэтому пастельная и тёмная палитры тоже охватывают все семейства цветов, только светлее или темнее.
Для чего используют случайные цвета
- Быстрое вдохновение для дизайна, когда не получается выбрать цвет бренда или темы.
- Цвета-заглушки для каркасов, графиков и макетов интерфейса до выбора настоящей палитры.
- Генерация фонов для аватаров, цветов тегов или категорий в приложении.
- Творческие проекты и хобби, например случайный цвет как задание для ежедневного скетча.
Частые вопросы о Генератор случайных цветов
В чём разница между палитрами?
Случайная палитра охватывает весь цветовой круг. Пастельная делает светлоту и насыщенность мягче для нежных фонов. Тёмная держит цвета с низкой светлотой для тёмных тем и контрастного текста.
Как оставить понравившийся цвет?
Нажмите на значок замка на образце. Закреплённые образцы сохраняют свой цвет при следующей генерации, так что можно перебросить только остальные.
В чём разница между HEX, RGB и HSL?
HEX и RGB описывают цвет через количество красного, зелёного и синего. HSL описывает его через оттенок, насыщенность и светлоту, что часто удобнее настраивать вручную.
Как скопировать код цвета?
Нажмите на текст кода под любым образцом, и он сразу скопируется в буфер обмена.
Какие диапазоны на самом деле используют палитры?
Случайная палитра берёт любой оттенок с насыщенностью от 40 до 100% и светлотой от 25 до 75%. Пастельная сужает светлоту до 75-88%. Тёмная сужает светлоту до 12-28% с насыщенностью 35-70%, чтобы цвета оставались насыщенными, а не грязными.
Будут ли два случайных цвета хорошо смотреться вместе?
Иногда. Этот инструмент выбирает цвета независимо друг от друга для разнообразия и вдохновения, а не собирает подобранную палитру. Чтобы получить сочетающиеся цвета, сгенерируйте несколько, закрепите понравившиеся и перебрасывайте остальные, пока набор не сложится.
Можно сгенерировать только один цвет вместо набора?
Да, установите количество 1 и нажмите «Сгенерировать», чтобы получить один случайный цвет в выбранном формате.
Где использовать полученный код HEX или RGB?
Вставьте код HEX прямо в CSS, Figma, Photoshop или почти любой инструмент дизайна. Значения RGB и HSL работают так же в функциях CSS вроде rgb() и hsl().