Naar hoofdinhoud

Willekeurige kleur generator (HEX / RGB)

Genereer met één klik een willekeurige kleur en bekijk direct de HEX-, RGB- en HSL-code. Maak ook een palet van vijf kleuren. Gratis, snel en lokaal in je browser.

Hoe vind je deze calculator?

Op zoek naar inspiratie voor een kleur? Deze willekeurige kleur generator maakt met één klik een nieuwe kleur en toont meteen alle codes die je nodig hebt: de HEX-code (zoals #3B1FA8) voor CSS en design, de RGB-waarden (zoals rgb(59, 31, 168)) en de HSL-notatie (zoals hsl(252, 69%, 39%)). Je kopieert elke code los met één klik. Wil je een combinatie? Genereer een palet van vijf kleuren ineens. Handig bij het ontwerpen van een website, het kiezen van een accentkleur of gewoon om te experimenteren. De kleuren worden willekeurig gekozen met de cryptografisch veilige crypto.getRandomValues — alles draait in je browser en er wordt niets opgeslagen.

Hoe werkt de kleur generator?

Bij elke klik op 'Genereer kleur' kiest de tool drie willekeurige waarden tussen 0 en 255 voor rood, groen en blauw. Samen vormen die één RGB-kleur, die vervolgens wordt omgerekend naar de HEX- en HSL-notatie. Zo krijg je dezelfde kleur in drie veelgebruikte formaten.

De willekeur komt van crypto.getRandomValues, de veilige toevalsbron van je browser. De kleur verschijnt als een grote staal (swatch) met de codes eronder, en de tekst op de staal wordt automatisch zwart of wit gekozen voor goede leesbaarheid.

HEX, RGB en HSL: wat is het verschil?

Een kleur kun je op meerdere manieren noteren. Alle drie de formaten beschrijven dezelfde kleur, maar in een andere vorm:

FormaatVoorbeeldWaar handig
HEX#3B1FA8CSS, design-tools, korte notatie
RGBrgb(59, 31, 168)schermen, transparantie (rgba)
HSLhsl(252, 69%, 39%)intuïtief tinten en helderheid aanpassen

Wat betekenen de HSL-waarden?

HSL staat voor Hue (tint), Saturation (verzadiging) en Lightness (helderheid). De tint is een graad op de kleurencirkel (0–360°), de verzadiging bepaalt hoe fel of grijzig de kleur is (0–100%) en de helderheid loopt van zwart (0%) via de pure kleur (50%) naar wit (100%).

HSL is fijn om mee te werken omdat je een kleur intuïtief kunt bijstellen: wil je dezelfde tint maar lichter, dan verhoog je alleen de Lightness. Dat is lastiger met losse RGB-waarden.

Welke tekstkleur is leesbaar?

De tool berekent automatisch of zwarte of witte tekst beter leesbaar is op de gegenereerde kleur. Dat gebeurt via de relatieve luminantie volgens de WCAG-richtlijn voor toegankelijkheid: lichte achtergronden krijgen zwarte tekst, donkere achtergronden witte tekst.

Zo zie je in één oogopslag of een kleur geschikt is als achtergrond voor leesbare tekst — handig bij het ontwerpen van knoppen, badges of kaarten.

Een palet van vijf kleuren

Met de knop 'Genereer palet' krijg je vijf willekeurige kleuren naast elkaar. Klik op een kleur om de HEX-code te kopiëren. Een willekeurig palet is een snelle manier om los te komen van je gebruikelijke keuzes en een nieuwe combinatie te ontdekken.

Bevalt een palet half? Genereer gewoon opnieuw tot je een set vindt die je aanspreekt, en bewaar de codes die je wilt houden.

Formule

HEX = '#' + R, G en B elk als 2-cijferige hexadecimale waarde (00–FF)
voorbeeld: rgb(59, 31, 168) → #3B1FA8

Voorbeelden

  • Diep violet
    #3B1FA8 · rgb(59, 31, 168) · hsl(252, 69%, 39%)
  • Fel oranje
    #FF6B00 · rgb(255, 107, 0) · hsl(25, 100%, 50%)
  • Mintgroen
    #10B981 · rgb(16, 185, 129) · hsl(160, 84%, 39%)
  • Palet van 5
    vijf willekeurige kleuren met kopieerbare HEX-codes

Veelgestelde vragen

Hoe genereert de tool een willekeurige kleur?
De tool kiest met crypto.getRandomValues drie willekeurige waarden (0–255) voor rood, groen en blauw. Die vormen samen één RGB-kleur, die wordt omgerekend naar HEX en HSL.
Wat is een HEX-code?
Een HEX-code is een korte notatie voor een kleur, zoals #3B1FA8. De zes tekens staan voor de rood-, groen- en blauwwaarden in hexadecimale (16-tallige) vorm. Het is de meest gebruikte notatie in CSS en design-tools.
Kan ik de RGB- en HSL-code ook kopiëren?
Ja. Onder de kleur staan alle drie de formaten met een eigen kopieerknop. Zo plak je de notatie die je nodig hebt direct in je code of design-tool.
Hoe bepaalt de tool of de tekst zwart of wit wordt?
Via de relatieve luminantie volgens de WCAG-toegankelijkheidsrichtlijn. Lichte kleuren krijgen zwarte tekst en donkere kleuren witte tekst, zodat de code op de staal altijd goed leesbaar is.
Wat is het verschil tussen RGB en HSL?
RGB beschrijft een kleur via de hoeveelheid rood, groen en blauw. HSL beschrijft dezelfde kleur via tint, verzadiging en helderheid, wat intuïtiever is om tinten lichter of donkerder te maken.
Wordt er iets opgeslagen of verstuurd?
Nee. De kleuren worden 100% lokaal in je browser gegenereerd met crypto.getRandomValues. Er is geen netwerkverkeer en er wordt niets opgeslagen of gelogd.

Gerelateerde tools

Uitgelichte artikelen

Computer9 min leestijd

QR-code maken: gratis, zonder account (2026)

Een QR-code is binnen seconden gemaakt: je plakt een link of stukje tekst en je hebt een zwart-wit vierkant dat elke smartphone kan scannen. Maar welk foutcorrectieniveau kies je, hoe groot moet je hem printen en hoe voorkom je dat oplichters er een neppe QR-sticker overheen plakken? In deze gids leer je gratis en zonder account een betrouwbare QR-code te maken — van een simpele URL tot een wifi-code die gasten automatisch verbindt.

20 juni 2026Lezen
Computer9 min leestijd

Veilig wachtwoord maken: hoe sterk is sterk genoeg? (2026)

Een sterk wachtwoord is je eerste verdediging tegen inbraak op je accounts. Maar wat maakt een wachtwoord nu écht sterk? Niet de hoofdletters en uitroeptekens die websites je opdringen, maar de lengte en willekeur. In deze gids leer je wat wachtwoordsterkte betekent in bits entropie, waarom een lange wachtwoordzin slimmer is dan 'P@ssw0rd!', en hoe je in vier stappen een wachtwoord maakt dat tientallen jaren standhoudt — onderbouwd met het advies van het NCSC en NIST.

20 juni 2026Lezen
Computer8 min leestijd

Tekst online bewerken: tellen, sorteren en opschonen (gratis)

Soms wil je gewoon snel iets met een stukje tekst: het aantal woorden tellen voor een tweet, een lijst alfabetisch sorteren, dubbele e-mailadressen eruit halen of overbodige spaties opruimen. Daar heb je geen Word of dure software voor nodig. In deze gids zie je welke gratis tekst-tools er zijn, wanneer je ze gebruikt en hoe je in drie stappen een rommelige lijst opschoont — allemaal veilig in je eigen browser, zonder dat er iets wordt opgeslagen of verzonden.

20 juni 2026Lezen

Laatst bijgewerkt: 20 juni 2026