Wanneer ik een website bouw voor mijn klanten dan vraag ik ze van tevoren om goed na te denken over bepaalde keuzes. Eén daarvan is het logo en de gewenste kleuren voor de website.

Die worden vaak gekozen op basis van het gevoel of de persoonlijke voorkeur van mijn klant, en of het past bij het logo.

Hoewel dit natuurlijk goed is, is het misschien nog wel belangrijker om je te realiseren dat de kleuren die je op je website gebruikt ook impact hebben op de bezoekers van je website. Het gevoel van je bezoekers wordt mede bepaald door de combinatie van kleuren en de emoties die deze kleuren oproepen.

Wist je dat uit onderzoek is gebleken dat een website bezoeker binnen 90 seconden denkt te weten met wat voor bedrijf hij te maken heeft? Deze eerste indruk wordt voor 62-90% bepaald door de kleuren die zijn gebruikt.

Kortom: die eerste indruk die bezoekers krijgen van je website is cruciaal. Wanneer je dit eenmaal weet, dan kun je zelf een belangrijke invloed uitoefenen op de eerste indruk die een bezoeker van jouw website krijgt.

De basiskleur

Voor je basiskleur is het belangrijk om te weten welke emoties of associaties deze oproept.

Onderaan dit blog geef ik je een overzicht van de meest gebruikte kleuren en hun associaties.

Afhankelijk van het doel van je website kies je een kleur die bijdraagt aan het halen van dit doel, maar die ook past bij jouw kernwaarden. Zo maak ik voor klanten van TechNies (link) vaak gebruik van de kleuren blauw (betrouwbaar, loyaal en oprecht) en oranje (warmte, veiligheid, comfort) omdat ik vind dat dit mijn kernwaarden in kleur weergeeft.

Een paar voorbeelden

Blokker, voor iedereen bekend, legt met zijn website en de gebruikte kleuren de associatie met comfort. Dit sluit aan bij de producten die ze verkopen.

Wanneer Blokker een actie op zijn website wil promoten, dan gebruiken ze hiervoor vaak de kleur rood. Rood staat voor belangrijk, urgent en het aanzetten tot actie.

Bol.com heeft duidelijk gekozen voor blauw als basiskleur. Deze kleur sluit aan bij de waarden die Bol.com wil uitdragen; loyaliteit, effectiviteit en betrouwbaarheid. Ook Bol.com maakt gebruik van de kleur rood om aan te zetten tot actie. 

De kleur rood is overduidelijk aanwezig bij de site van het Kruidvat. Het Kruidvat gebruikt deze kleur echter niet direct om tot actie op te roepen, maar wil hiermee wel duiden op de lage prijs. Daarnaast gebruiken ze de kleur geel vooral om opvallend te zijn.

De kernwaarden van het Kruidvat zijn vakkundig personeel en kwalitatief goede producten voor een lage prijs. Rood doet het dus vaak goed bij de echte prijsknallers zoals ook Hema, Bonprix en de vroegere Kijkshop. 

Doelgroep

Als je een goed beeld hebt van jouw potentiële klanten of welke bezoekers je graag zou willen aantrekken, dan is het niet alleen belangrijk om te weten welke associaties kleuren oproepen, maar ook welke voorkeuren mensen hebben. Zo is uit onderzoek gebleken dat blauw bijvoorbeeld bij zowel mannen als vrouwen populair is terwijl paars en roze vooral bij vrouwen populair is. Ook interessant om te weten is dat groen een favoriete kleur is bij de jeugd tot 18 jaar en dat paars in die doelgroep echt een no-go is, terwijl bij de ouderen vanaf 50 jaar bijvoorbeeld paars weer meer de voorkeur geniet. Ook houden mannen meer van felle kleuren terwijl vrouwen meer de voorkeur geven aan de zachtere kleuren / pasteltinten. 

Kleurassociaties

Denk jij na over een (nieuwe) website of denk je dat je huidige website wel een opknapper kan gebruiken? Dan geef ik je hier een overzicht van de belangrijkste kleuren en hun associaties.

Rood

Rood is een krachtige kleur die hartstocht en energie uitstraalt. Het is een kleur die de aandacht trekt doordat iets in het rood dichterbij lijkt te zijn. Daarnaast heeft rood, naast een psychologisch effect, ook een lichamelijk effect; het verhoogt de hartslag waardoor de tijd sneller lijkt te gaan. Dit stimuleert de mens om sneller tot actie over te gaan. Zeker een kleur om te gebruiken in bijvoorbeeld een webshop.

Blauw

Van blauw wordt vaak gezegd dat het een koude/kille kleur is. Dit komt waarschijnlijk door de associatie met (koud) water. Maar zakelijk gezien straalt blauw betrouwbaarheid, hoop, stabiliteit en oprechtheid uit. Het is vooral een zakelijke kleur omdat men er productiever van zou worden. Blauw wordt ook vaak meer geassocieerd met mannen dan met vrouwen. Zoals rood een fysiek effect heeft, heeft blauw vooral een mentaal effect. Blauw stimuleert helder denken en het houden van focus.

Geel

De kleur geel wordt gebruikt om op te vallen (denk aan een ambulance) en werkt activerend. Deze kleur staat voor vrolijkheid en vertrouwen, warmte, opwekkend en spontaan.

