Kleurenpalet generator

Zo maak je een kleurenpalet

1. Kies een Basiskleur met het kleurstaal, of typ een code in Code basiskleur (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), een CSS-naam…).
2. Kies een Harmonie: Complementair, Analoog, Triadisch, Gesplitst complementair, Tetradisch (rechthoek), Vierkant of Monochroom.
3. Kies het Kleurenwiel: HSL (klassiek) of OKLCH (perceptueel). Het palet wordt bijgewerkt zodra je een optie wijzigt; Palet genereren ververst het ook.
4. Kopieer één kleur met de knop Kopiëren onder het kleurstaal, of kies een formaat bij Exporteren als (HEX-lijst, CSS-variabelen, SCSS-variabelen, JSON-array of Tailwind-kleuren) en gebruik Kopiëren of Downloaden voor het hele palet.

Elk kleurstaal toont zijn HEX-code in zwart of wit, afhankelijk van wat het beste contrast geeft, en zijn positie ten opzichte van de basiskleur (bijvoorbeeld +120°).

De kleurharmonieën

Kleurharmonieën zijn vaste hoeken op het kleurenwiel. Vanuit je basistint draait de tool de tint en behoudt hij de verzadiging en lichtheid van de basiskleur.

• Complementair (0°, 180°): de tegenoverliggende kleur. Maximaal contrast, ideaal voor een call-to-actionknop naast een hoofdkleur van je merk.
• Analoog (−60°, −30°, 0°, +30°, +60°): buren op het wiel. Rustige, natuurlijke combinaties die goed werken voor achtergronden en illustraties.
• Triadisch (0°, 120°, 240°): drie gelijk verdeelde tinten. Levendig en evenwichtig; meestal overheerst één kleur en zijn de andere twee accenten.
• Gesplitst complementair (0°, 150°, 210°): de twee buren van de complementaire kleur. Sterk contrast met minder spanning dan een zuiver complementair paar.
• Tetradisch (rechthoek) (0°, 60°, 180°, 240°): twee complementaire paren. Rijke paletten die één dominante kleur nodig hebben om samenhangend te blijven.
• Vierkant (0°, 90°, 180°, 270°): vier gelijk verdeelde tinten.
• Monochroom: één tint in vijf lichtheidsstappen, van donker naar licht. Ideaal voor interfacestatussen, grafieken en subtiele ontwerpen.

HSL- of OKLCH-wiel?

Het wiel HSL (klassiek) is het traditionele wiel dat de meeste ontwerptools en tutorials gebruiken. Het nadeel is dat gelijke hoeken er niet even helder uitzien: geel op 60° lijkt veel lichter dan blauw op 240° bij dezelfde HSL-lichtheid.

Het wiel OKLCH (perceptueel) draait de tint in het Oklab-kleurmodel, dat zo is ontworpen dat lichtheid er consistent uitziet. Paletten op basis daarvan hebben kleuren met een vergelijkbaar visueel gewicht, wat helpt bij toegankelijk contrast. Sommige gedraaide kleuren kunnen buiten het bereik van een scherm vallen; de tool verlaagt dan hun chroma een beetje om ze weergeefbaar te houden.

Het geëxporteerde palet gebruiken

CSS-variabelen levert een :root-blok op met --color-1, --color-2… dat je in een stylesheet kunt plakken. SCSS-variabelen geeft regels als $color-1: …;, JSON-array een lijst HEX-strings voor scripts, en Tailwind-kleuren een colors-object met de sleutels 100, 200, 300… om in je Tailwind-configuratie te plakken.

Controleer vóór je live gaat het tekstcontrast: een harmonie garandeert prettige tinten, geen leesbare tekst. Gebruik donkere of lichte neutrale kleuren voor lopende tekst en bewaar de verzadigde paletkleuren voor accenten, knoppen en afbeeldingen.