Mangler du en farve til en mockup, et diagram eller et tomt lærred, og vil hellere undgå at vælge én af gammel vane? Denne gratis tilfældige farvegenerator trækker farver fra hele det 24-bit spektrum, en skærm kan vise, og viser hver enkelt på en farveprøve ved siden af dens kode. Vælg hvor mange du vil have i Antal — fra 1 til 50 — sæt kryds ved de formater, du har brug for, og tryk på Generér. Siden åbner med én enkelt farve i HEX, så det første resultat er ét klik væk. HEX-kode er markeret fra start, RGB-kode og HSL-kode står ved siden af, og enhver kombination af de tre kan være slået til samtidig. Tandhjulsknappen ved siden af Generér åbner Avancerede indstillinger, hvor du kan begrænse farverne til én type eller ét interval, udelukke gentagelser og ændre, hvordan HEX skrives.
Hver farve dannes i din browser via Web Crypto API (crypto.getRandomValues), som leverer kryptografisk stærke tilfældige bytes fra dit systems egen kilde til tilfældighed, i stedet for en pseudo-tilfældig funktion som Math.random(). En farve på skærmen består af tre kanaler — rød, grøn og blå — hver et helt tal fra 0 til 255, og én tilfældig byte rummer præcis 256 værdier. Så hver kanal er ganske enkelt én byte, uden noget imellem: der tages ingen rest, og intet trin i omregningen favoriserer nogen nuance. Det gør alle 16.777.216 farver, siden kan skabe, præcis lige sandsynlige, hver gang du trykker på Generér. Et smallere interval i Avancerede indstillinger holder det løfte inden for intervallet: farverne trækkes stadig fra hele rummet, og dem, der falder udenfor, sorteres fra, så enhver farve inden for intervallet har samme chance. Intet sendes til en server, intet logges, og når siden først er indlæst, fortsætter den med at virke, selv uden forbindelse.
De tre formater beskriver den samme farve på tre måder. HEX-kode er den sekscifrede form, der bruges i CSS og de fleste designværktøjer, som #0778ff; den skrives med små bogstaver og et indledende #, og Store bogstaver og Uden # i Avancerede indstillinger ændrer det for værktøjer, der forventer det anderledes. RGB-kode staver de tre kanaler ud, som i rgb(7, 120, 255), hvilket passer til kode, der arbejder med hver kanal for sig. HSL-kode beskriver farven ved nuance, mætning og lysstyrke, som i hsl(213, 100%, 51%), den nemmeste form at justere i hånden bagefter. Alle tre kan indsættes direkte i et stylesheet. De er dog ikke lige præcise. HEX og RGB er eksakte; HSL er afrundet. Siden skriver nuance, mætning og lysstyrke som hele tal, og for omkring 89% af farverne konverterer den afrundede værdi ikke tilbage til nøjagtig den samme farve: #646503 vises som hsl(61, 94%, 20%), som konverteres tilbage til #616303. Forskellen er aldrig mere end 5 trin i en kanal og som regel 1 eller 2 — usynligt på skærmen, men reelt, hvis du gemmer HSL-værdien og forventer at få den oprindelige HEX-kode igen. Behold HEX eller RGB som den værdi, du gemmer.
Én farve vises som en enkelt boks midt i resultatet; flere vises som en nummereret liste, én farve pr. række, med de valgte formater side om side og et lille kontrastmærke til sidst. En liste med mere end tre farver scroller inde i boksen, og pilen i hjørnet åbner den til fuld højde; siden husker, hvordan du sidst efterlod den. Klik på en kode for kun at kopiere den kode. Kopieringsknappen i slutningen af en række kopierer alle koder for den farve på én linje, adskilt af mellemrum. Klik på selve farveprøven, så åbner din browsers egen farvevælger: vælg en anden farve der, og alle koder i den række skrives om, så de matcher, i hvert format du har slået til, sammen med dens mærke. Kopiér alt kopierer hele batchen, én farve pr. linje, og Gem som fil skriver den samme tekst til en almindelig .txt-fil; begge følger enhver farve, du har ændret i farvevælgeren. Historik gemmer dine sidste 10 batches i denne browser, nøjagtig som de blev genereret, og Ryd tømmer resultatet. Dine indstillinger, inklusive dem i Avancerede indstillinger, huskes til næste besøg.
Lige sandsynlige farver ser ikke jævnt fordelte ud, og det er nyttigt at vide, hvad man kan forvente, så man ikke trykker på Generér af den forkerte grund. Målt over hele spektret er omkring 35% af farverne klare og mættede, med en HSL-mætning på mindst 70% og en lysstyrke mellem 35% og 65%. Nærgrå farver, med en mætning under 20%, udgør kun omkring 4%, og meget mørke farver (lysstyrke under 20%) og meget lyse (over 80%) udgør hver omkring 3%. Så en batch på ti fra Alle farver vil som regel indeholde flere kraftige farver og sjældent en pastelfarve eller en koksgrå. Når du har brug for en bestemt type, vælger du den i Farvetype: Levende holder sig netop til den klare gruppe, og Pastel, Mørke, Dæmpede og Gråtoner gør det samme for deres. Brugerdefineret lader dig sætte dine egne intervaller for Nuance, Mætning og Lysstyrke, og et nuanceinterval kan løbe forbi 0, så 330 til 30 giver røde farver. Intervallet tjekkes mod den HSL-kode, siden viser, så ingen kode falder udenfor, og hvis det indeholder for få farver til dit Antal, beder siden dig om at udvide det i stedet for at gentage farver. Ellers er gentagelser mulige, men sjældne: sæt kryds ved Uden dubletter for at udelukke dem, og uden den indstilling er chancen for, at to ud af 50 farver fra hele spektret bliver identiske, omkring 1 ud af 13.700.
En tilfældig farve ønskes ofte som baggrund, hvilket rejser det ene spørgsmål, en farveprøve ikke kan besvare med øjet alene: vil tekst på den være læselig? Retningslinjen for webtilgængelighed, WCAG, kræver et kontrastforhold på mindst 4,5:1 for almindelig tekst. Målt på tværs af alle farver, denne side kan skabe, opnår sort tekst det på omkring 65% af dem og hvid tekst på omkring 36%, og der findes ingen farve, hvor begge fejler: den bedste af de to når altid mindst 4,58:1. Så for enhver tilfældig baggrund vil enten sort eller hvid tekst bestå, og siden viser dig hvilken. Hver farve bærer et lille mærke, der viser Aa i den bedste af de to, efterfulgt af dens kontrastforhold. Forholdet rundes ned, så det aldrig smigrer en farve, og det opdateres, når du ændrer farven i farvevælgeren. Mærket sammenligner kun sort og hvid tekst; for en brandfarve eller enhver anden tekstfarve skal du køre parret gennem en kontrastchecker.
Tilfældigt er ikke det samme som harmonisk. Hver farve i en batch trækkes for sig selv, uden kendskab til de andre, så generatoren bygger aldrig en palet i designerens forstand — ingen komplementære par, ingen analoge forløb, ingen fælles lysstyrke. Et smallere interval ændrer batchens karakter, ikke den regel: pastelfarver eller en række blå toner ankommer stadig én ad gangen, uden noget der binder dem sammen. Det er pointen: det giver dig den farve, du ikke selv ville have valgt, hvilket er det, der bryder en vane eller en kreativ blokering. For at gøre et tilfældigt fund brugbart skal du beholde den farve, du kan lide, og bygge videre ud fra den, i stedet for at trykke på Generér, indtil et helt sæt tilfældigvis stemmer overens. Hold nuancen fast og ændr lysstyrken trinvis for lysere og mørkere toner, eller drej nuancen 180 grader for en kontrasterende partner. HSL-kode er det format, der gør de greb til regning i stedet for gætteri.
Hvorfor vælge denne tilfældige farvegenerator?
- Hver farve dannes i din browser med Web Crypto API, intet uploades
- Alle 16.777.216 farver præcis lige sandsynlige, én tilfældig byte pr. kanal
- HEX-, RGB- og HSL-koder for samme farve, i enhver kombination
- Op til 50 farver på én gang, hver på en farveprøve med et tekstkontrastmærke
- Levende, Pastel, Mørke, Dæmpede og Gråtoner, eller dit eget interval for nuance, mætning og lysstyrke
- Uden dubletter når du har brug for det, og HEX med store bogstaver eller uden #
- Klik på en kode for at kopiere den, eller ændr enhver farve i din browsers farvevælger
- Kopiér alt, Gem som fil og en Historik med dine sidste 10 batches, gemt i din browser
- Gratis og ubegrænset: ingen tilmelding, ingen kvote, intet gemt på vores servere
Tilfældige farver gør nytte, hvor end en farve er nødvendig, før nogen har besluttet sig for en. Designere bruger dem til at bryde en kreativ blokering og til at finde et udgangspunkt, deres sædvanlige palet aldrig ville have nået. Udviklere fylder mockups, pladsholdere og avatarer, giver hver serie i et diagram sin egen farve, mens det rigtige tema stadig er ubestemt, og tester, hvordan en grænseflade klarer baggrunde, den ikke er designet til — en batch på 50 fra Alle farver indeholder næsten altid mindst én meget mørk eller meget lys farve, og Mørke eller Pastel retter testen mod den ene ende. Generative kunstnere og spiludviklere, der laver prototyper, fodrer værdierne direkte ind i koden, hvor RGB-formen passer ind i de fleste grafikbiblioteker. Undervisere sætter de tre formater side om side for at vise, at én farve kan skrives som en kode, som tre kanaler eller som en position på et farvehjul, og hvorfor HSL-versionen er afrundet. Og alle, der mærker, tagger eller farvekoder en liste, får distinkte farver uden at bekymre sig om hvilke.
Der er nogle ærlige begrænsninger, det er værd at kende. Dette er en generator, ikke et paletværktøj: den bygger ikke farveharmonier og holder ikke én farve fast, mens de andre ændrer sig, og et smallere interval giver farver af én type, ikke farver valgt til at passe sammen. Kontrastmærket sammenligner kun sort og hvid tekst. Siden arbejder i de sRGB-farver, en skærm viser — HEX, RGB og HSL — uden transparens og uden CMYK, Pantone, OKLCH eller navngivne CSS-farver; til print bør du matche farven i din trykarbejdsgang i stedet for at stole på en skærmkode. Den samme kode kan også se en smule anderledes ud fra én skærm til en anden, fordi skærme ikke er kalibreret ens. HSL-værdier er afrundede, som beskrevet ovenfor, og medmindre Uden dubletter er markeret, tjekkes en batch ikke for gentagelser. Det, siden derimod garanterer, er snævrere og eksakt: hver af dens 16.777.216 farver, eller hver farve inden for det interval, du har sat, har samme chance ved hvert tryk, trukket fra din browsers kryptografiske kilde og aldrig sendt nogen steder hen.