Behöver du en färg till en mockup, ett diagram eller en tom rityta, och vill slippa välja en av gammal vana? Denna kostnadsfria slumpmässiga färggenerator hämtar färger från hela det 24-bitarsintervall som en bildskärm kan visa och placerar varje färg på ett färgprov bredvid dess kod. Välj hur många du vill ha i fältet ”Antal” — från 1 till 50 — markera de format du behöver och tryck på ”Generera”. Sidan öppnas med en enda färg i HEX, så det första resultatet är bara ett klick bort. Kryssrutan ”HEX-kod” är markerad från start, ”RGB-kod” och ”HSL-kod” finns bredvid, och vilken kombination som helst av de tre kan aktiveras samtidigt. Kugghjulsknappen bredvid ”Generera” öppnar sektionen ”Avancerade alternativ”, där du kan begränsa färgerna till en viss typ eller ett intervall, utesluta dubbletter och ändra hur HEX skrivs.
Varje färg skapas i din webbläsare via Web Crypto API (crypto.getRandomValues), som tillhandahåller kryptografiskt starka slumpmässiga byte från ditt systems egen slumpkälla, snarare än via en pseudoslumpfunktion som Math.random(). En färg på skärmen består av tre kanaler — röd, grön och blå — vardera ett heltal från 0 till 255, och en slumpmässig byte kan anta exakt 256 värden. Varje kanal är alltså helt enkelt en byte, utan något däremellan: ingen rest beräknas och ingen nyans gynnas av något konverteringssteg. Det gör alla 16 777 216 färger som sidan kan producera exakt lika sannolika, varje gång du trycker på ”Generera”. Ett snävare intervall i sektionen ”Avancerade alternativ” behåller den regeln inom intervallet: färger slumpas fortfarande från hela rymden och alla som hamnar utanför sorteras bort, så att varje färg som intervallet tillåter har samma chans. Ingenting skickas till någon server, ingenting loggas och så snart sidan har laddats fortsätter den att fungera även utan internetanslutning.
De tre formaten beskriver samma färg på tre sätt. Formatet ”HEX-kod” är den sexsiffriga form som används i CSS och de flesta designverktyg, som #0778ff; det skrivs med gemener och ett inledande #, och alternativen ”Versaler” samt ”Utan #” i sektionen ”Avancerade alternativ” ändrar detta för verktyg som kräver ett annat format. Formatet ”RGB-kod” anger de tre kanalerna i klartext, som i rgb(7, 120, 255), vilket passar programkod som bearbetar varje kanal för sig. Formatet ”HSL-kod” beskriver färgen utifrån nyans, mättnad och ljushet, som i hsl(213, 100%, 51%), vilket är den enklaste formen att justera manuellt i efterhand. Alla tre kan klistras rakt in i en stilmall. De är dock inte lika precisa. HEX och RGB är exakta; HSL är avrundat. Sidan skriver nyans, mättnad och ljushet som heltal, och för ungefär 89% av färgerna konverteras det avrundade värdet inte tillbaka till exakt samma färg: #646503 visas som hsl(61, 94%, 20%), vilket konverteras tillbaka till #616303. Skillnaden är aldrig större än 5 steg i en kanal och oftast 1 eller 2 — osynlig på skärmen, men märkbar om du sparar HSL-värdet och förväntar dig den ursprungliga HEX-koden tillbaka. Behåll HEX eller RGB som det värde du sparar.
En enskild färg visas som en ensam färgbricka i mitten av resultatrutan; flera färger visas som en numrerad lista, en färg per rad, med de valda formaten sida vid sida och ett litet kontrastmärke i slutet. En lista med fler än tre färger rullas inuti rutan, och pilen i dess hörn expanderar den till full höjd; sidan kommer ihåg vilket läge du lämnade den i. Klicka på valfri kod för att kopiera enbart den koden. Kopieringsknappen i slutet av en rad kopierar samtliga koder för den färgen på en enda rad, åtskilda med mellanslag. Klickar du på själva färgprovet öppnas din webbläsares egen färgväljare: välj en annan färg där, så skrivs varje kod på den raden om så att den matchar, i alla aktiverade format, tillsammans med dess märke. Knappen ”Kopiera alla” kopierar hela serien, en färg per rad, och ”Spara till fil” sparar samma text i en vanlig .txt-fil; båda återspeglar eventuella färger du ändrat i färgväljaren. Avsnittet ”Historik” sparar dina 10 senaste serier i denna webbläsare, precis som de genererades, och knappen ”Rensa” tömmer resultatet. Dina inställningar, inklusive de i sektionen ”Avancerade alternativ”, sparas till nästa besök.
Lika sannolika färger upplevs inte som jämnt fördelade, och att veta vad man kan förvänta sig gör att du slipper trycka på ”Generera” av fel anledning. Mätt över hela intervallet är ungefär 35% av färgerna klara och mättade, med en HSL-mättnad på minst 70% och en ljushet mellan 35% och 65%. Nästan gråa toner, med en mättnad under 20%, utgör bara ungefär 4%, och mycket mörka färger (ljushet under 20%) samt mycket ljusa (över 80%) utgör ungefär 3% vardera. En serie om tio färger med alternativet ”Alla färger” innehåller därför oftast flera starka kulörer och sällan en pastell eller antracitgrå ton. När du behöver en viss typ väljer du den under ”Färgtyp”: alternativet ”Klara” behåller just den färgstarka gruppen, medan ”Pastell”, ”Mörka”, ”Dämpade” och ”Gråskala” gör detsamma för sina respektive områden. Alternativet ”Anpassade” låter dig ange egna intervall för ”Nyans”, ”Mättnad” och ”Ljushet”, och ett nyansintervall kan passera 0, så att 330 till 30 ger röda toner. Intervallet kontrolleras mot den HSL-kod som sidan visar, så att ingen kod hamnar utanför, och om det rymmer för få färger för värdet i fältet ”Antal” ber sidan dig att bredda intervallet i stället för att upprepa färger. Dubbletter är annars möjliga men sällsynta: markera ”Inga dubbletter” för att utesluta dem; utan detta val är risken att två av 50 färger från hela färgrymden blir identiska ungefär 1 på 13 700.
En slumpmässig färg efterfrågas ofta som bakgrund, vilket väcker den fråga som ett färgprov inte kan besvara för blotta ögat: kommer text ovanpå den att vara läsbar? Riktlinjerna för webbtillgänglighet, WCAG, kräver ett kontrastförhållande på minst 4,5:1 för normal text. Mätt över samtliga färger som denna sida kan producera uppnår svart text detta på ungefär 65% av dem och vit text på ungefär 36%, och det finns ingen färg där båda misslyckas: det bästa av de två alternativen når alltid minst 4,58:1. För varje slumpmässig bakgrund kommer alltså antingen svart eller vit text att vara läsbar, och sidan visar vilken. Bredvid varje färg visas ett litet märke med bokstäverna Aa i det bättre av de två alternativen, följt av dess kontrastförhållande. Förhållandet avrundas nedåt så att det aldrig överdriver kontrasten, och det uppdateras när du ändrar färgen i färgväljaren. Märket jämför uteslutande svart och vit text; för en varumärkesfärg eller annan textfärg bör du kontrollera kombinationen i en kontrastkontroll.
Slumpmässigt är inte samma sak som harmoniskt. Varje färg i en serie dras helt för sig själv, utan kännedom om de övriga, så generatorn sätter aldrig ihop en palett i en designers bemärkelse — inga komplementfärgspar, inga analoga serier och ingen gemensam ljushet. Ett snävare intervall förändrar karaktären på en serie, men ändrar inte den regeln: pasteller eller en rad blåa nyanser tas fortfarande fram en efter en, utan något inbördes samband. Det är också själva poängen: du får färger som du inte själv skulle ha valt, vilket hjälper dig att bryta vanor och kreativa låsningar. För att förvandla ett slumpmässigt fynd till något användbart behåller du den färg du gillar och härleder de övriga ur den, i stället för att trycka på ”Generera” tills en hel uppsättning råkar passa ihop. Behåll dess nyans och justera ljusheten för ljusare och mörkare varianter, eller vrid nyansen med 180 grader för att få motsatt färg. Formatet ”HSL-kod” gör sådana justeringar till ren aritmetik i stället för gissningar.
Varför välja denna slumpmässiga färggenerator?
- Varje färg skapas i din webbläsare med Web Crypto API, ingenting laddas upp
- Alla 16 777 216 färger är exakt lika sannolika, med en slumpmässig byte per kanal
- HEX-, RGB- och HSL-koder för samma färg, i valfri kombination
- Upp till 50 färger samtidigt, var och en på ett färgprov med ett kontrastmärke
- Klara, Pastell, Mörka, Dämpade och Gråskala, eller egna intervall för nyans, mättnad och ljushet
- Inga dubbletter när du behöver det, samt HEX med versaler eller utan #
- Klicka på en kod för att kopiera den, eller ändra valfri färg i webbläsarens färgväljare
- Kopiera alla, Spara till fil och en Historik över dina 10 senaste serier i webbläsaren
- Helt gratis och utan gränser: ingen registrering, ingen kvot och ingenting lagras på våra servrar
Slumpmässiga färger är användbara överallt där en färg behövs innan någon hunnit fatta ett beslut. Designers använder dem för att komma förbi kreativa låsningar och hitta en utgångspunkt som deras invanda palett aldrig skulle ha lett till. Utvecklare fyller mockups, platshållare och avatarer, ger varje serie i ett diagram en egen färg medan det slutgiltiga temat fortfarande är öppet, och testar hur ett gränssnitt hanterar bakgrunder som det inte ursprungligen formgavs för — en serie om 50 färger från ”Alla färger” innehåller nästan alltid minst en mycket mörk eller mycket ljus färg, och ”Mörka” eller ”Pastell” riktar testet mot den ena änden. Generativa konstnärer och spelprototypare matar in värdena direkt i programkod, där RGB-formatet passar rakt in i de flesta grafikbibliotek. Lärare ställer de tre formaten sida vid sida för att visa hur en och samma färg kan uttryckas som en kod, som tre kanaler eller som en punkt på en färgcirkel, samt varför HSL-versionen är avrundad. Och alla som märker, taggar eller färgkodar listor får distinkta färger utan att behöva grubbla över vilken de ska välja.
Det finns några ärliga begränsningar som är bra att känna till. Detta är en generator, inte ett palettverktyg: den skapar inga färgharmonier och låser inte en vald färg medan de andra ändras, och ett snävare intervall ger färger av en viss typ, inte färger utvalda för att passa ihop. Kontrastmärket jämför uteslutande svart och vit text. Sidan arbetar i de sRGB-färger som en bildskärm visar — HEX, RGB och HSL — utan genomskinlighet och utan CMYK, Pantone, OKLCH eller namngivna CSS-färger; för tryck bör du matcha färgen i tryckförberedelsen i stället för att förlita dig på en skärmkod. Samma kod kan dessutom se något annorlunda ut från en skärm till en annan, eftersom skärmar inte är kalibrerade på samma sätt. HSL-värden är avrundade, så som beskrivits ovan, och såvida inte ”Inga dubbletter” har markerats kontrolleras inte en serie för upprepningar. Det sidan garanterar är mer specifikt och exakt: var och en av dess 16 777 216 färger, eller varje färg inom det intervall du angett, har exakt samma chans vid varje tryck, hämtat från webbläsarens kryptografiska källa och skickas aldrig någonstans.