Перейти до основного вмістуПерейти до калькулятора
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 полегшує цілеспрямоване налаштування світлості й насиченості.
  • Випадкові кольори не перевірені на контраст.

Пов'язані калькулятори

Інші інструменти