Создание случайного цвета онлайн: пошаговая инструкция и онлайн-генератор

Самый простой способ — использовать Math.random() для получения случайного числа от 0 до 1, преобразовать его в 16-ричную строку и обрезать до 6 символов. Но есть нюанс: если число меньше 0.0039, hex-строка будет короче 6 символов — её нужно добить нулями слева.

function randomHex() {
  const num = Math.floor(Math.random() * 16777215);
  const hex = num.toString(16).padStart(6, '0');
  return `#${hex}`;
}
console.log(randomHex()); // например, #a4d3c2

Функция возвращает строку, готовую для использования в CSS. 16777215 — это максимальное 24-битное число (0xFFFFFF). Метод padStart гарантирует длину 6.

RGB-цвет задаётся тремя числами от 0 до 255. Для каждого канала вызываем Math.random и умножаем на 255, округляя вниз.

function randomRGB() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}
console.log(randomRGB()); // например, rgb(178, 64, 23)

Эта функция выдаёт цвет, который легко применить в canvas или inline-стилях. Если нужно получить HEX из RGB — используйте RGB в HEX онлайн — конвертер цвета.

В CSS иногда удобнее использовать HSL, особенно для гармоничной палитры. Случайный цвет можно получить, фиксируя S и L, и варьируя только H от 0 до 360.

function randomHSL(s = 70, l = 50) {
  const h = Math.floor(Math.random() * 361);
  return `hsl(${h}, ${s}%, ${l}%)`;
}
console.log(randomHSL()); // hsl(210, 70%, 50%)

Параметры s и l можно менять: для пастельных тонов ставьте 30-50%, для ярких — 70-100%. Конвертируйте HSL в HEX через HSL в HEX онлайн — конвертер цвета.

Если не хочется писать код, Генератор случайного цвета онлайн делает всю работу: нажали кнопку — получили HEX, RGB и HSL сразу, с визуальным квадратом цвета. Это удобно для дизайнеров и верстальщиков, когда нужно быстро подобрать акцент без программирования.

Иногда нужно, чтобы цвет был только светлый или тёмный. Для этого ограничим диапазон каждого канала:

function randomLightColor() {
  // только светлые: каждый канал от 200 до 255
  const r = Math.floor(Math.random() * 56) + 200;
  const g = Math.floor(Math.random() * 56) + 200;
  const b = Math.floor(Math.random() * 56) + 200;
  return `rgb(${r}, ${g}, ${b})`;
}
function randomDarkColor() {
  // только тёмные: каждый канал от 0 до 55
  const r = Math.floor(Math.random() * 56);
  const g = Math.floor(Math.random() * 56);
  const b = Math.floor(Math.random() * 56);
  return `rgb(${r}, ${g}, ${b})`;
}

Такой подход гарантирует достаточную контрастность фона и текста.

При работе с онлайн-инструментами убедитесь, что конвертер поддерживает нужный формат: HEX в RGB онлайн — конвертер цвета и HEX в HSL онлайн — конвертер цвета.

Иногда одинаковый случайный цвет нужен в нескольких сессиях (например, цвет пользователя). Для этого используют seed-генератор псевдослучайных чисел.

// Простой seed-генератор (XORShift)
function seededRandom(seed) {
  let x = seed;
  return function() {
    x ^= x << 13;
    x ^= x >> 17;
    x ^= x << 5;
    return (x < 0 ? x + 0xFFFFFFFF : x) / 0xFFFFFFFF;
  };
}
function randomHexFromSeed(seed) {
  const rng = seededRandom(seed);
  const num = Math.floor(rng() * 16777215);
  return `#${num.toString(16).padStart(6, '0')}`;
}

Теперь, передав один и тот же seed (например, id пользователя), вы всегда получите один и тот же цвет.

Проверяйте, что функция не выдаёт некорректные значения:

• В консоли браузера вызовите console.log(randomHex()) 100 раз — не должно быть дублей (вероятность низкая).
• Для RGB — следите, чтобы значения были целыми, не больше 255.
• Используйте сниппет: Array.from({length:10}, randomHex) — выведет 10 цветов.

Готовый тест можно сделать на Codepen или локально. Если результат не нравится — попробуйте ограничить выборку.

Генерация случайного цвета — базовая задача, но с нюансами. Главное:

• Всегда проверяйте длину HEX-строки.
• Для HSL можно фиксировать S и L, чтобы цвета были гармоничными.
• Используйте онлайн-инструменты, чтобы сэкономить время на конвертацию.

Быстрый доступ к Генератору случайного цвета онлайн и конвертерам RGB→HEX ускорит работу в десятки раз.