Kleurenschema voor een website: kleuren kiezen voor je site

Een goed kleurenschema voor een website is geen moodboard van vijf lievelingskleuren. Het is een korte lijst rollen, elk ingevuld met één kleur: de paginaondergrond, verhoogde vlakken, lopende tekst, rustigere tekst, randen, één accent voor acties en rood, oranje en groen voor status. Kies eerst je merkaccent, bouw er rustige neutrale kleuren omheen, controleer elke tekstcombinatie op contrast en sla het resultaat dan op als CSS-variabelen, zodat de hele site dezelfde waarden gebruikt.

De rollen die elke site nodig heeft

Zo kies je kleuren voor een website

1. 1

   Begin met één accent

   Je merkkleur, of de kleur waarmee mensen je moeten associëren. Heb je er geen, dan helpt merkkleuren kiezen.

2. 2

   Tint de neutrale kleuren naar het accent

   Grijzen met een vleugje van de tint van het accent voelen er verwant aan. Een merk in petrol krijgt koele, licht blauwe grijzen; een merk in terracotta warme, roomkleurige.

3. 3

   Kies licht, donker of beide

   Kies het thema dat de meeste bezoekers het eerst zien en werk dat volledig uit voordat je aan het andere begint.

4. 4

   Controleer elke tekstcombinatie

   Tekst op ondergrond, tekst op vlak, gedempte tekst op beide, wit op de accentknop. Los alles onder 4,5:1 op.

5. 5

   Pas 60, 30, 10 toe

   Grofweg 60% ondergrond, 30% vlakken en tekst, 10% accent. De 60-30-10-regel legt de balans uit.

Drie kleurenpaletten voor een website om mee te beginnen

Contrastregels die een site leesbaar houden

De WCAG-richtlijnen voor contrast leggen de ondergrens: 4,5:1 voor gewone tekst, 3:1 voor grote tekst (ongeveer 24 px, of 19 px vet) en 3:1 voor interface-onderdelen zoals randen van invoervelden en iconen die betekenis dragen. De contrastchecker van WebAIM test elk paar. Onze gids over kleurcontrast behandelt de redenen en de randgevallen.

Je kleurenschema coderen als tokens

Sla elke rol één keer op als CSS-variabele en gebruik in je stijlen alleen die variabelen. Dan is een donker thema, een seizoenscampagne of een rebranding een wijziging in één blok waarden, geen zoektocht door elk bestand. Dit is het kernidee van designtokens.

:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }

Dark mode is een eigen schema

Een licht palet omkeren werkt zelden. Verzadigde accenten gloeien te fel op zwart, schaduwen verdwijnen en zuiver witte tekst geeft verblinding. Bouw dark mode als tweede set waarden: een bijna zwarte ondergrond met een vleugje tint, vlakken die lichter worden naarmate ze hoger liggen, zachtere tekst en een accent dat is opgelicht tot het contrast haalt. Ontwerpen voor dark mode gaat dieper in op dit onderwerp.

Waar merkkleur verder gaat dan knoppen

Als het accent alleen op knoppen wordt gebruikt, kan de site generiek aanvoelen. Het antwoord is niet overal meer accent, maar één plek waar het merk expressief mag zijn: de hero, een kenmerkenband of de footer. Een rijk kleurverloop uit de familie van het merk werkt daar goed, terwijl de rest van de pagina rustig en leesbaar blijft.

Een Gradiently Mark kan die expressieve laag zijn: een achtergrond die niemand anders heeft en die per regel een letterkleur uit zijn eigen palet kiest, zodat koppen leesbaar blijven. Meer over combinaties vind je bij kleurharmonie en hero-sectie ontwerpen.