Op een website is geel niet altijd handig om te gebruiken, in ieder geval niet in je teksten. Geel is namelijk lastig te lezen en kost dus meer inspanning.

Groen

Groen is een ontspannende kleur die tegenwoordig vaak associaties oproept met duurzaamheid, milieuvriendelijkheid, rust en natuur. Het psychologische effect is vaak geluk, gezond, opwekkend en rustgevend

Oranje

Warmte, veiligheid, plezier, comfort zijn de woorden die vaak geassocieerd worden met oranje. Het is ook een kleur die veel gebruikt wordt in een call-to-action knop op de websites. Uit onderzoek is gebleken dat daarmee meer aandacht wordt getrokken en meer clicks worden gegenereerd. Oranje staat ook voor verandering, wellicht dat dit te maken heeft met de vallende blaadjes in de herfst ;-).

Paars

Paars wordt vaak in verband gebracht met luxe, visie en kwaliteit. Paars stimuleert het bewustzijn en bevorderd hierdoor het denken. Hoewel het in verband gebracht wordt met luxe en het dus gebruikt wordt om kwaliteit te benadrukken, kan paars er ook voor zorgen dat er lang over keuzes nagedacht wordt. Paars lijkt dus niet handig om te gebruiken voor een call-to-action.

Roze

Roze wordt gezien als een romantische en vooral vrouwelijke kleur. De kleur straalt liefde, warmte, geborgenheid en rust uit. Het lichamelijke effect van roze is rust waardoor deze kleur niet aanspoort tot actie.

Bruin

Warmte, eerlijkheid, betrouwbaarheid en hulp zijn de associaties van de kleur bruin. Deze kleur wordt in verband gebracht met de natuur en de aarde en kan daardoor dus heel goed gebruikt worden wanneer dit thema’s zijn in jouw bedrijf.

Grijs

Hoewel grijs niet echt een kleur is, wordt deze steeds vaker gebruikt. Het straalt kalmte, eenvoud en moderniteit uit. Het heeft weinig psychologische effecten en met grijs loop je zelfs het risico dat je website wat saai en deprimerend wordt.

Zwart

Zwart is een combinatie van alle kleuren en heeft de associatie met veiligheid en helderheid. Zwart is een kleur die je veel terugziet in de letters op een website, want zwart verhoogt de leesbaarheid.

Wit

En tot slot wit. Wit staat voor zuiver en eenvoud, maar ook voor hygiëne en efficiëntie. Een website met veel wit zorgt voor ruimte, frisheid en verzorgdheid.

Kleuren kiezen

Nu je weet waarop je moet letten bij het kiezen van de juiste kleuren voor je website, is het goed om te kijken hoe je de juiste kleuren met elkaar kunt combineren. Ik maak hiervoor vaak gebruik van een kleurenwiel. Met behulp van een kleurenwiel kun je combinaties van kleurschema’s gemaakt worden om tot de juiste kleuren te komen. Een kleurenwiel kan je op verschillende manieren gebruiken:

• Analoge kleuren: Hiervoor worden er meerdere (2 of 3) kleuren gebruikt die naast elkaar in het kleurenwiel staan. Eén van deze kleuren is je basiskleur, de andere kleuren zijn ter ondersteuning en afwisseling.
• Complementaire kleuren: In het kleurenwiel worden twee tegenover elkaar liggende kleuren gebruikt. De ene is je basiskleur, de andere de ondersteunende kleur. Soms kun je ervoor kiezen om twee kleuren aangrenzend tegenover een andere kleur te nemen voor iets meer variatie.
• Triadische kleuren: Drie kleuren, gelijk verspreid over het kleurenwiel.
• Tetradische kleuren: Vier kleuren in het kleurenwiel die in een vierkant / rechthoek tegenover elkaar staan.

Om de juiste kleuren te kiezen ga ik altijd uit van de basiskleur, deze voer ik in in het kleurenwiel en de andere kleuren komen er dan vanzelf uitrollen afhankelijk van de manier waarop het kleurenwiel gebruikt wordt. Een overzicht van kleuren en kleurwielen kun je vinden op de site van Adobe Color CC , of voor een meer gedetailleerd overzicht van de kleuren Tigercolor.

Leesbaarheid en actie

We hebben nu gekeken naar het algemene kleurgebruik op je website. Maar het is ook belangrijk om stil te staan bij de leesbaarheid en de actie die je verwacht. Er is niets vervelenders voor de bezoekers van je website dan teksten die niet of slecht leesbaar zijn.

Wist je dat 1 op de 12 mannen kleurenblind is? Houd er rekening mee dat veel van hen geen onderscheid zien tussen groen en rood.  Zorg er ook voor dat het contrast tussen je tekst en de achtergrond groot is, zodat ook mensen met een visuele beperking het goed kunnen lezen.

Dit contrast is ook belangrijk voor de call-to-action knop op je website. Hierdoor springt je knop eruit wat meer clicks gegenereerd! Het is dus belangrijk om de juiste kleuren te combineren zodat je bezoekers op jouw website willen blijven en zich aangesproken voelen. Zorg er met kleur voor dat de aandacht naar de call-to-action gaat en haal het maximale resultaat uit je website!

Succes met kiezen! En weet dat ik je graag help als je er niet uitkomt.