Kleurenpaletgenerator

Kies een basiskleur en wij stellen volgens de kleurenleer kleuren voor die erbij passen, plus een volledige schaal van lichte en donkere tinten (50 tot 950) voor je website of app.

Basiskleur

Passende kleuren

Tintenschaal

Klik op een kleur om de HEX-code te kopiëren. De stip ● markeert de tint waarin je basiskleur past.


Kleurharmonieën

Kleurharmonieën zijn gebaseerd op de positie van kleuren in de kleurcirkel. Complementair gebruikt de tegenovergestelde kleur (180°) voor maximaal contrast; analoog de buurkleuren (±30° en ±60°), die rustig en natuurlijk ogen; triadisch drie kleuren op 120° van elkaar; gesplitst complementair de twee buren van de tegenkleur, makkelijker in balans te brengen; en tetradisch vier kleuren op 90°. Monochroom houdt de tint gelijk en varieert de lichtheid.

Een klassieke vuistregel is 60-30-10: een dominante kleur in 60% van het ontwerp, een secundaire in 30% en een accentkleur in de resterende 10%.

Tintenschaal 50-950

Designsystemen zoals Tailwind CSS, Material en Bootstrap gebruiken voor elke kleur een schaal van 50 (bijna wit) tot 950 (bijna zwart): lichte tinten voor achtergronden, middentinten voor knoppen en links, en donkere tinten voor tekst en actieve toestanden.

We berekenen het palet in de kleurruimte OKLCH, die perceptueel uniform is: als je de tint draait of de lichtheid verandert, behouden de kleuren dezelfde waargenomen helderheid. Bij HSL is dat niet zo: daar zien een geel en een blauw met dezelfde "lichtheid" er heel verschillend uit.