Генератор случайных цветов

Случайные цвета
Далее: палитра

Сгенерируйте новый набор случайных HEX-кодов из 24-битного диапазона sRGB. Выберите нужное количество образцов, сразу посмотрите каждый цвет и скопируйте коды в CSS, заметки для дизайна, QA-fixtures или черновики палитр.

Как создать случайные HEX-цвета

  1. 1

    Выберите количество

    Введите любое число от 1 до 50, в зависимости от того, сколько цветовых образцов нужно проверить.

  2. 2

    Сгенерируйте образцы

    Каждый результат представляет собой шестизначный HEX-код в формате #RRGGBB с отдельными значениями каналов красного, зеленого и синего.

  3. 3

    Скопируйте и проверьте

    Сохраните подходящие цвета, проверьте контраст перед использованием с текстом и конвертируйте в RGB или HSL только при необходимости.

Что создает генератор

Каждый код представляет 24-битный цвет sRGB: 8 бит для красного, 8 для зеленого и 8 для синего. Это дает 16 777 216 возможных HEX-значений, от #000000 до #FFFFFF. Инструмент показывает образец и код; он не называет цвет, не оценивает его и не гарантирует читаемость.

Как читать HEX-цвет

Часть Значение Диапазон
# Маркер цвета CSS Постоянный префикс
RR Красный канал от 00 до FF
GG Зеленый канал от 00 до FF
BB Синий канал от 00 до FF

Практическое применение

  • Быстро пробовать состояния интерфейса, акценты для диаграмм или временную графику, пока точный цвет еще не выбран.
  • Собрать начальную палитру, а затем убрать слишком похожие, слишком темные или слишком резкие цвета.
  • Создать тестовые данные для CSS, SVG, canvas и примеров дизайн-системы.

Перед использованием случайного цвета в продакшене

Случайный цвет является только отправной точкой. Для текста, кнопок и элементов управления проверяйте его относительно цвета переднего плана или фона. WCAG AA требует коэффициент контраста 4,5:1 для обычного текста и 3:1 для крупного текста. Для брендинга или печати оцените цвет на откалиброванных экранах и отдельно конвертируйте его для печати.

Часто задаваемые вопросы

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

Этот инструмент создает независимые случайные цвета. Для более цельной палитры используйте генератор палитр или вручную держитесь одной цветовой семьи, выбирая более светлые и более темные варианты.

В этом инструменте нет управления seed. Скопируйте HEX-коды, которые хотите сохранить, чтобы использовать их позже.

Да. Шестизначные HEX-значения #RRGGBB являются стандартным синтаксисом цветов CSS и работают в свойствах color, background-color, границах, градиентах и заливках SVG.

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

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Инструмент доступен на других языках