De kleuren van je merk doen meer dan je denkt. Ze bepalen welke emotie bezoekers koppelen aan je bedrijf, hoe vertrouwd je overkomt, of mensen op de "Bestel"-knop klikken. In deze gids: hoe je een professioneel kleurenpalet maakt en wat de psychologie achter kleur is.
Hoeveel kleuren in een palet?
Vuistregel: 60-30-10. Eén dominante kleur (60%), één secundaire kleur (30%), één accent (10%). Daarnaast wit/grijs voor achtergrond en zwart/donkergrijs voor tekst. Totaal: 5-7 kleuren maximum.
Kleurpsychologie in marketing
- Rood
- Urgentie, passie, energie. Voedsel (Coca-Cola, McDonald's), uitverkoop, sport. Werkt op CTAs maar overweldigt snel.
- Blauw
- Vertrouwen, professionaliteit, zekerheid. Banken (ABN, ING), tech (LinkedIn, IBM), zorg. Veiligste kleur voor B2B.
- Groen
- Natuur, gezondheid, geld. Duurzaamheid, financiën, biologisch. Ook gebruikt voor "OK"-acties.
- Geel
- Optimisme, goedkoop, attentie. Voorzichtig — wordt snel als "kinderlijk" gezien. IKEA gebruikt het slim.
- Oranje
- Vrolijkheid, creativiteit, betaalbaar. ING, Hema. Werkt vaak als alternatief voor rood (minder agressief).
- Paars
- Luxe, mysterie, creativiteit. Cosmetica, luxe merken. Steeds populairder bij tech (Twitch, Yahoo).
- Zwart
- Premium, elegant, kracht. High-end fashion (Chanel), luxe auto's. Combineert met goud of zilver.
Hoe een palet maken uit je logo?
- Upload je logo in een color picker tool
- De tool extraheert de dominante kleuren
- Kies 1 hoofdkleur + 1 secundaire
- Voeg 1 accent toe die contrasteert (gebruik color wheel: complementair of triadisch)
- Bepaal neutrals: 1 lichte (off-white), 1 donkere (dark grey, niet zwart)
Extraheer kleuren uit je logo
Onze gratis Kleurenpalet Generator pakt automatisch de top 12 kleuren uit elke afbeelding.
→ Open Kleurenpalet GeneratorToegankelijkheid: contrast check
WCAG 2.1 vereist minimaal 4.5:1 contrast tussen tekst en achtergrond (AA-niveau). Anders is je site moeilijk leesbaar voor slechtzienden — en je verliest mensen.
Test elke kleurcombinatie via tools zoals WebAIM Contrast Checker. Witte tekst op lichtblauw? Vergeet het.
Kleur in CSS variabelen
:root {
--color-primary: #0d9488;
--color-secondary: #0ea5e9;
--color-accent: #f59e0b;
--color-text: #0f172a;
--color-text-muted: #64748b;
--color-bg: #f8fafc;
}
Definieer je palet één keer in CSS variabelen. Kleur veranderen = 1 regel aanpassen, hele site update.
Conclusie
Een goed kleurenpalet is geen 10 minuten klusje, maar wel een goede investering. Begin met je logo, denk aan je doelgroep en doel, en check altijd contrast. Slechte kleuren = slechte conversie, ook al zijn de prijzen of teksten perfect.