Kleurenpaletgenerator
Begin met één kleur – de primaire kleur van uw merk, een foto waar u een accent uit hebt gehaald, of een willekeurige suggestie – en de generator bouwt een kleurenpalet van 4 tot 8 kleuren op met behulp van klassieke harmonieregels: complementair, analoog, triadisch, tetradisch, split-complement, monochromatisch. Exporteer als CSS-variabelen, Tailwind-configuratie, Figma-tokens of gewoon een CSV met hexadecimale codes.
Hoe kleurenpaletten worden gegenereerd
-
1
Voer een basiskleur in of kies een basiskleur
Hex, RGB, HSL, of gebruik de "willekeurige" knop voor een nieuw startpunt.
-
2
Kies een harmonieschema
Complementair (2 kleuren 180° uit elkaar), analoog (3 buren 30°), triadisch (3 op 120°), tetradisch (4 op 90°), gesplitst complement (basis + 2 dichtbij het complement), monochromatisch (dezelfde tint, verschillende lichtheid/verzadiging).
-
3
Palet wordt live weergegeven
Er verschijnen 4-8 stalen met hex, RGB en HSL. Pas de schuifregelaars voor verzadiging en lichtheid aan om te verfijnen.
-
4
Exporteren
CSS-variabelen, Tailwind `extend.colors`-configuratie, Figma JSON-tokens, Sass-variabelen of CSV.
De harmonieschema’s
- Aanvullend: basis + tegenoverliggende op het kleurenwiel (180°). Hoog contrast, levendig. Goed voor call-to-action-knoppen tegen een merkkleur.
- Analoog: 3-5 tinten binnen 30° van elkaar. Kalm, harmonieus, meestal warm of koel gezin. Goed voor achtergronden en illustraties met één familiethema.
- Triadisch: 3 tinten op gelijke afstand van elkaar (120°). Levendig en evenwichtig. Veel voorkomend in kinderproducten en opvallende merken.
- Gesplitst complement: basis + twee tinten die het complement flankeren (150° en 210°). Rijker dan complementair, minder gespannen.
- Tetradisch / vierkant: 4 tinten op 90°. Moeilijker in evenwicht te brengen: kies er één als dominant.
- Monochromatisch: enkele tint, gevarieerde verzadiging en lichtheid. Elegant en samenhangend; mist accent tenzij gecombineerd met een neutraal.
Paletstructuur voor echt werk
Ontwerpsystemen hebben doorgaans het volgende nodig:
- Primair (basismerk)
- Secundair (ondersteunend merk)
- Accent (CTA, hoogtepunten)
- Neutrale schaal (achtergronden, tekst, randen — 5-10 grijstinten)
- Semantisch (succes, waarschuwing, fout, info)
- Oppervlak (paneelachtergronden, overlays)
Een harmoniepalet geeft je primair + secundair + accent. Neutrale kleuren en semantiek komen meestal voort uit afzonderlijke conventies (onverzadigde bijna-grijze tinten; gestandaardiseerde semantische tinten).
Exportformaten
Aangepaste CSS-eigenschappen:
:root {
--brand-primary: #2E86AB;
--brand-secondary: #A23B72;
--brand-accent: #F18F01;
--brand-neutral: #C73E1D;
}
Tailwind-configuratie:
theme: {
extend: {
colors: {
brand: {
primary: '#2E86AB',
secondary: '#A23B72',
accent: '#F18F01',
}
}
}
}
SCSS:
$brand-primary: #2E86AB;
$brand-secondary: #A23B72;
Contrast en toegankelijkheid
Harmonieschema’s garanderen geen toegankelijkheid. Controleer paletcombinaties aan de hand van WCAG-contrastvereisten:
- Hoofdtekst tegen achtergrond: minimaal 4,5:1 (AA).
- Grote tekst: 3:1.
- Niet-tekst (knoppen, pictogrammen, focusringen): 3:1.
Koppel de generator met de contrastcontrole om compatibele combo’s te vinden.
Tips
- Begin met een gedefinieerde basiskleur, niet willekeurig – harmonieën voelen doelgericht aan als de basis betekenis heeft (uw merk, een foto die u mooi vindt, een culturele referentie).
- Test het palet in echt gebruik: op een knop, tegen tekst, in een diagram. Er goed uitzien in stalen garandeert niet dat u in een gebruikersinterface werkt.
- Verminder de verzadiging enigszins voor paletten die bestemd zijn voor grote oppervlakken — volledig verzadigde achtergronden zijn vermoeiend.
- Houd accenten zeldzaam: als 80% van een gebruikersinterface primair en secundair is, gebruik dan accentkleuren in 10% van de touchpoints (CTA’s) voor maximale aantrekkingskracht.
Veelgestelde vragen
Aanvullend voor energierijke merken. Analoog voor kalm, samenhangend gevoel (wellness, luxe, buiten). Triadisch voor speelse, evenwichtige merken. Monochromatisch voor ultraminimale, redactionele esthetiek. Bij twijfel is analoog vergevingsgezind.
Ja. Speld de kleuren vast die u wilt behouden en regenereer de andere rond de harmonie. Handig als uw primaire merkkleur vaststaat en u accenten verkent.
3-5 kernkleuren zijn voor de meeste merken de beste keuze. Voeg tinten/tinten toe voor een volledige ontwerpsysteemschaal. Buiten de acht kernkleuren wordt de samenhang moeilijk te handhaven.
U kunt een lichtmoduspalet genereren en vervolgens “omkeren voor donkere modus” aanvragen om de overeenkomstige versie in donkere modus te krijgen met aangepaste verzadiging en lichtheid - een solide startpunt dat nog steeds handmatig moet worden afgestemd.