Kleuren op jouw website

Je denkt er niet elke dag over na, maar elke kleur op je website heeft een betekenis. Onbewust associëren we een kleur met een gevoel, met een emotie. In deze website vind je de kleur geel als steunkleur bij het overwegend zwart en wit. Geel is een kleur die geassocieerd wordt met iets positiefs (naast met Pasen natuurlijk, maar dat is een heel ander verhaal).

Als ik een website analyseer, dan kijk ik vooral naar verkeerd gebruik van kleuren. Kan dat? Jazeker. Zo denken we bij rood al snel aan een foutmelding, en is groen die fijne kleur die bij een succesvol verzonden formulier hoort.

Het is niet in steen gebeiteld. Maar kijk de meldingen op je website tijdens en na het verzenden van een formulier maar eens na. Grote kans dat ze grofweg in deze kleuren zijn:

Eigenlijk heel logisch, toch? Denk maar eens aan een stoplicht. Het zijn de kleuren die we gewend zijn. Ook op je website werken die zo. Als jij om een tekst te benadrukken een zin rood maakt, zal die een reactie geven. Je brein ziet een foutmelding. Dus rood (en rode tinten) als tekstkleur wil je voorkomen.

Positieve en negatieve associaties bij kleuren

Laat duidelijk zijn dat een kleur zowel positieve als negatieve associaties kan hebben. Ik noemde positiviteit als een associatie bij geel, maar misschien herken je ook de associatie overprikkeling (nervositeit). Zowel Zwitsal als ikzelf hebben ervoor gekozen te gokken op de positieve associatie.

Overzicht van kleurbetekenissen

In veel gevallen is het natuurlijk een combinatie van twee of drie kleuren, maar meestal overheerst er één. Snap je waarom de bedrijven hierboven hebben gekozen voor die specifieke kleuren in hun logo?

Soms moet je “omdenken”. Je kunt bewust kiezen voor goedkoop (oranje) en of de overprikkeling van geel. Die Jumbo commercial met Snollebollekes? Juist. Rabobank gebruikt blauw en oranje. Wibra heeft een geel/rood logo, net als Lay’s. Soms worden bepaalde combinaties gekozen, juist om de combinatie van positieve en negatieve eigenschappen.

Complementaire kleuren

Kleurenpsychologie kan soms ver gaan. Je kiest op basis van wat je uit wil stralen je huisstijl-kleuren. Je gaat voor herkenning. Dat maakt soms ook afhankelijk. Je kunt hier lezen hoe bedrijven hun logo en soms kleuren al dan niet veranderden (en soms terugveranderden). In de meeste gevallen zorgen de kleuren alsnog voor de herkennig, ook al wijzigde het logo volledig (zie BP, Converse).

Op een website kijk ik altijd naar kleurgebruik. Eén van de meestgemaakte fouten is het te ver doorvoeren van de huisstijl. Het is leuk dat groen je huisstijlkleur is, maar als je alles groen maakt, valt niets op. Vooral je call-to-action, de actie op de pagina waarvan je hoopt dan mensen hem doen (bijvoorbeeld klikken op een knop/button), moet eruit springen.

Een manier om dat te doen, is het gebruik van een complementaire kleur voor die knop. Dan weet je zeker dat de knop opvalt!

Complementaire kleuren vind je in de kleurencirkel of “color wheel”. De kleuren die tegenover elkaar liggen, zijn complementair. Heb je dus een overwegend blauwe website, dan zal een oranje knop het meeste opvallen. Geel zit tegenover paars.

Even een zijsprong: Het hoeft niet zo zwart/wit, natuurlijk. Je eigen mening en voorkeur telt ook.

Ik wilde absoluut donkergeel, maar absoluut geen paars. In de kleurencirkel zit blauw tegenover die overgangskleuren van geel naar oranje, en ik heb ervoor gekozen om blauw te gebruiken voor de eerste knop op mijn homepage. Het zijn richtlijnen, geen wetten.

Een erg belangrijke opmerking hierbij is dat de complementaire kleuren samen, niet per se een goede combinatie zijn. Als je de ene kleur als achtergrond gebruikt, en de andere als tekstkleur, kunnen er onleesbare teksten ontstaan:

Nu doen: bekijk je website eens!

De belangrijkste les is, dat je best eens kritisch mag kijken naar:

1. De uitstraling van je logo en huisstijl. Passen de kleuren bij het imago dat je hoopt te hebben of bereiken?
2. De verschillende call-to-actions op je website. Vallen ze voldoende op? Kun je door een complementaire kleur te gebruiken de belangrijkste elementen op je site er nog beter uit laten springen?

Ik zou het gewoon doen.

---

Bronnen:
linku.nl/kleurenpsychologie
colourharmony.nl/kleur-en-betekenis
colour-affects.co.uk/psychological-properties-of-colours

Handig:
Color picker / kleurkiezer
Kleurengenerator