Ga naar de inhoud

Kleuren op jouw website

  • 5 min read

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:

.informatie {color: #00529B;background-color: #BDE5F8;}

.succes {color: #4F8A10;background-color: #DFF2BF;}

.foutmelding {color: #D8000C;background-color: #FFBABA;}

.waarschuwing {color: #D63301;background-color: #FFCCBA;}

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

Blauw

Positief: Vertrouwen, loyaliteit
Negatief: Conservatief, zakelijk

Waar zien we blauw?
Visa, Dell, Facebook, Rijksoverheid

Lichtblauw

Positief: Jong, koel
Negatief: Koud, emotieloos

Waar zien we lichtblauw?
Skype, Twitter, AH, Verenigde Naties

Bruin

Positief: Veiligheid, warmte
Negatief: Saai, koppig

Waar zien we bruin?
M&M’s, UPS, Nespresso, Louis Vuitton

Geel

Positief: Positiviteit, vernieuwing
Negatief: Angst, overprikkeling

Waar zien we geel?
McDonalds, Lay’s, Snapchat, Ferrari

Grijs

Positief: Neutraal, tijdloos
Negatief: Onuitgesproken, saai

Waar zien we grijs?
Apple, Toyota, Mercedes-Benz, WordPress

Groen

Positief: Balans, groei
Negatief: Verveling, jaloezie

Waar zien we groen?
Land Rover, Staatsbosbeheer, Spotify, BP

Oranje

Positief: Optimistisch, warm
Negatief: Onvolwassen, goedkoop

Waar zien we oranje?
Fanta, PostNL, Nickelodeon, Amazon

Paars

Positief: Kwaliteit/luxe, creativiteit
Negatief: Decadent, introversie

Waar zien we paars?
Milka, Monster.com, Lucardi, Hallmark

Rood

Positief: Passie, actief
Negatief: Agressie, provoceren

Waar zien we rood?
Coca-Cola, Levi’s, Texaco, Netflix

Roze

Positief: Kalmerend, zorgzaam
Negatief: Hulpeloos, remming

Waar zien we roze?
Dunkin’ Donuts, Lyft, LG, T-Mobile

Wit

Positief: Perfectie, helderheid
Negatief: Onverschillig, steriel

Waar zien we wit?
Apple, Swarovski, Uber, Mini

Zwart

Positief: Degelijkheid/efficiëntie, glamour
Negatief: Afstandelijk, bedreiging

Waar zien we zwart?
New York Times, WWF, Audi, Nike

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 in de kleurencirkel
Kleurencirkel (Color wheel)
Download

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:

Misschien is dit

niet het beste idee

zoals je ziet!

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

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.