Трябва ви цвят за макет, диаграма или празно платно и предпочитате да не избирате цвят по навик? Този безплатен генератор на случайни цветове взема цветове от целия 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 цвята ѝ, или всеки цвят в границите на зададения от вас диапазон, има еднакъв шанс при всяко натискане, изтеглен от криптографския източник на браузъра ви и никога не изпратен никъде.