Kleuren (Algemeen)

Kleuren op een website zijn van invloed op het gedrag van de bezoeker. 

Een kleur zorgt voor een bepaald gevoel doordat het 'reptielen brein' geprikkeld wordt. 

In dit artikel kijken we naar de psychologie van kleuren, naar actieve en passieve kleuren en wordt uitgelegd welke kleuren je voor jouw Bloomsite kunt kiezen. 

Kleuren voor je Bloomsite

Kies maximaal 5 kleuren voor jouw Bloomsite: 

1. Primaire kleur: Dominante basiskleur op jouw website 
   (bv. achtergronden, titels)
2. Secundaire kleur (CTA-kleur): Opvallende kleur die oproept tot actie 
   (bv. knoppen, linkjes)
3. Accentkleur: Om meer kleur aan je website te geven
   (bv. icoontjes)
4. Grijstint 1: Een grijstint 
   (bv. achtergronden)
5. Grijstint 2: Extra optionele grijstint 
   (bv. achtergronden of scheidingslijnen)

Kies eerst een goede actieve Secundaire kleur voor de call-to-actions. Zorg er daarnaast voor dat je Primaire kleur in contrast staat met je Secundaire kleur, zodat de call-to-actions goed naar voren komen en de aandacht vragen.

Daarnaast kies je nog een Accentkleur voor de accenten op je website. Kies een accentkleur die goed past bij de Primaire kleur, bijv. een lichtere tint van je Primaire kleur of een heel andere kleur.

Als laatste kies je een Grijstint 1, die je gebruikt voor de bijv. achtergronden en Grijstint 2 voor lichte accenten op je website. 

In het document Kleurvoorbeelden staan een aantal voorbeelden van mooie kleuren (met kleurcode) die goed bij elkaar passen, incl. Bloomsites van onze klanten waarop de kleuren zijn toegepast. Daarnaast vind je hier ook een aantal grijstinten.

Door met vaste kleuren te werken, creëer je consistentie op jouw Bloomsite.

Heb je al een logo, dan kun je de kleuren uit jouw logo gebruiken voor op je Bloomsite. 

Op coolors.co kun zien wat de kleurcodes van de kleuren in jouw logo zijn, zodat je deze weer kunt verwerken in je Bloomsite. Dit komt de consistentie op je Bloomsite weer ten goede.

Tip: blijf niet te lang hangen in het kiezen van kleuren voor je Bloomsite, dit kun je later altijd nog eenvoudig aanpassen. Weet je nu nog niet welke kleuren je wilt gaan gebruiken, kies dan gewoon vier kleuren, die je dan later aanpast. 

Psychologie van kleuren

Het belang van kleuren wordt vaak onderschat. Het is namelijk het eerste wat onbewust door websitebezoekers wordt opgenomen. Kleuren zijn dus van invloed op het gedrag van een websitebezoeker. 

Dit komt door het zogeheten 'reptielen brein'. Het zorgt voor onbewuste beslissingen en stuurt emoties aan. Je wilt dus dat de kleuren op je website het 'reptielen brein' van de bezoeker gaat prikkelen, zodat iemand direct een goed gevoel of emotie krijgt bij jouw website. 

Welke kleuren passen goed bij elkaar?

Kleuren hebben een tegenovergestelde kleur, dat noemen we de 'complementaire kleur'. In de afbeelding hieronder zie je dat deze kleuren tegenover elkaar staan.

Blauw combineert met oranje, groen met rood, en geel met paars.

Maar je kunt ook de kleuren combineren met de andere tegenovergestelde kleuren. Blauw kan bijvoorbeeld ook met geel of rood. En paars kan bijvoorbeeld ook goed gecombineerd worden met groen of oranje.

Welk gevoel past er bij welke kleur?

