Potrebujete farbu pre grafický návrh, graf alebo prázdne plátno a nechcete ju vyberať zo zvyku? Tento bezplatný generátor náhodných farieb čerpá farby z celého 24-bitového rozsahu, ktorý dokáže obrazovka zobraziť, a každú z nich umiestni na farebnú vzorku vedľa jej kódu. V poli „Počet“ zvoľte, koľko farieb chcete — od 1 do 50 —, začiarknite požadované formáty a stlačte „Generovať“. Stránka sa otvorí s jednou farbou vo formáte HEX, takže prvý výsledok máte na jedno kliknutie. Začiarkavacie pole „HEX kód“ je zapnuté od začiatku, voľby „RGB kód“ a „HSL kód“ sa nachádzajú vedľa neho a ľubovoľnú kombináciu týchto troch formátov môžete aktivovať naraz. Tlačidlo s ozubeným kolesom vedľa „Generovať“ otvorí sekciu „Rozšírené možnosti“, kde môžete obmedziť farby na určitý typ alebo rozsah, vylúčiť opakovanie a zmeniť spôsob zápisu kódu HEX.
Každá farba sa vytvára priamo vo vašom prehliadači prostredníctvom Web Crypto API (crypto.getRandomValues), ktoré dodáva kryptograficky bezpečné náhodné bajty z vlastného zdroja náhodnosti vášho systému namiesto pseudonáhodnej funkcie, akou je Math.random(). Farba na obrazovke sa skladá z troch kanálov — červeného, zeleného a modrého —, pričom každý z nich je celé číslo od 0 do 255 a jeden náhodný bajt môže nadobudnúť presne 256 hodnôt. Každý kanál je teda jednoducho jeden bajt bez akýchkoľvek medzikrokov: nepočíta sa zvyšok po delení a žiadny odtieň nie je zvýhodnený konverziou. Vďaka tomu je všetkých 16 777 216 farieb, ktoré stránka dokáže vytvoriť, rovnako pravdepodobných pri každom stlačení tlačidla „Generovať“. Užší rozsah v sekcii „Rozšírené možnosti“ toto pravidlo dodržiava aj vo vnútri výberu: farby sa stále žrebujú z celého priestoru a tie, ktoré spadajú mimo zvoleného rozsahu, sa odložia, takže každá povolená farba má rovnakú šancu. Nič sa neodosiela na server, nič sa nezaznamenáva a po načítaní stránka funguje aj po odpojení od siete.
Tieto tri formáty opisujú tú istú farbu tromi rôznymi spôsobmi. Formát „HEX kód“ predstavuje šesťmiestny zápis používaný v CSS a vo väčšine grafických nástrojov, ako napríklad #0778ff; píše sa malými písmenami so začiatočným znakom #, pričom voľby „Veľké písmená“ a „Bez #“ v sekcii „Rozšírené možnosti“ tento zápis upravia pre nástroje, ktoré vyžadujú iný zápis. Formát „RGB kód“ explicitne vypisuje hodnoty troch kanálov, ako v rgb(7, 120, 255), čo vyhovuje kódu pracujúcemu s každým kanálom samostatne. Formát „HSL kód“ opisuje farbu pomocou odtieňa, sýtosti a svetlosti, ako v hsl(213, 100%, 51%), čo je najpohodlnejšia forma na následnú manuálnu úpravu. Všetky tri formáty možno priamo vložiť do štýlov CSS. Ich presnosť sa však líši. HEX a RGB sú presné; HSL je zaokrúhlené. Stránka zapisuje odtieň, sýtosť a svetlosť ako celé čísla a približne pri 89% farieb sa táto zaokrúhlená hodnota neprevedie späť na presne tú istú farbu: #646503 sa zobrazí ako hsl(61, 94%, 20%), čo sa spätne prevedie na #616303. Rozdiel nikdy nepresiahne 5 krokov v kanáli a zvyčajne predstavuje 1 alebo 2 — na obrazovke je neviditeľný, ale reálny, ak uložíte hodnotu HSL a očakávate pôvodný HEX kód. Hodnotu preto ukladajte v HEX alebo RGB.
Jedna farba sa zobrazí ako samostatná vzorka v strede výsledku; viacero farieb sa zobrazí ako očíslovaný zoznam, jedna farba na riadok, so zvolenými formátmi vedľa seba a malým odznakom kontrastu na konci. Zoznam s viac ako tromi farbami sa v poli posúva a šípka v rohu ho rozbalí na celú výšku; stránka si pamätá, ako ste ho nechali. Kliknutím na ktorýkoľvek kód skopírujete len tento kód. Tlačidlo kopírovania na konci riadka skopíruje všetky kódy danej farby do jedného riadka, oddelené medzerami. Po kliknutí na samotnú farebnú vzorku sa otvorí vstavaný dialóg výberu farby vo vašom prehliadači: ak tam vyberiete inú farbu, každý kód v danom riadku sa prepíše podľa novej farby vo všetkých zapnutých formátoch, spolu s odznakom kontrastu. Tlačidlo „Kopírovať všetko“ skopíruje celú sériu, jednu farbu na riadok, a „Uložiť do súboru“ zapíše rovnaký text do obyčajného súboru .txt; obe funkcie zohľadňujú aj farby zmenené vo výbere. Sekcia „História“ uchováva vašich posledných 10 sérií v tomto prehliadači presne tak, ako boli vygenerované, a tlačidlo „Vymazať“ vyprázdni výsledok. Vaše nastavenia vrátane volieb v sekcii „Rozšírené možnosti“ zostávajú uložené pre ďalšiu návštevu.
Rovnako pravdepodobné farby nevyzerajú rovnomerne rozptýlené a vedomie, čo očakávať, vám ušetrí zbytočné stláčanie tlačidla „Generovať“. Pri meraní naprieč celým priestorom je približne 35% farieb jasných a sýtych, s HSL sýtosťou aspoň 70% a svetlosťou medzi 35% a 65%. Takmer sivé farby so sýtosťou pod 20% tvoria len približne 4% a veľmi tmavé farby (svetlosť pod 20%) aj veľmi svetlé farby (nad 80%) tvoria približne 3% každá. Séria desiatich farieb z voľby „Všetky farby“ preto zvyčajne obsahuje niekoľko výrazných farieb a len zriedka pastelovú alebo antracitovo sivú. Ak potrebujete určitý charakter, zvoľte ho v ponuke „Typ farby“: voľba „Živá“ zachováva presne túto sýtu skupinu a voľby „Pastelová“, „Tmavá“, „Tlmená“ a „Stupne sivej“ robia to isté pre svoje kategórie. Režim „Vlastné“ vám umožní nastaviť vlastné rozsahy pre „Odtieň“, „Sýtosť“ a „Svetlosť“, pričom rozsah odtieňa môže prechádzať cez hodnotu 0, takže od 330 do 30 vytvorí červené tóny. Rozsah sa overuje voči zobrazenému kódu HSL, takže žiadny kód nespadá mimo neho, a ak rozsah obsahuje príliš málo farieb pre hodnotu v poli „Počet“, stránka vás požiada o jeho rozšírenie namiesto opakovania farieb. Opakovanie je inak možné, ale zriedkavé: začiarknite voľbu „Bez opakovania“, aby ste ho vylúčili; bez nej je šanca, že dve z 50 farieb z plného rozsahu vyjdú identické, približne 1 k 13 700.
Náhodná farba sa často hľadá ako pozadie, čo prináša zásadnú otázku, na ktorú samotná vzorka nedokáže voľným okom odpovedať: bude text na nej čitateľný? Pravidlá prístupnosti webu WCAG vyžadujú pre bežný text kontrastný pomer aspoň 4,5:1. Pri meraní naprieč všetkými farbami, ktoré táto stránka dokáže vygenerovať, čierny text dosahuje túto hodnotu približne pri 65% z nich a biely text približne pri 36%, pričom neexistuje žiadna farba, na ktorej by zlyhali oba: priaznivejší z nich vždy dosahuje aspoň 4,58:1. Na akomkoľvek náhodnom pozadí teda čierny alebo biely text je čitateľný a stránka vám ukáže, ktorý to je. Pri každej farbe sa zobrazuje malý odznak s nápisom Aa v lepšej z oboch možností, nasledovaný jeho kontrastným pomerom. Pomer sa zaokrúhľuje nadol, takže nikdy nepreceňuje vlastnosti farby, a aktualizuje sa, keď farbu zmeníte vo výbere. Odznak porovnáva výlučne čierny a biely text; pre farbu značky alebo akúkoľvek inú farbu textu otestujte dvojicu v nástroji na kontrolu kontrastu.
Náhodné nie je to isté ako harmonické. Každá farba v sérii sa žrebuje samostatne, bez ohľadu na ostatné, takže generátor nikdy nevytvára paletu v zmysle dizajnérskej harmónie — žiadne komplementárne dvojice, žiadne analogické prechody ani spoločnú svetlosť. Užší rozsah mení celkový ráz série, nie však toto pravidlo: pastelové tóny alebo séria modrých odtieňov prichádzajú stále jeden po druhom, bez vzájomnej väzby. V tom spočíva zmysel tohto nástroja: ponúka farbu, ktorú by ste zo zvyku nevybrali, čo pomáha prekonať tvorivý blok. Ak chcete náhodný nález premeniť na praktický výsledok, ponechajte si farbu, ktorá sa vám páči, a ostatné farby odvoďte od nej, namiesto opakovaného stláčania tlačidla „Generovať“ s nádejou, že celý súbor bude náhodne ladiť. Ponechajte jej odtieň a postupne meňte svetlosť pre svetlejšie a tmavšie varianty, alebo otočte odtieň o 180 stupňov, aby ste získali opačnú farbu. Formát „HSL kód“ mení tieto úpravy na jednoduchý výpočet namiesto hádania.
Prečo si vybrať tento generátor náhodných farieb?
- Každá farba vzniká vo vašom prehliadači cez Web Crypto API, nič sa neodosiela
- Všetkých 16 777 216 farieb je rovnako pravdepodobných, jeden náhodný bajt na kanál
- Kódy HEX, RGB a HSL pre tú istú farbu v ľubovoľnej kombinácii
- Až 50 farieb naraz, každá na vzorke s odznakom kontrastu textu
- Živá, Pastelová, Tmavá, Tlmená a Stupne sivej, alebo vlastný rozsah pre odtieň, sýtosť a svetlosť
- Bez opakovania, keď potrebujete unikátne farby, a HEX s veľkými písmenami alebo bez #
- Kliknutím na kód ho skopírujete, prípadne zmeníte farbu vo výbere prehliadača
- Kopírovať všetko, Uložiť do súboru a História posledných 10 sérií priamo v prehliadači
- Bezplatne a bez obmedzení: bez registrácie, bez limitov a bez ukladania na serveroch
Náhodné farby sa uplatnia všade tam, kde je farba potrebná skôr, než o nej niekto definitívne rozhodne. Dizajnéri ich používajú na prekonanie tvorivého bloku a na objavenie východiskového bodu, ku ktorému by ich bežná paleta nikdy nedospela. Vývojári nimi vypĺňajú makety, zástupné prvky a avatary, priraďujú každej sérii v grafe vlastnú farbu v čase, keď vizuálna téma ešte nie je určená, a testujú, ako si rozhranie poradí s pozadiami, pre ktoré nebolo pôvodne navrhnuté — séria 50 farieb z voľby „Všetky farby“ takmer vždy obsahuje aspoň jednu veľmi tmavú alebo veľmi svetlú farbu a voľby „Tmavá“ alebo „Pastelová“ zamerajú test na jeden z extrémov. Generatívni umelci a tvorcovia herných prototypov vkladajú hodnoty priamo do kódu, kde formát RGB vyhovuje väčšine grafických knižníc. Učitelia kladú tieto tri formáty vedľa seba, aby demonštrovali, že jednu farbu možno zapísať ako kód, ako tri kanály alebo ako pozíciu na farebnom kruhu, a prečo je verzia HSL zaokrúhlená. A každý, kto označuje položky štítkami alebo farebne kóduje zoznam, získa odlíšiteľné farby bez zdĺhavého rozhodovania.
Oplatí sa poznať aj niekoľko úprimných obmedzení. Toto je generátor, nie nástroj na tvorbu zladených paliet: nevytvára farebné harmónie a nedovoľuje uzamknúť jednu farbu, kým sa ostatné menia, pričom užší rozsah poskytuje farby jedného druhu, nie farby navrhnuté tak, aby k sebe ladili. Odznak kontrastu porovnáva výlučne čierny a biely text. Stránka pracuje vo farebnom priestore sRGB určenom pre obrazovky — HEX, RGB a HSL —, bez podpory priehľadnosti a bez formátov CMYK, Pantone, OKLCH či pomenovaných farieb CSS; pri tlači prispôsobte farbu v príprave pre tlač namiesto spoliehania sa na kód z obrazovky. Ten istý kód môže na rôznych displejoch vyzerať mierne odlišne, pretože monitory nie sú kalibrované rovnako. Hodnoty HSL sú zaokrúhlené, ako bolo opísané vyššie, a ak nie je začiarknutá voľba „Bez opakovania“, séria sa nekontroluje na duplicity. To, čo stránka garantuje s presnosťou, je užšie a exaktné: každá z jej 16 777 216 farieb alebo každá farba vo vami nastavenom rozsahu má rovnakú šancu pri každom vygenerovaní, čerpá sa z kryptografického zdroja vášho prehliadača a nikdy sa nikam neodosiela.