Színre van szükséged egy maketthez, diagramhoz vagy egy üres vászonhoz, és nem szeretnél megszokásból választani? Ez az ingyenes véletlen színgenerátor a képernyők által megjeleníthető teljes 24-bit tartományból sorsol színeket, és mindegyiket egy színmintán jeleníti meg a kódja mellett. A «Darabszám» mezőben válaszd ki, hány színt szeretnél — 1 és 50 között bármennyit —, jelöld be a szükséges formátumokat, majd nyomd meg a «Generálás» gombot. Az oldal egyetlen HEX formátumú színnel nyílik meg, így az első eredmény egyetlen kattintással elérhető. A «HEX-kód» jelölőnégyzet alapértelmezés szerint be van jelölve, az «RGB-kód» és a «HSL-kód» mellette található, és a három formátum bármilyen kombinációja egyszerre bekapcsolható. A «Generálás» melletti fogaskerék ikon megnyitja a «Speciális beállítások» panelt, ahol a színeket egy bizonyos típusra vagy tartományra korlátozhatod, kizárhatod az ismétlődéseket, és megváltoztathatod a HEX kód írásmódját.
Minden szín a böngésződben jön létre a Web Crypto API (crypto.getRandomValues) segítségével, amely kriptográfiailag erős véletlen bájtokat biztosít a rendszered saját véletlenszerűségi forrásából, nem pedig egy pszeudovéletlen függvény, például a Math.random() révén. A képernyőn megjelenő szín három csatornából áll — piros, zöld és kék —, amelyek mindegyike egy 0 és 255 közötti egész szám, és egy véletlen bájt pontosan 256 értéket vehet fel. Így minden csatorna egyszerűen egy bájt, közbenső lépések nélkül: nem képzünk osztási maradékot, és semmilyen átalakítási lépés nem részesít előnyben egyetlen árnyalatot sem. Ez teszi az oldal által előállítható mind a 16 777 216 színt pontosan egyformán valószínűvé minden alkalommal, amikor megnyomod a «Generálás» gombot. A «Speciális beállítások» panelen beállított szűkebb tartomány a tartományon belül is megtartja ezt az ígéretet: a színek sorsolása továbbra is a teljes térből történik, és a tartományon kívül esőket félretesszük, így minden engedélyezett színnek azonos esélye van. Semmi sem kerül szerverre, semmi sem naplózódik, és a betöltés után az oldal internetkapcsolat nélkül is tovább működik.
A három formátum ugyanazt a színt háromféleképpen írja le. A «HEX-kód» a CSS-ben és a legtöbb tervezőeszközben használt hatjegyű forma, például a #0778ff; kisbetűvel, kezdő # jellel íródik, a «Speciális beállítások» panelen lévő «Nagybetűs» és «# nélkül» opció pedig módosítja ezt az olyan eszközök számára, amelyek más formátumot várnak. Az «RGB-kód» külön megadja a három csatornát, mint az rgb(7, 120, 255), ami megfelel az egyes csatornákkal külön dolgozó kódoknak. A «HSL-kód» színárnyalat, telítettség és világosság szerint írja le a színt, mint a hsl(213, 100%, 51%), amely a legkönnyebben módosítható utólag kézzel. Mindhárom közvetlenül beilleszthető a stíluslapokba. Azonban nem egyformán precízek. A HEX és az RGB pontos; a HSL kerekített. Az oldal a színárnyalatot, a telítettséget és a világosságot egész számként írja le, és a színek körülbelül 89%-ánál ez a kerekített érték visszaalakítva nem adja vissza pontosan ugyanazt a színt: a #646503 kód hsl(61, 94%, 20%) formában jelenik meg, amely visszaalakítva #616303 lesz. A különbség egyetlen csatornában sem haladja meg az 5 lépést, és általában 1 vagy 2 — ez a képernyőn láthatatlan, de valós eltérés, ha a HSL értéket mented el, és az eredeti HEX értéket várod vissza. A mentett értékként tartsd meg a HEX vagy RGB kódot.
Egyetlen szín egy önálló blokként jelenik meg az eredménymező közepén; több szín sorszámozott listaként látható, soronként egy színnel, a kiválasztott formátumokkal egymás mellett és a végén egy kis kontrasztjelvénnyel. A több mint 3 színt tartalmazó lista a dobozon belül görgethető, a sarkában lévő nyíl pedig teljes magasságúra nyitja; az oldal megjegyzi, hogyan hagytad. Kattints bármelyik kódra, hogy csak azt a kódot másold vágólapra. A sor végén lévő másolás gomb az adott szín összes kódját egyetlen sorba másolja, szóközökkel elválasztva. Kattints magára a színmintára, és megnyílik a böngésződ saját színválasztója: válassz ott egy másik színt, és a sor összes kódja frissül az új színhez minden bekapcsolt formátumban, a jelvénnyel együtt. Az «Összes másolása» gomb a teljes készletet soronként egy színként másolja, a «Mentés fájlba» gomb pedig ugyanezt a szöveget egy egyszerű .txt fájlba írja; mindkettő követi a színválasztóban végzett módosításokat. Az «Előzmények» panel megőrzi az utolsó 10 generálást ebben a böngészőben, pontosan úgy, ahogyan létrejöttek, a «Törlés» gomb pedig kiüríti az eredményt. Beállításaidat, beleértve a «Speciális beállítások» opcióit is, megjegyzi a rendszer a következő látogatásra.
Az egyenlő valószínűségű színek nem tűnnek egyenletesen eloszlónak, és annak ismerete, hogy mire számíthatsz, megkímél attól, hogy feleslegesen nyomogasd a «Generálás» gombot. A teljes tartományban mérve a színek körülbelül 35%-a élénk és telített, legalább 70%-os HSL telítettséggel és 35% és 65% közötti világossággal. A 20% alatti telítettségű, szinte szürke színek aránya mindössze körülbelül 4%, a nagyon sötét színek (20% alatti világosság) és a nagyon világosak (80% feletti) pedig körülbelül 3%-ot tesznek ki egyenként. Így a «Minden szín» beállításból generált 10 színből álló készlet általában több markáns színt tartalmaz, és ritkán pasztellt vagy sötétszürkét. Ha egy bizonyos típusra van szükséged, válaszd ki a «Színtípus» legördülő menüben: az «Élénk» opció pontosan ezt a ragyogó csoportot tartja meg, a «Pasztell», «Sötét», «Visszafogott» és «Szürkeárnyalatos» pedig ugyanezt teszi a saját kategóriájával. Az «Egyéni» lehetővé teszi saját «Színárnyalat», «Telítettség» és «Világosság» tartományok beállítását, és a színárnyalat-tartomány átlépheti a 0 értéket, így a 330 és 30 közötti tartomány vöröseket eredményez. A rendszer a tartományt az oldalon látható HSL-kódhoz viszonyítva ellenőrzi, így egyetlen kód sem esik kívül rajta, és ha a tartományban túl kevés szín marad a megadott «Darabszám» értékéhez képest, az oldal a tartomány szélesítését kéri ahelyett, hogy színeket ismételne. Az ismétlődések egyébként lehetségesek, de ritkák: jelöld be az «Ismétlődések nélkül» lehetőséget a kizárásukhoz; enélkül annak az esélye, hogy a teljes tartományból választott 50 színből kettő azonos legyen, körülbelül 1 a 13 700-hoz.
Egy véletlen színt gyakran háttérként szeretnénk használni, ami felveti azt az egyetlen kérdést, amelyre egy színminta ránézésre nem tud választ adni: olvasható lesz-e rajta a szöveg? A webes akadálymentesítési irányelv, a WCAG, normál szöveg esetén legalább 4,5:1 kontrasztarányt ír elő. Az oldal által generálható összes színt megvizsgálva a fekete szöveg a színek körülbelül 65%-ánál éri el ezt az arányt, a fehér szöveg pedig körülbelül 36%-ánál, és nincs olyan szín, amelyen mindkettő megbukna: a kettő közül a jobbik mindig eléri legalább a 4,58:1 értéket. Így bármilyen véletlen háttérnél a fekete vagy a fehér szöveg biztosan megfelelő lesz, és az oldal megmutatja, melyik az. Minden szín mellett megjelenik egy kis jelvény, amelyen a kettő közül a megfelelőbb színnel szerepel az Aa felirat, mellette a kontrasztaránnyal. Az arányt a rendszer lefelé kerekíti, így soha nem tünteti fel kedvezőbbnek a színt, és azonnal frissül, ha módosítod a színt a színválasztóban. A jelvény kizárólag a fekete és fehér szöveget hasonlítja össze; márka- vagy más szövegszínek esetén ellenőrizd a párost egy kontrasztellenőrző eszközzel.
A véletlenszerű nem ugyanaz, mint a harmonikus. Egy készleten belül minden szín egymástól függetlenül kerül kiválasztásra, a többi ismerete nélkül, így a generátor soha nem épít palettát a tervezői értelemben — nincsenek komplementer párok, analóg sorok vagy közös világosság. A szűkebb tartomány megváltoztatja a készlet jellegét, de ezt a szabályt nem: a pasztellek vagy a kékek sora továbbra is egyenként érkezik, semmi sem köti össze őket. Pontosan ez a lényege: olyan színt ad, amelyet magadtól nem választottál volna, és ez az, ami megtöri a megszokást vagy a kreatív elakadást. Egy véletlen találat használhatóvá tételéhez tartsd meg a neked tetsző színt, és építkezz köré, ahelyett, hogy addig nyomkodnád a «Generálás» gombot, amíg egy egész készlet véletlenül össze nem illik. Tartsd meg a színárnyalatát, és változtasd a világosságot a világosabb és sötétebb árnyalatokhoz, vagy fordítsd el a színárnyalatot 180 fokkal egy kontrasztos párhoz. A «HSL-kód» az a formátum, amely ezeket a lépéseket találgatás helyett egyszerű számtani műveletté teszi.
Miért válaszd ezt a véletlen színgenerátort?
- Minden szín a böngésződben jön létre a Web Crypto API segítségével, semmi sem töltődik fel
- Mind a 16 777 216 szín pontosan egyformán valószínű, csatornánként egy véletlen bájttal
- HEX-, RGB- és HSL-kódok ugyanahhoz a színhez, tetszőleges kombinációban
- Akár 50 szín egyszerre, mindegyik saját színmintán, szövegkontraszt-jelvénnyel
- Élénk, Pasztell, Sötét, Visszafogott és Szürkeárnyalatos opció, vagy saját Színárnyalat, Telítettség és Világosság tartomány
- Ismétlődések nélkül, amikor szükséged van rá, valamint Nagybetűs vagy # nélkül formátum a HEX-kód számára
- Kattints bármelyik kódra a másoláshoz, vagy módosíts bármilyen színt a böngésződ színválasztójában
- Összes másolása, Mentés fájlba és az utolsó 10 generálásod Előzmények listája a böngésződben tárolva
- Ingyenes és korlátlan: nincs regisztráció, nincs kvóta, semmit sem tárolunk a szervereinken
A véletlen színek ott bizonyítják hasznosságukat, ahol színekre van szükség még azelőtt, hogy bárki döntött volna róluk. A tervezők arra használják őket, hogy áttörjék a kreatív blokkot, és olyan kiindulási pontot találjanak, amelyet a megszokott palettájukkal soha nem értek volna el. A fejlesztők maketteket, helyőrzőket és avatarokat töltenek fel velük, egy diagram minden adatsorának saját színt adnak, amíg a valódi téma el nem dől, és tesztelik, hogyan birkózik meg a felület olyan háttérrel, amelyre nem tervezték — a «Minden szín» opcióból generált 50 szín szinte mindig tartalmaz legalább egy nagyon sötét vagy nagyon világos árnyalatot, a «Sötét» vagy «Pasztell» beállítás pedig a spektrum egyik végére célozza a tesztet. A generatív művészek és játékkészítők az értékeket közvetlenül a kódba táplálják, ahol az RGB formátum a legtöbb grafikus könyvtárba könnyen illeszkedik. Az oktatók egymás mellé helyezik a három formátumot, hogy bemutassák: egy szín leírható kódként, három csatornaként vagy a színkörön elfoglalt pozícióként is, és elmagyarázzák, miért kerekített a HSL változat. És bárki, aki listát címkéz vagy színkódol, egyértelműen elkülönülő színeket kap anélkül, hogy hosszan töprengene azon, melyiket válassza.
Néhány őszinte korlátot is érdemes ismerni. Ez egy generátor, nem pedig palettakészítő eszköz: nem hoz létre színharmóniákat, és nem tart fixen egy színt, miközben a többi változik; a szűkebb tartomány egy bizonyos típusú színeket ad, nem pedig olyanokat, amelyeket egymáshoz illeszkedve választottak ki. A kontrasztjelvény kizárólag a fekete és a fehér szöveget hasonlítja össze. Az oldal a képernyők által megjelenített sRGB színekkel dolgozik — HEX, RGB és HSL formátumban —, átlátszóság nélkül, és nem tartalmaz CMYK, Pantone, OKLCH vagy elnevezett CSS színeket; nyomtatáshoz a nyomdai munkafolyamatban határozd meg a színt, ahelyett, hogy egy képernyőkódra hagyatkoznál. Ugyanaz a kód kissé eltérően nézhet ki az egyes kijelzőkön, mivel a képernyők nincsenek egyformán kalibrálva. A HSL értékek a fent leírtak szerint kerekítettek, és hacsak nincs bejelölve az «Ismétlődések nélkül» lehetőség, a készletben nem ellenőrizzük az ismétlődéseket. Amit az oldal garantál, az szűkebb és pontos: mind a 16 777 216 szín, vagy a beállított tartományon belüli minden szín azonos eséllyel indul minden egyes gombnyomáskor, a böngésződ kriptográfiai forrásából sorsolva, és soha sehova sem kerül továbbításra.