Патрэбны колер для макета, дыяграмы або пустога палатна, і не хочацца выбіраць яго па звычцы? Гэты бясплатны генератар выпадковых колераў бярэ колеры з усяго 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 колераў, або кожны колер у межах абранага вамі дыяпазону, мае аднолькавы шанец пры кожным націсканні, узяты з крыптаграфічнай крыніцы вашага браўзера і ніколі нікуды не адпраўлены.