• Blauw: intellectueel, betrouwbaarheid, loyaliteit, oprechtheid, effectiviteit, rust en kalmte.
• Rood: urgentie, energie, moed, kracht, opwinding, warmte, grijpt de aandacht, maakt alert, verhoogt de hartslag, zet aan tot actie.
• Geel: optimistisch, jeugdig, zelfvertrouwen, creativiteit, vriendelijkheid, stimuleert emotie, kan zelfvertrouwen opwekken, slecht leesbaar, bij overmaat tegenovergestelde effect.
• Groen: balans, verfrissend, gezondheid, herstellend, evenwicht, positief gevoel, gerustheid, ontspanning, rustig voor het oog.
• Oranje: focus, stimulerend, actie, scherpte, goedkoop.
• Paars: rijk, rijkdom, luxe, royalty, spiritualiteit, wijsheid, rustig, maar toch krachtig.
• Wit: hygiëne, zuiverheid, eenvoud, verfijning, ruimtelijk, frisse uitstraling.
• Grijs: neutraal, bij overmaat deprimerend. 
• Zwart: wijsheid, efficiëntie, veiligheid, aantrekkingskracht.

Probeer diepzwart te voorkomen op je website. Je kunt beter gaan voor een donkergrijze tint (bv. antraciet), omdat dit beter leest. 

De andere kleuren die je gebruikt moeten jouw doelgroep aanspreken, want uit onderzoek is gebleken dat wanneer de kleuren aanspreken, de kans groter is dat de bezoeker op jouw Bloomsite blijft. Dit gebeurt namelijk al in de eerste 3 seconde dat iemand op je Bloomsite is. Je kunt dus een positieve invloed hebben op de beslissing van jouw Bloomsite bezoeker. 

Wanneer iemand langer op je Bloomsite blijft, zorgt het ervoor dat de kans groter is dat hij/zij een actie onderneemt.

Doelgroep en persona

Kies een kleur die past bij jouw doelgroep/persona. Probeer de demografische en psychografische kenmerken van jouw doelgroep te achterhalen, zodat je kunt bepalen welke kleuren je kunt gebruiken op je Bloomsite. 

Over het algemeen worden mannen bijvoorbeeld sneller geprikkeld door felle kleuren en vrouwen prefereren vaak lichtere pastel kleuren. Het is dus superbelangrijk te achterhalen wat jouw doelgroep is en welke kenmerken zij hebben, zodat je de kleuren hierop kunt baseren! 

Actieve en passieve kleuren

Het verschil tussen een actieve en passieve kleur kun je in het voorbeeld hieronder goed zien. Actieve kleuren zijn vaak fel en stralen ook een actie uit. Je wordt dus beter geactiveerd door deze kleuren dan door de passieve kleuren. Houd hier dus rekening mee bij het kiezen van jouw CTA- kleur. 

De tint van de kleur is ook heel belangrijk. Zoals je hieronder kunt zien kan groen zowel passief als actief zijn, maar is de tint van de actieve kleur wat feller. Actieve kleuren zijn dus erg geschikt voor de CTA's.

Kleuren voor Call-to-Action (CTA-kleur)

Een goede CTA-kleur zorgt ook voor meer resultaat. Uit onderzoek is gebleken dat dezelfde knop in het rood 21% meer klikken had dan de groene knop met precies dezelfde tekst. Rood is dus erg goed te gebruiken als CTA-kleur.

Maar ook kleuren die rode tinten hebben, zoals oranje en roze, werken erg goed als CTA-kleur. Het is belangrijk dat de CTA-kleur in contrast staat met de hoofdkleur.

Voorbeelden en een perfecte kleur-kiezer tool

We hebben een document gemaakt met een aantal voorbeelden van mooie kleuren, die goed bij elkaar passen. In dit document staan ook een voorbeelden van de websites van een aantal van onze klanten. Verder vind je ook een lijst met verschillende grijstinten.

Klik hier om naar het document Kleurvoorbeelden te gaan.

Wil je zelf de kleuren voor jouw Bloomsite samenstellen, dan kun je gebruik maken van de kleur-kiezer tool van Coolors: Coolors.co.