Потрібен колір для макета, графіка чи порожнього полотна, і не хочеться вибирати його за звичкою? Цей безкоштовний генератор випадкових кольорів бере кольори з повного 24-бітного діапазону, який здатен показати екран, і виводить кожен у вигляді зразка поруч із його кодом. Оберіть, скільки кольорів потрібно, в полі Кількість — від 1 до 50 — позначте потрібні формати й натисніть Згенерувати. Сторінка відкривається з одним кольором у HEX, тож перший результат — це один клік. Код HEX позначено від початку, поруч із ним стоять Код RGB і Код HSL, і будь-яку комбінацію цих трьох можна ввімкнути одночасно. Кнопка із шестернею поруч із кнопкою Згенерувати відкриває Розширені опції, де можна обмежити кольори одним типом чи діапазоном, виключити повтори та змінити спосіб запису HEX.
Кожен колір створюється у вашому браузері через Web Crypto API (crypto.getRandomValues), який постачає криптографічно стійкі випадкові байти з власного джерела випадковості вашої системи, а не за допомогою псевдовипадкової функції на кшталт Math.random(). Колір на екрані — це три канали: червоний, зелений і синій, кожен — ціле число від 0 до 255, а один випадковий байт містить рівно 256 значень. Тож кожен канал — це просто один байт, без жодних проміжних кроків: залишок не береться, і жоден крок перетворення не надає переваги якомусь відтінку. Це робить усі 16 777 216 кольорів, які здатна створити сторінка, точно однаково ймовірними щоразу, коли ви натискаєте Згенерувати. Вужчий діапазон у розділі Розширені опції зберігає цю обіцянку в межах діапазону: кольори й далі вибираються з усього простору, а ті, що виходять за межі, відкидаються, тож кожен колір, дозволений діапазоном, має однаковий шанс. Ваші кольори ніколи не надсилаються на наш сервер, тому ми ніколи не бачимо й не записуємо їх, і щойно сторінка завантажилася, вона й далі працює навіть без з'єднання.
Три формати описують один і той самий колір трьома способами. Код HEX — це шестизначна форма, яку використовують у CSS і більшості інструментів дизайну, наприклад #0778ff; його записують малими літерами з символом # на початку, а Великі літери й Без # у розділі Розширені опції змінюють це для інструментів, які очікують іншого запису. Код RGB розписує три канали, як-от rgb(7, 120, 255), що підходить для коду, який працює з кожним каналом окремо. Код HSL описує колір через відтінок, насиченість і світлість, як-от hsl(213, 100%, 51%) — це найзручніша форма для подальшого коригування вручну. Усі три вставляються прямо в таблицю стилів. Проте вони не однаково точні. HEX і RGB точні; HSL округлений. Сторінка записує відтінок, насиченість і світлість цілими числами, і приблизно для 89% кольорів це округлене значення не конвертується назад в абсолютно той самий колір: #646503 показано як hsl(61, 94%, 20%), що конвертується назад у #616303. Різниця ніколи не перевищує 5 кроків у каналі й зазвичай становить 1 або 2 — непомітно на екрані, але реально, якщо ви зберігаєте значення HSL і очікуєте отримати назад початковий HEX. Зберігайте HEX або RGB як значення, яке записуєте.
Один колір з'являється як окремий зразок посередині результату; кілька — як нумерований список, по одному кольору в рядку, з обраними форматами поруч і невеликим значком контрастності наприкінці. Список із понад трьох кольорів прокручується всередині блока, а стрілка в його куті розгортає його на повну висоту; сторінка запам'ятовує, як ви його залишили востаннє. Клацніть на будь-який код, щоб скопіювати лише цей код. Кнопка копіювання наприкінці рядка копіює всі коди цього кольору в один рядок через пробіл. Клацніть на сам зразок — і відкриється власний засіб вибору кольору вашого браузера: оберіть там інший колір, і всі коди в цьому рядку перепишуться відповідно, у кожному ввімкненому форматі, разом зі значком. Кнопка Скопіювати все копіює всю партію, по одному кольору в рядку, а Зберегти у файл записує той самий текст у звичайний файл .txt; обидві дії враховують будь-який колір, який ви змінили в засобі вибору. Історія зберігає ваші останні 10 партій у цьому браузері саме такими, якими їх було згенеровано, а Очистити спорожняє результат. Ваші налаштування, зокрема в розділі Розширені опції, запам'ятовуються до наступного відвідування.
Однаково ймовірні кольори не виглядають рівномірно розподіленими, і знання того, чого чекати, вбереже від зайвого натискання Згенерувати. За вимірами на всьому діапазоні приблизно 35% кольорів яскраві й насичені, з насиченістю HSL щонайменше 70% і світлістю від 35% до 65%. Майже сірі кольори, з насиченістю нижче 20%, становлять лише близько 4%, а дуже темні кольори (світлість нижче 20%) і дуже світлі (понад 80%) — приблизно по 3%. Тож партія з десяти кольорів із типом Усі кольори зазвичай міститиме кілька насичених кольорів і рідко — пастельний чи графітовий. Коли потрібен певний тип, оберіть його в полі Тип кольору: Яскраві дає саме цю яскраву групу, а Пастельні, Темні, Приглушені й Відтінки сірого — кожен свою. Опція Власні дає змогу задати свої діапазони для полів Відтінок, Насиченість і Світлість, і діапазон відтінку може виходити за межу 0, тож від 330 до 30 дає червоні кольори. Діапазон перевіряється щодо коду HSL, який показує сторінка, тож жоден код не виходить за його межі, а якщо в ньому замало кольорів для значення в полі Кількість, сторінка просить розширити його, а не повторювати кольори. У решті випадків повтори можливі, але рідкісні: позначте Без повторень, щоб їх виключити, а без цього перемикача ймовірність того, що два з 50 кольорів з усього діапазону виявляться однаковими, становить приблизно 1 з 13 700.
Випадковий колір часто потрібен як тло, і тут постає питання, на яке зразок не відповість на око: чи буде текст на ньому читабельним? Настанова з веб-доступності WCAG вимагає коефіцієнта контрастності щонайменше 4,5:1 для звичайного тексту. За вимірами на всіх кольорах, які здатна створити ця сторінка, чорний текст досягає цього приблизно на 65% з них, а білий текст — приблизно на 36%, і немає жодного кольору, на якому провалюються обидва: кращий з двох завжди досягає щонайменше 4,58:1. Тож для будь-якого випадкового тла чорний або білий текст пройде перевірку, і сторінка показує, який саме. На кожному кольорі є невеликий значок: Aa, написане кращим із двох кольорів тексту, а поруч — коефіцієнт контрастності. Коефіцієнт округлюється в менший бік, тож ніколи не завищує результат, і оновлюється, коли ви змінюєте колір у засобі вибору. Значок порівнює лише чорний і білий текст; для фірмового чи будь-якого іншого кольору тексту перевірте пару в інструменті перевірки контрастності.
Випадковість — не те саме, що гармонійність. Кожен колір у партії вибирається окремо, без жодного знання про інші, тож генератор ніколи не будує палітру в сенсі дизайнера — жодних комплементарних пар, жодних аналогових рядів, жодної спільної світлості. Вужчий діапазон змінює характер партії, а не це правило: пастельні кольори чи серія синіх відтінків так само з'являються один за одним, і ніщо їх не пов'язує. У цьому й суть: генератор дає вам колір, який ви б самі не обрали, і саме це допомагає вийти за межі звички чи творчого застою. Щоб перетворити випадкову знахідку на щось придатне, залиште колір, який вам сподобався, і будуйте навколо нього, а не натискайте Згенерувати, доки весь набір випадково не збіжиться. Утримуйте його відтінок і змінюйте світлість крок за кроком для тонів і відтінків, або поверніть відтінок на 180 градусів для контрастної пари. Код HSL — це формат, який перетворює ці кроки на арифметику, а не на здогадки.
Чому обрати саме цей генератор випадкових кольорів?
- Кожен колір створюється у вашому браузері за допомогою Web Crypto API, нічого не завантажується на сервер
- Усі 16 777 216 кольорів точно однаково ймовірні, один випадковий байт на канал
- Коди HEX, RGB і HSL для одного й того самого кольору, у будь-якій комбінації
- До 50 кольорів одночасно, кожен у вигляді зразка зі значком контрастності тексту
- Яскраві, Пастельні, Темні, Приглушені й Відтінки сірого, або власний діапазон відтінку, насиченості й світлості
- Без повторень, коли це потрібно, і HEX великими літерами або без #
- Клацніть на код, щоб скопіювати його, або змініть будь-який колір у засобі вибору кольору вашого браузера
- Скопіювати все, Зберегти у файл та Історія останніх 10 партій, збережена у вашому браузері
- Безкоштовно й без обмежень: без реєстрації, без квоти, нічого не зберігається на наших серверах
Випадкові кольори стають у пригоді там, де колір потрібен ще до того, як хтось його обрав. Дизайнери використовують їх, щоб подолати творчий застій і знайти відправну точку, до якої їхня звична палітра ніколи б не привела. Розробники заповнюють макети, заглушки й аватари, надають кожній серії на графіку власний колір, поки справжня тема ще не визначена, і перевіряють, як інтерфейс справляється з тлом, для якого він не був розроблений — партія з 50 кольорів із типом Усі кольори майже завжди містить хоча б один дуже темний або дуже світлий колір, а Темні чи Пастельні спрямовують перевірку в один із цих кінців. Генеративні художники та розробники прототипів ігор передають значення прямо в код, де форма RGB підходить для більшості графічних бібліотек. Викладачі розміщують три формати поруч, щоб показати, що один колір можна записати як код, як три канали або як позицію на колірному колі, і чому версія HSL округлена. А кожен, хто маркує, тегує чи розфарбовує список, отримує різні кольори, не мучачись над вибором.
Варто знати кілька чесних обмежень. Це генератор, а не інструмент для палітр: він не будує колірні гармонії і не утримує один колір незмінним, поки інші змінюються, а вужчий діапазон дає кольори одного типу, а не кольори, підібрані для поєднання. Значок контрастності порівнює лише чорний і білий текст. Сторінка працює з кольорами sRGB, які показує екран, — HEX, RGB і HSL — без прозорості й без CMYK, Pantone, OKLCH чи іменованих кольорів CSS; для друку узгоджуйте колір у своєму процесі друку, а не покладайтеся на екранний код. Той самий код також може виглядати трохи по-різному на різних дисплеях, бо екрани відкалібровані не однаково. Значення HSL округлені, як описано вище, і якщо не позначено Без повторень, партія не перевіряється на повтори. Те, що сторінка справді гарантує, вужче й точне: кожен із її 16 777 216 кольорів, або кожен колір у межах установленого вами діапазону, має однаковий шанс за кожного натискання, узятий із криптографічного джерела вашого браузера і ніколи не надісланий на наш сервер.