Tarvitsetko väriä luonnokseen, kaavioon tai tyhjään kankaaseen, etkä halua valita sitä tottumuksesta? Tämä ilmainen satunnaisten värien generaattori poimii värejä koko 24-bittiseltä alueelta, jonka näyttö pystyy näyttämään, ja asettaa jokaisen värinäytteeseen sen koodin viereen. Valitse ”Määrä”-kentässä, kuinka monta väriä haluat — mikä tahansa luku 1–50 — merkitse tarvitsemasi muodot ja paina ”Generoi”-painiketta. Sivu avautuu yhdellä värillä HEX-muodossa, joten ensimmäinen tulos on vain yhden napsautuksen päässä. Valintaruutu ”HEX-koodi” on merkitty alusta asti, sen vieressä ovat valintaruudut ”RGB-koodi” ja ”HSL-koodi”, ja mikä tahansa näiden kolmen yhdistelmä voidaan ottaa käyttöön samanaikaisesti. ”Generoi”-painikkeen vieressä oleva hammasratas-painike avaa ”Lisäasetukset”-osion, jossa voit rajata värit yhteen tyyppiin tai alueeseen, sulkea pois toistot ja muuttaa HEX:n kirjoitustapaa.
Jokainen väri luodaan selaimessasi Web Crypto API:n (crypto.getRandomValues) kautta, joka tuottaa kryptografisesti vahvoja satunnaisia tavuja järjestelmäsi omasta satunnaisuuden lähteestä, sen sijaan että käytettäisiin pseudosatunnaista funktiota, kuten Math.random(). Näytöllä oleva väri koostuu kolmesta kanavasta — punaisesta, vihreästä ja sinisestä — joista jokainen on kokonaisluku väliltä 0–255, ja yksi satunnainen tavu voi saada tarkalleen 256 arvoa. Toisin sanoen jokainen kanava on yksinkertaisesti yksi tavu, ilman välivaiheita: jakojäännöstä ei oteta, eikä mikään muunnosvaihe suosi mitään sävyä. Tämä tekee kaikista 16 777 216 väristä, jotka sivu pystyy tuottamaan, täysin yhtä todennäköisiä joka kerta, kun painat ”Generoi”. Kapeampi alue ”Lisäasetukset”-osiossa säilyttää tämän ominaisuuden alueen rajoissa: värit poimitaan silti koko avaruudesta, ja ne, jotka jäävät sen ulkopuolelle, hylätään, joten jokaisella alueen sallimalla värillä on sama mahdollisuus. Mitään ei lähetetä palvelimelle, mitään ei kirjata lokiin, ja kun sivu on latautunut, se jatkaa toimintaansa jopa ilman internetyhteyttä.
Kolme muotoa kuvaavat samaa väriä kolmella tavalla. Muoto ”HEX-koodi” on kuusinumeroinen, jota käytetään CSS:ssä ja useimmissa suunnittelutyökaluissa, esimerkiksi #0778ff; se kirjoitetaan pienillä kirjaimilla ja alkaa merkillä #, ja valinnat ”Isot kirjaimet” ja ”Ilman #-merkkiä” ”Lisäasetukset”-osiossa muuttavat tätä työkaluille, jotka odottavat toisenlaista kirjoitusasua. Muoto ”RGB-koodi” kirjoittaa kaikki kolme kanavaa erikseen, kuten rgb(7, 120, 255), mikä sopii koodille, joka käsittelee jokaista kanavaa erikseen. Muoto ”HSL-koodi” kuvaa väriä sävyn, kylläisyyden ja vaaleuden avulla, kuten hsl(213, 100%, 51%) — helpoin muoto myöhempää manuaalista säätöä varten. Kaikki kolme muotoa voi liittää suoraan tyylitiedostoon. Ne eivät kuitenkaan ole yhtä tarkkoja. HEX ja RGB ovat tarkkoja; HSL on pyöristetty. Sivu kirjoittaa sävyn, kylläisyyden ja vaaleuden kokonaislukuina, ja noin 89 %:lla väreistä tämä pyöristetty arvo ei muutu takaisin täsmälleen samaksi väriksi: #646503 näytetään muodossa hsl(61, 94%, 20%), joka muuttuu takaisin muotoon #616303. Ero yhdessä kanavassa ei koskaan ylitä 5:tä askelta ja on tavallisesti 1 tai 2 — näkymätön näytöllä, mutta todellinen, jos tallennat HSL-arvon ja odotat saavasi alkuperäisen HEX:n takaisin. Tallenna arvo siksi HEX- tai RGB-muodossa.
Yksi väri näkyy tuloksen keskellä yhtenä palasena; useampi väri näkyy numeroituna luettelona, yksi väri riviä kohden, valitut muodot rinnakkain ja pieni kontrastimerkki lopussa. Yli kolmen värin luettelo vierittyy laatikon sisällä, ja sen kulmassa oleva nuoli avaa sen täyteen korkeuteen; sivu muistaa, missä tilassa jätit sen. Napsauta mitä tahansa koodia kopioidaksesi vain sen. Rivin lopussa oleva kopiointipainike kopioi kyseisen värin kaikki koodit yhdelle riville, välilyönnein erotettuina. Napsauta itse näytettä, niin selaimesi oma värivalitsin avautuu: valitse siellä toinen väri, ja kaikki kyseisen rivin koodit kirjoitetaan uudelleen vastaamaan sitä, jokaisessa käytössä olevassa muodossa, yhdessä sen merkin kanssa. ”Kopioi kaikki” -painike kopioi koko erän, yhden värin riviä kohden, ja ”Tallenna tiedostoon” -painike kirjoittaa saman tekstin yksinkertaiseen .txt-tiedostoon; molemmat noudattavat mitä tahansa väriä, jonka muutit valitsimessa. ”Historia”-osio säilyttää viimeisimmät 10 eräsi tässä selaimessa, täsmälleen sellaisina kuin ne luotiin, ja ”Tyhjennä”-painike tyhjentää tuloksen. Asetuksesi, mukaan lukien ”Lisäasetukset”-osion asetukset, muistetaan seuraavaa käyntiä varten.
Yhtä todennäköiset värit eivät näytä tasaisesti jakautuneilta, ja tieto siitä, mitä odottaa, säästää sinut ”Generoi”-painikkeen painamiselta väärästä syystä. Koko alueelta mitattuna noin 35 % väreistä on kirkkaita ja kylläisiä, HSL-kylläisyydellä vähintään 70 % ja vaaleudella 35–65 %. Harmaata lähellä olevat värit, joiden kylläisyys on alle 20 %, muodostavat vain noin 4 %, ja hyvin tummat (vaaleus alle 20 %) ja hyvin vaaleat (yli 80 %) muodostavat noin 3 % kumpikin. Siksi kymmenen värin erä valinnalla ”Kaikki värit” sisältää tavallisesti useita voimakkaita värejä ja harvoin pastellia tai tummanharmaata väriä. Kun tarvitset tietyn tyypin, valitse se ”Värityyppi”-kentässä: ”Kirkkaat” säilyttää juuri sen kylläisen ryhmän, ja ”Pastellit”, ”Tummat”, ”Vaimeat” ja ”Harmaasävyt” tekevät saman omille ryhmilleen. Valinta ”Omat” antaa sinun asettaa omat alueesi kohtiin ”Sävy”, ”Kylläisyys” ja ”Vaaleus”, ja sävyalue voi ylittää arvon 0, joten alue 330–30 antaa punaisia värejä. Alue tarkistetaan sivun näyttämää HSL-koodia vasten, joten mikään koodi ei jää sen ulkopuolelle, ja jos siinä on liian vähän värejä ”Määrä”-kentän arvolle, sivu pyytää sinua laajentamaan aluetta värien toistamisen sijaan. Toistot ovat muuten mahdollisia, mutta harvinaisia: merkitse ”Ilman kaksoiskappaleita” sulkeaksesi ne pois, ja ilman sitä todennäköisyys, että kaksi 50 värin joukosta koko alueelta osuu samaksi, on noin 1/13 700.
Satunnaista väriä halutaan usein taustaksi, mikä nostaa esiin yhden kysymyksen, johon näyte ei osaa vastata paljaalla silmällä: onko sen päällä oleva teksti luettavaa? Verkon saavutettavuusohje WCAG vaatii tavalliselle tekstille vähintään 4,5:1 kontrastisuhteen. Kaikista väreistä mitattuna, joita tämä sivu pystyy tuottamaan, musta teksti saavuttaa sen noin 65 %:ssa niistä ja valkoinen teksti noin 36 %:ssa, eikä ole yhtään väriä, jossa molemmat epäonnistuisivat: parempi näistä kahdesta saavuttaa aina vähintään 4,58:1. Siksi millä tahansa satunnaisella taustalla musta tai valkoinen teksti on luettavaa, ja sivu näyttää sinulle, kumpi. Jokaisen värin vieressä näkyy pieni merkki, joka näyttää tekstin Aa paremmalla näistä kahdesta, minkä jälkeen tulee sen kontrastisuhde. Suhde pyöristetään alaspäin, joten se ei koskaan näytä parempaa kontrastia kuin mitä se on, ja se päivittyy, kun vaihdat väriä valitsimessa. Merkki vertaa vain mustaa ja valkoista tekstiä; brändiväriä tai mitä tahansa muuta tekstin väriä varten tarkista pari kontrastintarkistimella.
Satunnaisuus ei ole sama asia kuin harmonia. Jokainen väri erässä poimitaan itsenäisesti, ilman tietoa muista, joten generaattori ei koskaan rakenna palettia suunnittelijan tarkoittamassa mielessä — ei täydentäviä pareja, ei analogisia sarjoja, ei jaettua vaaleutta. Kapeampi alue muuttaa erän luonnetta, ei tätä sääntöä: pastellivärit tai sinisten sarja saapuvat silti yksi kerrallaan, ilman mitään, mikä sitoisi niitä yhteen. Siinä on koko juju: se antaa sinulle värin, jota et itse olisi valinnut, ja juuri se murtaa tottumuksen tai luovan tukoksen. Muuttaaksesi satunnaisen löydön käyttökelpoiseksi, säilytä väri, josta pidät, ja johda muut siitä, sen sijaan että painaisit ”Generoi”, kunnes kokonainen erä sattuu sopimaan yhteen. Säilytä sen sävy ja muuta vaaleutta asteittain vaaleampia ja tummempia sävyjä varten, tai käännä sävyä 180 astetta saadaksesi vastavärin. Muoto ”HSL-koodi” tekee näistä siirroista laskutoimituksia arvailun sijaan.
Miksi valita tämä satunnaisten värien generaattori?
- Jokainen väri luodaan selaimessasi Web Crypto API:n avulla, mitään ei ladata palvelimelle
- Kaikki 16 777 216 väriä ovat täysin yhtä todennäköisiä, yksi satunnainen tavu kanavaa kohden
- HEX-, RGB- ja HSL-koodit samalle värille, missä tahansa yhdistelmässä
- Jopa 50 väriä kerralla, jokainen värinäytteessä tekstin kontrastimerkillä
- Kirkkaat, Pastellit, Tummat, Vaimeat ja Harmaasävyt, tai oma sävyn, kylläisyyden ja vaaleuden alueesi
- Ilman kaksoiskappaleita tarvittaessa, ja HEX isoilla kirjaimilla tai ilman #-merkkiä
- Napsauta koodia kopioidaksesi sen, tai vaihda mikä tahansa väri selaimesi värivalitsimessa
- Kopioi kaikki, Tallenna tiedostoon ja viimeisimpien 10 eräsi Historia, joka säilyy selaimessasi
- Ilmainen ja rajoittamaton: ei rekisteröitymistä, ei kiintiötä, palvelimillemme ei tallenneta mitään
Satunnaiset värit ovat hyödyllisiä aina, kun väriä tarvitaan ennen kuin kukaan on päättänyt, mikä se on. Suunnittelijat käyttävät niitä murtaakseen luovan tukoksen ja löytääkseen lähtökohdan, johon heidän tavanomainen palettinsa ei koskaan pääsisi. Kehittäjät täyttävät niillä luonnoksia, paikkamerkkejä ja avatareja, antavat kaavion jokaiselle sarjalle oman värinsä, kun varsinaista teemaa ei ole vielä päätetty, ja testaavat, miten käyttöliittymä selviytyy taustoista, joita varten sitä ei suunniteltu — 50 värin erä valinnalla ”Kaikki värit” sisältää lähes aina ainakin yhden hyvin tumman tai hyvin vaalean värin, ja ”Tummat” tai ”Pastellit” suuntaa testin toiseen laitaan. Generatiivisen taiteen tekijät ja pelien prototyyppien kehittäjät syöttävät arvot suoraan koodiin, jossa RGB-muoto sopii useimpiin grafiikkakirjastoihin. Opettajat asettavat kolme muotoa rinnakkain osoittaakseen, että yksi väri voidaan kirjoittaa koodina, kolmena kanavana tai sijaintina väriympyrällä, ja miksi HSL-versio on pyöristetty. Ja kuka tahansa, joka nimeää, merkitsee tai värikoodaa luettelon kohteita, saa erottuvia värejä murehtimatta, minkä valitsee.
Kannattaa tietää muutama rehellinen rajoitus. Tämä on generaattori, ei palettityökalu: se ei rakenna väriharmonioita eikä pidä yhtä väriä paikallaan muiden muuttuessa, ja kapeampi alue antaa yhden tyypin värejä, ei värejä, jotka on valittu sopimaan yhteen. Kontrastimerkki vertaa vain mustaa ja valkoista tekstiä. Sivu toimii sRGB-väreillä, joita näyttö näyttää — HEX, RGB ja HSL — ilman läpinäkyvyyttä ja ilman CMYK-, Pantone-, OKLCH- tai nimettyjä CSS-värejä; painatusta varten sovita väri painovalmistelussa sen sijaan, että luottaisit näytön koodiin. Sama koodi saattaa myös näyttää hieman erilaiselta eri näytöillä, koska näyttöjä ei ole kalibroitu samalla tavalla. HSL-arvot on pyöristetty, kuten edellä kuvattiin, ja ellei ”Ilman kaksoiskappaleita” ole valittu, erää ei tarkisteta toistojen varalta. Se, minkä sivu todella takaa, on kapeampi ja tarkka: jokainen sen 16 777 216 väristä, tai jokainen väri asettamasi alueen rajoissa, saa saman mahdollisuuden joka painalluksella, poimittuna selaimesi kryptografisesta lähteestä eikä koskaan lähetettynä minnekään.