Случайный цвет

Нужен цвет для прототипа, фона или творческого эксперимента – и нет времени подбирать вручную? Случайный цвет решает задачу за секунду. Ниже – генератор и справка по форматам.

Как получить случайный цвет

Генератор выше выдаёт цвет сразу в трёх форматах. Нажмите кнопку – и получите новый случайный цвет с кодами RGB, HEX и HSL.

Какие форматы цвета существуют

Цвет в цифровом виде можно записать по-разному. Три основных формата:

• RGB – три числа от 0 до 255, каждое отвечает за интенсивность красного, зелёного и синего канала. Пример: rgb(255, 87, 51)
• HEX – шестнадцатеричная запись того же RGB-значения одной строкой. Пример: #ff5733
• HSL – оттенок (0–360°), насыщенность (0–100%) и светлота (0–100%). Пример: hsl(9deg, 100%, 60%)

Все три формата описывают один и тот же цвет, просто в разной нотации. CSS поддерживает каждый из них.

Как устроен случайный цвет в формате RGB

Модель RGB складывает цвет из трёх каналов – Red, Green, Blue. Каждый канал принимает целое значение от 0 (нет цвета) до 255 (максимум). Генерация случайного цвета сводится к трём вызовам случайного числа:

1. R – случайное целое от 0 до 255
2. G – случайное целое от 0 до 255
3. B – случайное целое от 0 до 255

Результат собирается в строку rgb(R, G, B).

Как устроен случайный цвет в формате HEX

HEX-код – это шестнадцатеричное представление RGB. Число от 0 до 16 777 215 (это ffffff в шестнадцатеричной системе) преобразуется в строку с добавлением # в начале.

Пример алгоритма:

1. Получить случайное число от 0 до 16 777 215
2. Преобразовать в шестнадцатеричную строку методом toString(16)
3. Если длина меньше 6 символов – дополнить нулями слева
4. Добавить #

Итого: Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0") → #c0ffee.

Число 16 777 216 – это 256³, то есть полное количество цветов в 24-битной палитре.

Как устроен случайный цвет в формате HSL

HSL удобнее RGB, когда нужно управлять яркостью или насыщенностью. Три параметра:

Для полностью случайного цвета все три значения генерируются случайно в своих диапазонах. Для управления результатом фиксируйте один или два параметра.

Как сгенерировать только тёмные или только светлые цвета

В модели HSL это настраивается значением L (Lightness):

• Тёмные цвета – L в диапазоне 10–25%, насыщенность S от 50%
• Светлые цвета – L в диапазоне 75–90%, насыщенность S от 50%
• Пастельные цвета – L от 80%, S от 30 до 60%

При L = 0% всегда получается чёрный, при L = 100% – белый, независимо от остальных параметров.

Сколько существует случайных цветов

В 24-битной цветовой модели (True Color) доступно 16 777 216 уникальных цветов. Это 256 вариантов красного × 256 зелёного × 256 синего.

Человек различает около 10 миллионов оттенков – чуть меньше, чем помещается в 24-битную палитру. Два соседних значения в канале RGB (например, rgb(100, 50, 50) и rgb(101, 50, 50)) на глаз неотличимы.

Где используют генерацию случайного цвета

• Веб-разработка – динамические фоны, случайные акценты в UI, генерация палитр для графиков
• Геймдизайн – процедурная раскраска объектов, скинов, частиц
• Графический дизайн – эксперименты с цветом, поиск неочевидных сочетаний (html-plus.in.ua)
• Data Visualization – автоматическая раскраска категорий на диаграммах
• Творческие проекты – генеративное искусство, абстрактные композиции

Какой формат выбрать для задачи

Статья носит справочный характер. Для точной цветопередачи в печати используйте цветовые профили и калибровку монитора.