Een kleurenpalet maken: balans met de 60-30-10-regel

Goed een kleurenpalet maken betekent niet willekeurig mooie kleuren kiezen; het gaat om een plan voor hoeveel van elke kleur op de pagina verschijnt en welke rol die speelt. Precies daarom voelen zoveel beginnerspaletten vermoeiend aan: drie of vier felle kleuren strijden met gelijk gewicht en het oog vindt geen rustpunt. In deze gids passen we stap voor stap een klassieke methode toe die vanzelf balans creëert — de 60-30-10-regel — en bekijken we praktische tools om je kleuren in een echte interface te testen.

Wat is de 60-30-10-regel?

De regel komt uit de interieurarchitectuur en beschrijft de kleurverdeling in een compositie als percentages. Je verdeelt de kleuren in een gebied ongeveer zo:

• 60% — dominante kleur: achtergronden, grote lege vlakken, de algehele toon van de pagina. Meestal een neutrale of laag verzadigde kleur.
• 30% — secundaire kleur: structurele gebieden zoals kaarten, sectie-achtergronden en navigatie. Contrasteert met de dominante kleur maar vecht niet om aandacht.
• 10% — accentkleur: knoppen, links, call-to-actions. De felste en minst gebruikte kleur; juist die schaarste trekt het oog.

Deze verhoudingen hoeven niet op de pixel nauwkeurig te zijn. Wat telt is de hiërarchie: één kleur leidt, één ondersteunt, één vonkt. Zolang je het accent spaarzaam gebruikt, dwaalt het oog van de gebruiker vanzelf naar de belangrijke elementen.

Stap voor stap een kleurenpalet maken

Bij het opbouwen van een palet vanaf nul kun je deze volgorde volgen:

• 1. Begin met een basiskleur. Meestal is het makkelijkst om te starten met de merkkleur of de tint die je als accent wilt gebruiken. Denk eraan in HSL, zoals hsl(212, 90%, 50%).
• 2. Leid de neutralen af. Maak voor het 60%-dominante gebied een zeer laag verzadigd grijs-blauw uit dezelfde tint (bijv. tint 212, verzadiging 8%). Licht getinte neutralen geven warmte die puur grijs mist.
• 3. Kies de secundaire kleur. Een tint dicht bij de basis (analoog) of er recht tegenover (complementair). Analoge keuzes voelen rustig, complementaire energiek.
• 4. Vermenigvuldig de tinten. Maak licht-tot-donker varianten voor elke hoofdkleur (zoals 50, 100, 200 … 900). In een echte interface heb je deze tussentinten nodig voor hover, randen en schaduwen.
• 5. Controleer het contrast. Test tekst- en achtergrondparen op toegankelijkheid (hieronder).

Gebruik de juiste tools

Een palet op gevoel alleen bouwen is vermoeiend; gratis tools maken het veel makkelijker:

• Coolors en Adobe Color — genereren harmonieschema's zoals complementair, analoog en triadisch vanuit een kleurenwiel.
• Figma — laat je je palet opslaan als kleurstijlen of variabelen en ze consistent door het hele ontwerp hergebruiken.
• WebAIM Contrast Checker — meet de contrastverhouding van twee kleuren en toont WCAG AA/AAA-conformiteit.
• Browser-ontwikkelaarstools — de kleurkiezer in DevTools toont de contrastverhouding direct op het echte scherm.

Toegankelijk contrast is verplicht

Een mooi palet is nutteloos als het niet leesbaar is. De WCAG-normen vereisen een contrastverhouding van minstens 4.5:1 voor tekst van normale grootte en 3:1 voor grote tekst (ongeveer 24px, of 18.66px vet). Wanneer je je accentkleur op een knop gebruikt, controleer altijd het contrast met het label erop. Een knop met laag contrast gebruiken alleen omdat het de merkkleur is, zorgt dat gebruikers de belangrijke actie missen.

Een praktische gewoonte: probeer het palet in zowel een licht als een donker thema. Een fel geel dat er prachtig uitziet op licht kan verblinden op een donkere achtergrond, dus moet je de accenttint per thema misschien iets bijstellen.

Het palet naar CSS-variabelen brengen

Zodra het palet vaststaat, is de schoonste manier om het in code te zetten via CSS custom properties. Je definieert ze op één plek en gebruikt ze overal:

:root {
  /* 60% dominant / neutraal */
  --bg: hsl(212, 8%, 97%);
  --surface: hsl(212, 10%, 92%);
  /* 30% secundair */
  --secondary: hsl(212, 30%, 35%);
  /* 10% accent */
  --accent: hsl(212, 90%, 50%);
  --accent-hover: hsl(212, 90%, 44%);
  --text: hsl(212, 15%, 15%);
}

.btn {
  background: var(--accent);
  color: white;
}
.btn:hover { background: var(--accent-hover); }

In plaats van een aparte hover-variabele kun je die ook afleiden met een lichtheidsfunctie; in moderne browsers maakt color-mix() dit eenvoudig: background: color-mix(in srgb, var(--accent) 85%, black);

Veelgemaakte fouten

• Te veel accentkleuren. Meer dan twee felle kleuren leidt meestal tot chaos; beperk het accent tot één tint.
• Puur zwart en puur wit. #000 en #fff ogen hard; zeer donkere en zeer lichte neutralen zijn zachter.
• Informatie alleen via kleur. Fout/succes alleen met rood/groen tonen sluit kleurenblinde gebruikers uit; ondersteun het met een icoon of tekst.

Veelgestelde vragen

Hoeveel kleuren moet een palet hebben?

In de praktijk volstaan 3 hoofdkleuren (dominant, secundair, accent) plus enkele licht-tot-donker varianten van elk. Je kunt een of twee statuskleuren toevoegen (succes, waarschuwing, fout). Het aantal hoofdtinten tot drie beperken is de veiligste aanpak voor de meeste interfaces.

Moet ik de 60-30-10-verhouding precies halen?

Nee. De verhoudingen zijn een hiërarchiegids, geen doel. Wat telt is één kleur als dominant positioneren, één als ondersteunend en één als zeldzaam accent. De percentages ongeveer op het oog houden is genoeg.

Wat is de snelste manier om met kleurharmonie te beginnen?

Het snelst is starten vanuit één merkkleur en een complementair of analoog schema genereren met Coolors of Adobe Color. Daarna stem je de neutralen en het contrast met de hand af.

Wil je een evenwichtig, toegankelijk kleurenpalet op maat van je merk? Als je professionele hulp wilt bij een logo, interface of merkidentiteit, neem dan contact met me op.