Heb je een kleur nodig voor een mockup, een diagram of een leeg canvas, en kies je liever niet uit gewoonte? Deze gratis generator voor willekeurige kleuren haalt kleuren uit het volledige 24-bits bereik dat een scherm kan tonen en zet elke kleur op een staal naast de code. Kies in het veld Aantal hoeveel je er wilt — van 1 tot 50 — vink de formaten aan die je nodig hebt en klik op Genereren. De pagina opent met één kleur in HEX, dus het eerste resultaat is één klik verwijderd. Het selectievakje HEX-code staat vanaf het begin aangevinkt, de selectievakjes RGB-code en HSL-code staan ernaast, en je kunt elke combinatie van de drie tegelijk inschakelen. De tandwielknop naast de knop Genereren opent de sectie Geavanceerde opties, waar je de kleuren kunt beperken tot één soort of bereik, herhalingen kunt uitsluiten en kunt wijzigen hoe HEX wordt geschreven.
Elke kleur wordt in je browser gemaakt via de Web Crypto API (crypto.getRandomValues), die cryptografisch sterke willekeurige bytes levert uit de eigen bron van willekeur van je systeem, in plaats van via een pseudo-willekeurige functie zoals Math.random(). Een kleur op het scherm bestaat uit drie kanalen — rood, groen en blauw —, elk een geheel getal van 0 tot 255, en één willekeurige byte kan precies 256 waarden aannemen. Elk kanaal is dus gewoon één byte, zonder tussenstappen: er wordt geen rest genomen, en geen enkele omzettingsstap bevoordeelt een tint. Dat maakt alle 16.777.216 kleuren die de pagina kan produceren exact even waarschijnlijk, elke keer dat je op Genereren klikt. Een smaller bereik in de sectie Geavanceerde opties houdt die belofte binnen het bereik: de kleuren worden nog steeds uit de hele ruimte getrokken, en kleuren die erbuiten vallen worden overgeslagen, zodat elke kleur die het bereik toestaat dezelfde kans heeft. Er wordt niets naar een server verzonden, niets vastgelegd, en zodra de pagina is geladen, blijft ze ook zonder verbinding werken.
De drie formaten beschrijven dezelfde kleur op drie manieren. Het formaat HEX-code is de zescijferige vorm die in CSS en de meeste ontwerptools wordt gebruikt, zoals #0778ff; het wordt in kleine letters geschreven met een # ervoor, en de opties Hoofdletters en Zonder # in de sectie Geavanceerde opties veranderen dat voor tools die het anders verwachten. Het formaat RGB-code schrijft de drie kanalen voluit, zoals in rgb(7, 120, 255), wat past bij code die elk kanaal apart verwerkt. Het formaat HSL-code beschrijft de kleur via tint, verzadiging en helderheid, zoals in hsl(213, 100%, 51%), de vorm die achteraf het makkelijkst met de hand aan te passen is. Alle drie kun je direct in een stylesheet plakken. Ze zijn echter niet even nauwkeurig. HEX en RGB zijn exact; HSL is afgerond. De pagina schrijft tint, verzadiging en helderheid als hele getallen, en bij ongeveer 89% van de kleuren geeft die afgeronde waarde bij terugrekenen niet exact dezelfde kleur: #646503 wordt getoond als hsl(61, 94%, 20%), wat teruggerekend #616303 oplevert. Het verschil is nooit meer dan 5 stappen in een kanaal en meestal 1 of 2 — onzichtbaar op het scherm, maar reëel als je de HSL-waarde opslaat en verwacht de oorspronkelijke HEX-waarde terug te krijgen. Sla dus liever de HEX- of RGB-waarde op.
Eén kleur verschijnt als een enkel blokje in het midden van het resultaat; meerdere kleuren verschijnen als een genummerde lijst, één kleur per rij, met de gekozen formaten naast elkaar en een kleine contrastbadge aan het einde. Een lijst van meer dan drie kleuren scrolt binnen het vak, en de pijl in de hoek ervan klapt de lijst open tot volle hoogte; de pagina onthoudt hoe je die de vorige keer hebt achtergelaten. Klik op een code om alleen die code te kopiëren. De kopieerknop aan het einde van een rij kopieert alle codes van die kleur op één regel, gescheiden door spaties. Klik op het staal zelf en de kleurkiezer van je browser gaat open: kies daar een andere kleur, en alle codes in die rij worden dienovereenkomstig herschreven, in elk formaat dat je hebt ingeschakeld, samen met de bijbehorende badge. De knop Alles kopiëren kopieert de hele batch, één kleur per regel, en de knop Opslaan als bestand schrijft dezelfde tekst naar een gewoon .txt-bestand; beide houden rekening met elke kleur die je in de kleurkiezer hebt gewijzigd. Het overzicht Geschiedenis bewaart je laatste 10 batches in deze browser, precies zoals ze zijn gegenereerd, en de knop Wissen maakt het resultaat leeg. Je instellingen, inclusief die in de sectie Geavanceerde opties, worden onthouden voor het volgende bezoek.
Even waarschijnlijke kleuren lijken niet gelijkmatig verspreid, en weten wat je kunt verwachten voorkomt dat je Genereren om de verkeerde reden aanklikt. Gemeten over het hele bereik is ongeveer 35% van de kleuren fel en verzadigd, met een HSL-verzadiging van minstens 70% en een helderheid tussen 35% en 65%. Bijna grijze kleuren, met een verzadiging onder 20%, vormen slechts ongeveer 4%, en zeer donkere kleuren (helderheid onder 20%) en zeer lichte (boven 80%) vormen elk ongeveer 3%. Een batch van tien met kleurtype Alle kleuren zal dus meestal meerdere sterke kleuren bevatten en zelden een pastel- of antracietkleur. Wanneer je een bepaald soort nodig hebt, kies je in Kleurtype de optie Levendig om je precies tot die felle groep te beperken, en de opties Pastel, Donker, Gedempt en Grijstinten doen hetzelfde voor de hunne. Met de optie Aangepast stel je je eigen bereiken in voor Tint, Verzadiging en Helderheid, en een tintbereik kan over 0 heen lopen, dus van 330 tot 30 geeft rode tinten. Het bereik wordt getoetst aan de HSL-code die de pagina toont, zodat geen enkele code erbuiten valt, en als het te weinig kleuren bevat voor de waarde in Aantal, vraagt de pagina je om het te verbreden in plaats van kleuren te herhalen. Herhalingen zijn verder mogelijk maar zeldzaam: vink Zonder dubbelen aan om ze uit te sluiten, en zonder die optie is de kans dat twee van de 50 kleuren uit het volledige bereik identiek zijn, ongeveer 1 op 13.700.
Een willekeurige kleur wordt vaak als achtergrond gebruikt, wat de ene vraag oproept die een staal niet met het blote oog kan beantwoorden: zal tekst erop leesbaar zijn? De richtlijn voor webtoegankelijkheid, WCAG, vereist een contrastverhouding van minstens 4,5:1 voor normale tekst. Gemeten over alle kleuren die deze pagina kan produceren, haalt zwarte tekst dat bij ongeveer 65% ervan en witte tekst bij ongeveer 36%, en er is geen kleur waarbij beide falen: de beste van de twee haalt altijd minstens 4,58:1. Voor elke willekeurige achtergrond voldoet dus zwarte of witte tekst, en de pagina laat je zien welke. Bij elke kleur staat een kleine badge die Aa toont in de best leesbare van de twee tekstkleuren, gevolgd door de contrastverhouding. De verhouding wordt naar beneden afgerond, dus die valt nooit te gunstig uit, en ze wordt bijgewerkt zodra je de kleur in de kleurkiezer wijzigt. De badge vergelijkt alleen zwarte en witte tekst; gebruik voor een merkkleur of elke andere tekstkleur een contrastchecker.
Willekeurig is niet hetzelfde als harmonieus. Elke kleur in een batch wordt onafhankelijk getrokken, zonder kennis van de andere, dus de generator bouwt nooit een palet in de zin van een ontwerper — geen complementaire paren, geen analoge reeksen, geen gedeelde helderheid. Een smaller bereik verandert het karakter van een batch, niet die regel: pastelkleuren of een reeks blauwtinten komen nog steeds één voor één binnen, zonder dat iets ze verbindt. Daar draait het juist om: het geeft je de kleur die je zelf niet zou hebben gekozen, en dat is wat een gewoonte of creatieve blokkade doorbreekt. Om een willekeurige vondst bruikbaar te maken, bewaar je de kleur die je mooi vindt en bouw je daarop verder, in plaats van op Genereren te blijven klikken tot een heel stel toevallig samenklopt. Houd de tint vast en verstel de helderheid voor lichtere en donkerdere varianten, of draai de tint 180 graden voor een contrasterende kleur. Het formaat HSL-code maakt van die stappen rekenwerk in plaats van giswerk.
Waarom voor deze generator voor willekeurige kleuren kiezen?
- Elke kleur gemaakt in je browser met de Web Crypto API, niets geüpload
- Alle 16.777.216 kleuren exact even waarschijnlijk, één willekeurige byte per kanaal
- HEX-, RGB- en HSL-codes voor dezelfde kleur, in elke combinatie
- Tot 50 kleuren tegelijk, elk op een staal met een tekstcontrastbadge
- Levendig, Pastel, Donker, Gedempt en Grijstinten, of je eigen bereik voor tint, verzadiging en helderheid
- Zonder dubbelen wanneer je dat nodig hebt, en HEX in hoofdletters of zonder #
- Klik op een code om die te kopiëren, of wijzig elke kleur in de kleurkiezer van je browser
- Alles kopiëren, Opslaan als bestand en een Geschiedenis van je laatste 10 batches, bewaard in je browser
- Gratis en onbeperkt: geen registratie, geen limiet, niets opgeslagen op onze servers
Willekeurige kleuren komen van pas overal waar een kleur nodig is voordat iemand er een heeft gekozen. Ontwerpers gebruiken ze om een creatieve blokkade te doorbreken en een startpunt te vinden dat hun gebruikelijke palet nooit zou hebben bereikt. Ontwikkelaars vullen mock-ups, tijdelijke elementen en avatars, geven elke reeks in een diagram een eigen kleur terwijl het echte thema nog niet vaststaat, en testen hoe een interface omgaat met achtergronden waarvoor ze niet is ontworpen — een batch van 50 met kleurtype Alle kleuren bevat bijna altijd minstens één zeer donkere of zeer lichte kleur, en de optie Donker of Pastel richt de test op één van die uitersten. Generatieve kunstenaars en mensen die spellen prototypen, voeren de waarden rechtstreeks in code in, waar de RGB-vorm in de meeste grafische bibliotheken past. Leraren zetten de drie formaten naast elkaar om te laten zien dat één kleur geschreven kan worden als een code, als drie kanalen of als een positie op een kleurencirkel, en waarom de HSL-versie is afgerond. En iedereen die een lijst labelt, tagt of van kleurcodering voorziet, krijgt onderscheidende kleuren zonder zich af te vragen welke.
Een paar eerlijke beperkingen zijn goed om te weten. Dit is een generator, geen palettool: hij bouwt geen kleurharmonieën en houdt geen enkele kleur vast terwijl de andere veranderen, en een smaller bereik geeft kleuren van één soort, geen kleuren die gekozen zijn om bij elkaar te passen. De contrastbadge vergelijkt alleen zwarte en witte tekst. De pagina werkt met de sRGB-kleuren die een scherm toont — HEX, RGB en HSL — zonder transparantie en zonder CMYK, Pantone, OKLCH of benoemde CSS-kleuren; verifieer voor drukwerk de kleur in je drukproces in plaats van te vertrouwen op een schermcode. Dezelfde code kan er ook op het ene scherm iets anders uitzien dan op het andere, omdat schermen niet op dezelfde manier gekalibreerd zijn. HSL-waarden zijn afgerond, zoals hierboven beschreven, en tenzij de optie Zonder dubbelen is aangevinkt, wordt een batch niet op herhalingen gecontroleerd. Wat de pagina wél garandeert, is beperkter en exact: elk van de 16.777.216 kleuren, of elke kleur binnen het bereik dat je hebt ingesteld, heeft bij elke klik dezelfde kans, getrokken uit de cryptografische bron van je browser en nooit ergens naartoe verzonden.