Aan het laden…

Je gebruikt Internet Explorer. Deze website ondersteunt alleen moderne browsers. Gebruik alsjeblieft Chrome, Firefox, Safari of Edge.

Menu
Sluiten

De beste kleur voor jouw call-to-action bepalen

Call-to-actions (CTA) bestaan in alle kleuren en maten. Het moet bezoekers tot een bepaalde actie aanzetten, zoals een bestelknop. Daarvoor moet het wel eerst opvallen. Wat is de perfecte kleur voor jouw CTA?

Simpel gezegd, er is niet één perfecte call-to-action kleur. De kleur moet allereerst contrasteren met de content eromheen. Kies voor kleuren die complementair zijn aan de rest van de pagina, zoals blauw vs oranje. Zo valt de CTA op zonder te vloeken met jouw site-ontwerp.

Uiteindelijk bepaalt context dus de beste kleur voor een call-to-action. Laten we kijken welke associaties we met bepaalde kleuren hebben en hoe je de beste kleurcombinaties kunt maken.

Inhoudsopgave

  1. Kleurassociaties: Hoe wij reageren op kleur
    1. De juiste niche aanspreken met kleur
  2. Kleurcombinaties: De juiste focus leggen
    1. Kleurenwiel: De juiste combinaties vinden
    2. Kies één kleur als jouw actiekleur
    3. Secundaire call-to-actions
  3. Conclusie: De context bepaalt de kleur

Kleurassociaties: Hoe wij reageren op kleur

Er is geen twijfel dat kleur een psychologisch en fysieke effect op ons kan hebben. Het is bewezen dat de kleur van een kamer onze stemming kan beïnvloeden. Ook kan rood onze hartslag verhogen en oranje ons sneller doen werken, om een paar voorbeelden te geven. 

Kleur heeft ook invloed op hoe een merk gezien wordt — in positieve en negatieve zin. Zo verwacht je geen zachtroze call to actions op de site van barbershop Old Spice dat een stoere, mannelijke vibe wil uitstralen.

