Trenger du en farge til en mockup, et diagram eller et tomt lerret, og vil helst unngå å velge en av gammel vane? Denne gratis tilfeldige fargegeneratoren henter farger fra hele det 24-bit fargerommet en skjerm kan vise, og plasserer hver farge på en fargeprøve ved siden av koden sin. Velg hvor mange du ønsker i feltet «Antall» — fra 1 til 50 — kryss av for formatene du trenger, og trykk på «Generer». Siden åpnes med en enkelt farge i HEX, så det første resultatet er bare ett klikk unna. Valget «HEX-kode» er krysset av fra starten, mens «RGB-kode» og «HSL-kode» står ved siden av, og enhver kombinasjon av de tre kan aktiveres samtidig. Tannhjulsknappen ved siden av «Generer» åpner «Avanserte innstillinger», der du kan begrense fargene til én type eller et bestemt område, utelukke gjentakelser og endre hvordan HEX skrives.
Hver farge lages direkte i nettleseren din via Web Crypto API (crypto.getRandomValues), som leverer kryptografisk sterke tilfeldige byte fra systemets egen entropikilde, fremfor en pseudotilfeldig funksjon som Math.random(). En farge på skjermen består av tre kanaler — rød, grønn og blå — hver med et heltall fra 0 til 255, og én tilfeldig byte kan ha nøyaktig 256 verdier. Hver kanal er dermed rett og slett én byte, uten mellomledd: ingen rest beregnes, og ingen fargetone favoriseres av et konverteringstrinn. Dette gjør at alle 16 777 216 fargene siden kan produsere, er nøyaktig like sannsynlige hver gang du trykker på «Generer». Et smalere fargeområde i «Avanserte innstillinger» opprettholder dette prinsippet innenfor intervallet: fargene trekkes fremdeles fra hele rommet og farger som faller utenfor forkastes, slik at alle tillatte farger har nøyaktig samme sjanse. Ingenting sendes til en server, ingenting loggføres, og så snart siden er lastet inn fortsetter den å fungere selv om internettforbindelsen kobles fra.
De tre formatene beskriver den samme fargen på tre ulike måter. Formatet «HEX-kode» er den sekssifrede formen som brukes i CSS og de fleste designverktøy, slik som #0778ff; det skrives med små bokstaver og en innledende #, og valgene «Store bokstaver» og «Uten #» i «Avanserte innstillinger» endrer dette for verktøy som krever et annet oppsett. Formatet «RGB-kode» angir de tre kanalene eksplisitt, som i rgb(7, 120, 255), noe som passer for programkode som behandler hver kanal for seg. Formatet «HSL-kode» beskriver fargen ved hjelp av nyanse, metning og lyshet, slik som i hsl(213, 100%, 51%), som er det enkleste formatet å justere manuelt i etterkant. Alle tre kan limes rett inn i et stilark. Likevel er de ikke like presise. HEX og RGB er nøyaktige; HSL er avrundet. Siden angir nyanse, metning og lyshet som heltall, og for omtrent 89 % av fargene vil ikke den avrundede verdien konverteres tilbake til nøyaktig samme farge: #646503 vises som hsl(61, 94%, 20%), som konverteres tilbake til #616303. Forskjellen er aldri mer enn 5 trinn i en kanal og vanligvis bare 1 eller 2 — usynlig på skjermen, men merkbar hvis du lagrer HSL-verdien og forventer å få den opprinnelige HEX-koden tilbake. Lagre derfor verdien som HEX eller RGB.
Én farge vises som et enkelt kort midt i resultatet; flere farger vises som en nummerert liste med én farge per rad, de valgte formatene side om side og et lite kontrastmerke på slutten. En liste med flere enn tre farger ruller i boksen, og pilen i hjørnet åpner den i full høyde; siden husker hvilken visning du valgte. Klikk på en kode for å kopiere bare den koden. Kopieringsknappen på slutten av en rad kopierer alle kodene for den fargen på én linje, atskilt med mellomrom. Klikk på selve fargeprøven for å åpne nettleserens fargevelger: velg en annen farge der, så oppdateres alle kodene i den raden automatisk for å samsvare, i hvert format du har aktivert, sammen med kontrastmerket. Knappen «Kopier alt» kopierer hele settet med én farge per linje, og «Lagre til fil» lagrer samme tekst i en ren .txt-fil; begge deler tar hensyn til eventuelle farger du endret i fargevelgeren. Delen «Historikk» tar vare på de siste 10 fargegruppene dine i denne nettleseren, nøyaktig slik de ble generert, og «Tøm» sletter resultatene. Innstillingene dine, inkludert de i «Avanserte innstillinger», huskes til neste besøk.
Farger med lik sannsynlighet ser ikke nødvendigvis jevnt fordelt ut, og det å vite hva man kan forvente sparer deg for å trykke på «Generer» av feil grunn. Målt over hele fargerommet er omtrent 35 % av fargene klare og mettede, med en HSL-metning på minst 70 % og lyshet mellom 35 % og 65 %. Nær-grå farger, med metning under 20 %, utgjør bare omtrent 4 %, og svært mørke farger (lyshet under 20 %) samt svært lyse (over 80 %) utgjør omtrent 3 % hver. Et utvalg på ti fra «Alle farger» vil derfor vanligvis inneholde flere kraftige farger, og sjelden en pastell eller koksgrå farge. Når du trenger en bestemt type, velger du den i «Fargetype»: valget «Levende» beholder nettopp den fargesterke gruppen, mens «Pastell», «Mørke», «Dempede» og «Gråtoner» gjør det samme for sine respektive grupper. Valget «Egendefinert» lar deg angi dine egne områder for «Nyanse», «Metning» og «Lyshet», og et nyanseintervall kan gå forbi 0, slik at 330 til 30 gir røde toner. Området kontrolleres mot HSL-koden siden viser, slik at ingen kode faller utenfor, og dersom intervallet inneholder for få farger for verdien i feltet «Antall», ber siden deg utvide det fremfor å gjenta farger. Gjentakelser er ellers mulige, men sjeldne: kryss av for «Ingen duplikater» for å utelukke dem; uten dette krysset er sjansen for at to av 50 farger fra hele rommet blir identiske omtrent 1 av 13 700.
En tilfeldig farge ønskes ofte som bakgrunn, noe som reiser det ene spørsmålet en fargeprøve ikke kan besvare med det blotte øye: vil tekst oppå den være leselig? Retningslinjene for universell utforming av nettinnhold, WCAG, krever et kontrastforhold på minst 4,5:1 for vanlig tekst. Målt over alle farger denne siden kan generere, oppnår sort tekst dette på omtrent 65 % av dem og hvit tekst på omtrent 36 %, og det finnes ingen farge der begge deler mislykkes: det beste av de to alternativene når alltid minst 4,58:1. For enhver tilfeldig bakgrunn vil altså enten sort eller hvit tekst være leselig, og siden viser deg hvilket alternativ som passer. Hver farge har et lite merke som viser Aa i det beste alternativet, etterfulgt av kontrastforholdet. Forholdet rundes nedover slik at det aldri overvurderer fargen, og det oppdateres straks du endrer fargen i fargevelgeren. Merket sammenligner bare sort og hvit tekst; for profilfarger eller andre tekstfarger bør du teste fargeparet i et kontrastverktøy.
Tilfeldig er ikke det samme som harmonisk. Hver farge i et utvalg trekkes helt uavhengig, uten hensyn til de andre, så generatoren setter aldri sammen en palett i en designers forstand — ingen komplementære par, ingen analoge fargerekker, ingen felles lyshet. Et smalere fargeområde endrer karakteren til utvalget, men ikke denne regelen: pastellfarger eller en rekke blåtoner oppstår fortsatt enkeltvis, uten noen innbyrdes sammenheng. Det er nettopp dette som er poenget: verktøyet gir deg fargen du ikke ville ha valgt selv, noe som bryter vaner og kreativ tørke. For å gjøre et tilfeldig funn om til noe brukbart, beholder du fargen du liker og avleder de andre fra den, i stedet for å trykke på «Generer» helt til et helt sett tilfeldigvis harmonerer. Behold fargens nyanse og juster lysheten trinnvis for lysere og mørkere varianter, eller roter nyansen 180 grader for å få motsatt farge. Formatet «HSL-kode» gjør disse justeringene til ren aritmetikk fremfor gjetting.
Hvorfor velge denne tilfeldige fargegeneratoren?
- Hver farge lages i nettleseren din med Web Crypto API, ingenting lastes opp
- Alle 16 777 216 farger er nøyaktig like sannsynlige, med én tilfeldig byte per kanal
- HEX-, RGB- og HSL-koder for samme farge, i enhver ønsket kombinasjon
- Opptil 50 farger om gangen, hver på en fargeprøve med kontrastmerke for tekst
- Velg mellom Levende, Pastell, Mørke, Dempede og Gråtoner, eller egne områder for nyanse, metning og lyshet
- Valget Ingen duplikater når du trenger det, samt HEX med store bokstaver eller uten #
- Klikk på en kode for å kopiere den, eller juster en farge i nettleserens fargevelger
- Knappene Kopier alt, Lagre til fil og en Historikk over dine siste 10 grupper i nettleseren
- Helt gratis og ubegrenset: ingen registrering, ingen kvoter, ingenting lagret på våre servere
Tilfeldige farger er nyttige overalt der en farge trengs før noen har bestemt seg. Designere bruker dem til å løse opp kreative sperrer og finne et utgangspunkt den vanlige paletten aldri ville ledet til. Utviklere fyller skisser, plassholdere og avatarer, gir hver dataserie i et diagram sin egen farge mens det egentlige temaet ennå ikke er fastlagt, og tester hvordan et grensesnitt håndterer bakgrunner det opprinnelig ikke var designet for — en gruppe på 50 farger fra «Alle farger» inneholder nesten alltid minst én svært mørk eller svært lys farge, og «Mørke» eller «Pastell» retter testen mot det ene ytterpunktet. Generative kunstnere og de som lager spillprototyper, mater verdiene direkte inn i programkode, der RGB-formen passer rett inn i de fleste grafikkbiblioteker. Lærere setter de tre formatene side om side for å demonstrere at én farge kan skrives som en kode, som tre kanaler eller som en posisjon på et fargehjul, og hvorfor HSL-versjonen avrundes. Og alle som merker, tagger eller fargekoder en liste, får tydelig adskilte farger uten å gruble over valget.
Noen ærlige begrensninger er verdt å kjenne til. Dette er en generator, ikke et palettverktøy: den bygger ikke fargeharmonier og låser ikke én farge fast mens de andre endres, og et smalere intervall gir farger av én type, ikke farger valgt for å passe sammen. Kontrastmerket sammenligner utelukkende sort og hvit tekst. Siden opererer med sRGB-fargene en skjerm viser — HEX, RGB og HSL — uten gjennomsiktighet og uten støtte for CMYK, Pantone, OKLCH eller navngitte CSS-farger; for trykksaker bør du finne fargetonen i trykkprosessen fremfor å stole på en skjermkode. Samme kode kan også se litt ulik ut fra skjerm til skjerm fordi skjermer kalibreres forskjellig. HSL-verdier avrundes, som beskrevet ovenfor, og med mindre «Ingen duplikater» er krysset av, kontrolleres ikke utvalget for gjentakelser. Det siden derimot garanterer, er presist og entydig: hver og en av dens 16 777 216 farger, eller hver farge innenfor området du velger, har nøyaktig samme sjanse ved hvert trykk, hentet fra nettleserens kryptografiske kilde og aldri sendt noe sted.