Utilia

Willekeurige kleur generator

Genereer willekeurige kleuren of harmonieuze paletten, zet je favorieten vast, kopieer HEX-, RGB- of HSL-codes en exporteer als CSS, SCSS, JSON of Tailwind.

Tint (°)
Verzadiging (%)
Lichtheid (%)

Zet de kleuren die je mooi vindt vast en genereer opnieuw om alleen de andere te vervangen.

Kleuren

    Zo gebruik je de willekeurige kleur generator

    1. Stel het Aantal kleuren in (1 tot 20).
    2. Kies een Modus: - Willekeurig binnen een bereik trekt elke kleur afzonderlijk. Beperk de bereiken voor Tint (°), Verzadiging (%) en Lichtheid (%) met de velden “van” en “tot” om binnen een kleurenfamilie te blijven, bijvoorbeeld alleen pasteltinten of alleen blauw. - Harmonieus palet (OKLCH) trekt één willekeurige basiskleur en bouwt de andere kleuren op met een kleurharmonie. Kies een Harmonie (Complementair, Analoog, Triadisch, Gesplitst complementair, Tetradisch, Vierkant, Monochroom) of laat Verras me staan om telkens een andere harmonie te krijgen.
    3. Klik op Kleuren genereren. Elke kaart toont de kleur met de HEX-, RGB- en HSL-code; de kleine knoppen HEX, RGB en HSL kopiëren de bijbehorende code.
    4. Klik op Vastzetten bij de kleuren die je wilt houden en daarna opnieuw op Kleuren genereren: alleen de losse kleuren veranderen. Klik nog eens op de knop om een kleur weer los te maken.
    5. Kies een formaat bij Exporteren als (HEX-lijst, CSS-variabelen, SCSS-variabelen, JSON-array of Tailwind-kleuren) en gebruik Kopiëren of Downloaden om de hele set mee te nemen.

    Hoe de kleuren worden gekozen

    In de modus Willekeurig binnen een bereik worden tint, verzadiging en lichtheid elk gelijkmatig getrokken binnen de bereiken die je instelt, en daarna van HSL naar RGB omgezet met dezelfde formule die browsers gebruiken voor hsl(). Het tintbereik kan over rood heen lopen: van 330 tot 30 geeft roze, rood en oranje, via 0°. Een paar handige instellingen:

    • Pastel: verzadiging 40–80%, lichtheid 75–90%.
    • Donkere, gedempte tinten: verzadiging 10–40%, lichtheid 15–35%.
    • Alleen blauw: tint 190–250.
    • Warme kleuren: tint 330 tot 60.

    In de modus Harmonieus palet (OKLCH) werkt de tool in OKLCH, een perceptueel kleurmodel waarin gelijke stappen in lichtheid er voor het oog ook gelijk uitzien. De eerste vastgezette kleur wordt de basis; is er niets vastgezet, dan wordt een willekeurige, middellichte en vrij verzadigde basiskleur getrokken. De andere kleuren krijgen de tinthoeken van de harmonie (bijvoorbeeld +120° en +240° bij triadisch), met een kleine willekeurige variatie in tint, lichtheid en chroma, zodat elke klik een nieuw resultaat geeft. Vraag je meer kleuren dan de harmonie tinten heeft, dan hergebruiken de extra kleuren de hoeken in lichtere en donkerdere varianten. Monochroom houdt één tint aan en spreidt de lichtheid van donker naar licht.

    Kleuren die buiten het bereik van een sRGB-scherm vallen, worden teruggebracht door hun chroma te verlagen, zodat elke HEX-code die je kopieert een echte, weer te geven kleur is.

    Waar willekeurige kleuren van pas komen

    Willekeurige kleuren zijn handig voor tijdelijke avatars en grafieken, testdata, generatieve kunst, inspiratie als je vastzit op een leeg canvas, of om een kleur te kiezen voor een project, een team in een spel of een label. Met vastzetten gebruik je de tool als een fruitautomaat: houd wat werkt en draai de rest opnieuw. Het toeval komt uit de cryptografische generator van je browser, en er wordt niets verzonden.

    Veelgestelde vragen

    Hoe krijg ik een willekeurige HEX-kleurcode?

    Zet Aantal kleuren op 1, klik op Kleuren genereren en klik daarna op de knop HEX om de code te kopiëren, bijvoorbeeld #3A7BD5.

    Kan ik sommige kleuren houden en de andere opnieuw genereren?

    Ja. Klik op Vastzetten bij elke kleur die je wilt houden en daarna op Kleuren genereren. Vastgezette kleuren blijven staan; in de harmoniemodus wordt de eerste vastgezette kleur ook de basis van het nieuwe palet.

    Waarom de OKLCH-harmoniemodus in plaats van puur willekeurige kleuren?

    Puur willekeurige kleuren vloeken vaak of hebben een heel verschillend visueel gewicht. Een palet dat vanuit een harmonie in OKLCH wordt opgebouwd, geeft kleuren die bij elkaar horen en een evenwichtige helderheid hebben, waardoor ze makkelijker in een ontwerp te gebruiken zijn.

    Wat bevatten de exportformaten?

    HEX-lijst geeft één code per regel, CSS- en SCSS-variabelen geven declaraties als --color-1 of $color-1, JSON-array geeft een lijst met codes, en Tailwind-kleuren geeft een colors-object met de sleutels 100, 200… voor je configuratie.

    Zijn de kleuren echt willekeurig?

    Ze komen uit crypto.getRandomValues, de cryptografisch veilige generator van de browser, dus er herhaalt zich geen patroon tussen klikken.