Kleurenpalet generator
Kies een basiskleur en genereer harmonieuze paletten die je meteen gebruikt in je ontwerpen, websites en apps.
Kleuren harmonieus inzetten in je ontwerp
De kleurenleer beschrijft welke tinten elkaar van nature aanvullen. Die verhoudingen komen voort uit de plek die kleuren innemen in de kleurencirkel — onmisbaar gereedschap voor ontwerpers, kunstenaars en iedereen die professionele, prettig ogende kleurcombinaties wil maken.
Die harmonieën begrijpen is de eerste stap naar een samenhangend palet. Elk type roept een ander gevoel op en heeft zijn eigen toepassing, of je nu aan een huisstijl, webdesign of illustratie werkt.
Soorten kleurharmonie
Een complementair palet gebruikt twee kleuren die tegenover elkaar staan in de cirkel — blauw en oranje bijvoorbeeld, of rood en groen. Dat sterke contrast trekt de aandacht en is ideaal voor call-to-actions, accenten en elementen die eruit moeten springen.
Een analoog palet combineert buren uit de cirkel, zoals blauw, blauwgroen en groen. Het resultaat is zacht, evenwichtig en prettig leesbaar — veel gebruikt in app-interfaces, zakelijke websites en alles wat rust en vertrouwen moet uitstralen.
Een triade verdeelt de cirkel in drie gelijke delen en levert levendige, rijke paletten op — denk aan rood, geel en blauw. Ondanks de onderlinge verschillen blijft het geheel samenhangend, zolang je de verhoudingen bewaakt.
Daarnaast bestaan er varianten als de split-complementaire harmonie, die het contrast tempert door de twee buren van de tegenoverliggende kleur te nemen, en de vierkante of rechthoekige harmonie, met vier kleuren symmetrisch over de cirkel verdeeld — uitstekend voor complexere composities.
De 60-30-10-regel
Wil je een harmonie evenwichtig toepassen, houd dan de 60-30-10-regel aan: gebruik een dominante kleur voor 60% van het ontwerp (achtergronden, grote vlakken), een secundaire kleur voor 30% (secties, componenten) en een accentkleur voor slechts 10% (knoppen, iconen, details). Die verhouding voorkomt visuele ruis en leidt het oog vanzelf naar wat het belangrijkst is.
Gebruik de tool hierboven om combinaties live uit te proberen, complementaire, analoge en triadische paletten te bekijken en de hexadecimale codes kant-en-klaar te exporteren naar je project.
Veelgestelde vragen
:root { --color-1: #hex; } dat je zo in je stylesheet plakt. Elke variabele draagt de naam van haar rol in het palet (basis, complementair, analoog enzovoort), wat het onderhoud en de visuele consistentie van je project een stuk makkelijker maakt.