Перейти к основному содержимомуПерейти к калькулятору
108 калькуляторовРезультаты онлайнПошаговые решения

Инструмент Rechnerpilot

Генератор цветов

Создавайте случайные цвета со значениями HEX, RGB и HSL для дизайна и тестов — локально в браузере.

Генераторы

Нажмите «Сгенерировать», чтобы создать цвета.

Объяснение

Как работает Генератор цветов

Генератор цветов создаёт случайные цвета. Для каждого цвета берутся три случайных значения для красного, зелёного и синего (каждое 0–255), и из них вычисляются распространённые нотации HEX, RGB и HSL. HSL описывает один и тот же цвет через тон, насыщенность и светлоту и облегчает точную настройку.

Генерация выполняется локально в браузере с помощью Math.random. Цвета полностью случайны и не проверены на контраст или доступность.

Ограничения инструмента

  • Без проверки контраста или WCAG.
  • Без гармонии палитры (комплементарная, монохромная и т. п.).
  • Math.random — не для целей безопасности.

Источники

  • CSS Color Module: Определение нотаций HEX, RGB и HSL.

Практика

Практические примеры

Цветовая палитра

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

HEX для CSS

Значения HEX можно использовать напрямую в CSS или дизайн-инструментах.

Понять HSL

HSL показывает тон, насыщенность и светлоту — удобно для точной настройки.

ЧаВо

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

Как создаются цвета?

Для каждого цвета три случайных значения (красный, зелёный, синий, каждое 0–255) берутся с помощью Math.random, и из них вычисляются представления HEX, RGB и HSL.

Доступны ли цвета/высококонтрастны ли они?

Нет. Цвета полностью случайны и не проверены на контраст, читаемость или соответствие WCAG. Контраст нужно обеспечивать отдельно.

Обозначают ли HEX, RGB и HSL один и тот же цвет?

Да. Три значения описывают один и тот же цвет в разной нотации; HSL вычисляется из значений RGB и при этом округляется.

Сохраняются ли цвета?

Нет. Цвета создаются в браузере и заново выбираются при каждом нажатии. Никакого сохранения не происходит.

Советы

Полезно знать

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

Связанные калькуляторы

Другие инструменты