KleurEmotieGedrag
Geel Blijdschap, energie, hoop
(negatief: lafheid, verraad, ziekte)
Stimuleert mentale activiteiten; werkt vrolijkheid op;
(negatief: overmaat wekt irritatie op)
Oranje Blijdschap, energie, enthousiasme, creativiteit, vitaliteit Stimuleert activiteit; verbetert productiviteit en creativiteit
Rood Energie, kracht, vastberaden, passie, liefde, snelheid
(negatief: agressie, gevaar en risico)
Stimuleert eetlust; verbetert focus; verhoogt hartslag
Paars Wijsheid, waardigheid, creativiteit, stabiliteit Verbetert zelfvertrouwen; verbetert verbeeldingskracht
Blauw Veiligheid, waarheid, zelfvertrouwen, schoon, compassie, vrede
(negatief: depressie, verdriet)
Verbetert cognitieve en communicatieve vaardigheden
(negatief: donkere tinten stimuleren depressieve gevoelens)
Groen Kalmte, gezondheid, gulheid
(negatief: jaloezie, onervaren)
Roept gevoelens van veiligheid op; wordt als heilzaam voor geest en lichaam gezien 
Zwart Kracht, autoriteit, elegantie, prestige
(negatief: angst, rouw, ongeluk)
Roept een gevoel van kracht op; stimuleert het idee van anonimiteit
Kleur in de Westerse wereld
Bron: B. Northey (2019) “The influence of colour on our emotions, behaviors and perceptions of ourselves and one another” (PDF

De juiste niche aanspreken met kleur

Er is geen perfecte kleur, de context is belangrijk. Kleuren roepen namelijk verschillende associaties op in verschillende situaties (land, sector, etc.). 

Het verschilt van land tot land en niche tot niche hoe we kleur waarnemen.

Zo kan het dynamische en energieke gevoel van rood goed zijn voor een automerk, maar een slechte keuze zijn voor een Europese bank wegens de associatie met risico en geldschulden (in het rood staan). Maar in China staat rood juist voor rijkdom en is populair bij bedrijven in de financiële sector. 

Hou dus jouw doelgroep in gedachten bij het kiezen van de kleur van jouw call-to-action. 

De homepage van de Industrial and Commercial Bank of China heeft veel roodtinten
De homepage van de Chinese bank ICBC is niet bang voor rood, de kleur van rijkdom in China.

Kleurcombinaties: De juiste focus leggen

De kleur van een call-to-action heeft weinig effect als de rest van de pagina er niet goed op inspeelt. De kleurcombinatie moet kloppen.

Een groene button valt weg als de hele pagina groentinten gebruikt. Maar rode button zal er juist uit knallen omdat rood complementair is aan groen.

Een goede combinatie van kleuren legt de focus op jouw call-to-actions. Ze moeten van het scherm spatten.

CTA's met een laag en met een hoog kleurcontrast
Het contrasterende blauw doet de CTA’s veel meer opvallen.

Kleurenwiel: De juiste combinaties vinden

Maar hoe weet je welke kleuren goed samenwerken? Daar kunnen we het kleurenwiel voor gebruiken.

Er zijn 4 populaire manieren om kleuren te combineren:

  1. Analoge kleuren: Dit zijn kleuren die naast elkaar in het kleurenwiel liggen, zoals groen, geel en oranje. Analoge kleuren contrasteren elkaar niet en werken in harmonie zonder aandacht te trekken.
  2. Complementaire kleuren: Dit zijn 2 kleuren die tegenover elkaar staan in het kleurenwiel, zoals rood en groen. Ze geven het grootste contrast en trekken daarom veel aandacht.
  3. Triadische kleuren: Dit zijn 3 kleuren die gelijkwaardig verspreid over het kleurenwiel liggen, zoals oranje, paars en groen. Laat één kleur domineren en gebruik de andere twee om te accentueren. 
  4. Tetradische kleuren: Dit zijn 4 kleuren die als een rechthoek tegenover elkaar liggen. Het zijn 2 paren van complementaire kleuren, zoals rood en groen met oranje en blauw. Het vereist veel finesse om hiervan een harmonische combinatie te creëren, zorg dat één kleur domineert. 
Kleurcombinaties: analoog, complementair, triadisch en tetradisch
Kleurcombinaties

Zelf maak ik altijd een kleurpallet door eerst 2 complementaire kleuren te kiezen, zoals blauw en oranje. Daarvan maak ik eentje de actiekleur en eentje de steunkleur. De steunkleur verdeel ik verder onder in een aantal tinten:

Blauw en oranje kleurschema
Je ziet dat oranje eruit springt in dit kleurschema.

Heb je weinig gevoel voor kleur? 

Geen zorgen, tegenwoordig kun je overal inspiratie opdoen. Op Pinterest kun je zoeken naar kleurpaletten (e.g. “blue color palette”) en Canva heeft een handige tool waarmee een kleurpalet wordt gegenereerd op basis van jouw geüploade foto. 

Pinterest resultaten met groene kleurcombinaties
Op Pinterest kun je mooie kleurcombinaties vinden.

Kies één kleur als jouw actiekleur

Het doel van een call-to-action is dat bezoekers erop klikken. Je wilt ze tot een bepaalde actie aanzetten. De call-to-action moet opvallen zodat mensen er niet voorbij vliegen wanneer ze snel jouw pagina scannen.

Het kiezen van één actiekleur is een populaire tactiek:

Kijk naar de kleuren op jouw site en analyseer welke kleur je het vaakst gebruikt in jouw call to actions. Verwijder deze kleur op andere niet-klikbare plekken op je site (zoals kopjes), of kies een nieuwe complementaire kleur als jouw site nog maar één kleur heeft. Zo train je gebruikers om die ene kleur met “klikken” te associëren. Het wordt jouw actiekleur. 

Zorg ervoor dat de kleur contrasteert met de andere kleuren op jouw site.

Homepage met groen als actiekleur
VB. PandaDoc gebruikt consistent groen als actiekleur voor belangrijke klikbare elementen.

Maar wat doe je als je verschillende call-to-actions op 1 pagina hebt?

Secundaire call-to-actions

Productpagina’s hebben vaak twee call-to-actions naast of onder elkaar. Eentje is de primaire actie zoals een account aanmaken of aankoop doen, en de ander is een secundaire actie zoals een demo bekijken. 

De tweede CTA biedt een alternatief pad voor bezoekers die nog niet klaar zijn om de primaire actie te vullen.

Vermijd dat verschillende call-to-actions evenveel opvallen. Maak duidelijk voor de gebruiker welke de prioriteit heeft. Geef de ondergeschikte CTA een minder opvallende (of geen) kleur. 

Voorbeeld, PandaDoc geeft een duidelijk onderscheid tussen de 2 call-to-actions. De primaire CTA heeft een opvallende kleur en de secundaire CTA is slechts omlijnd (zodat wel duidelijk dat het klikbaar is): 

2 call-to-actions op de homepage van PandaDoc
PandaDoc maakt duidelijk onderscheid tussen de primaire (Try it free) en secundaire CTA.

Conclusie: De context bepaalt de kleur

Er is geen perfecte call-to-action kleur. Call-to-actions bestaan niet in een vacuüm. Uiteindelijk gaat het erom dat de buttonkleur opvalt door te contrasteren met de content eromheen. 

Hoe effectief een kleur is hangt af van de rest van de pagina.

De kleur van jouw CTA moet passen binnen het algehele ontwerp en kleurenpalet van jouw site, en tegelijkertijd genoeg afwijken om in het oog van gebruikers te springen. 

Kort samengevat zijn mijn tips:

  • Let op dat jouw kleur geen verkeerde associaties opwekt in relatie tot jouw product. Bijvoorbeeld, een Nederlandse bank wekt weinig vertrouwen op met rode buttons, de kleur van geldschulden.
  • Geef jouw call-to-action een kleur die complementair is aan de rest van jouw site. Complementaire kleuren hebben het grootste contrast en vallen dus extra op. Maak die kleur exclusief voor klikbare elementen. 
  • Zorg dat één call-to-action visueel dominant is, als je verschillende CTA’s dichtbij elkaar hebt staan.   

Opvallen met kleur is slechts de eerste stap. Je wilt ook dat mensen daadwerkelijk gaan klikken nadat ze CTA gelezen hebben. Lees mijn tips voor sterkere call-to-actions.

Home » Blog » SEO » De beste kleur voor jouw call-to-action bepalen