Als je regelmatig op internet zit ken je ongetwijfeld die saaie grijs / witte websites met zwarte letters zonder enige kleur erin. Vaak zijn dat standaard gratis WordPress themes waarbij elke vorm van sfeer ontbreekt. Daar kun je in sommige branches wel mee wegkomen, maar meestal wil je toch een sfeer creëren die past bij de dienst of het product wat je aanbiedt.
Als ik bijvoorbeeld op zoek ben naar een gezellig restaurant klik ik meteen weer weg als ik zo’n kille, sfeerloze website tegenkom. Idem wanneer ik een heerlijke zonvakantie wil boeken; dan wil ik een lekker zomerse site zien met felle, warme kleuren die me direct in de vakantiestemming brengt.
Er zijn 2 bepalende elementen voor de sfeer op een website: kleuren en afbeeldingen.
In dit artikel lees je:
- Welke associaties mensen hebben bij een bepaalde kleur
- Hoe je erachter komt welke kleuren je goed kan combineren
- Dat afbeeldingen qua kleur en sfeer bij je design en product / dienst moeten passen
Kleuren en associaties
Rood
Rood zorgt echter ook voor een sterke associatie met woede, agressie, angst en gevaar (je moet stoppen voor rood licht, verbodsborden in het verkeer hebben een rode rand, brandweerwagens zijn rood).
Omdat rood zo’n heftige kleur is die zo’n tegengestelde emoties kan oproepen moet je hier goed mee uitkijken, en deze kleur kun je dan ook beter niet gebruiken voor te grote vlakken zoals de achtergrond van je website. Het kan echter wel een goede kleur zijn voor call to action buttons of andere onderdelen op de pagina die de aandacht moeten trekken.
Als je rood wel op een groter oppervlakte wilt gebruiken kun je beter kiezen voor een donkerdere tint rood, bijvoorbeeld bordeauxrood. Zoals te zien is in het screenshot hierboven geeft dat een hele andere uitstraling dan het felrode van Knuz.
In het bovengenoemde onderzoek werd rood als favoriete kleur genoemd door 7% van alle mannen en door 9% van alle vrouwen, maar rood wordt tevens door 9% van de ondervraagde deelnemers genoemd als kleur die met “goedkoop” wordt geassocieerd.
Geel
Klik maar eens op de afbeelding hiernaast. Dit zijn het menu van OAD en de footer van Sunweb, allebei uitgevoerd in knalgeel. Merk je dat je ogen moeite hebben met zo’n grote felgele oppervlakte? Ondanks het feit dat geel prima past bij zonvakanties is dit dus geen geweldige keuze.
Daarnaast noemt 13% van de in het bovengenoemde onderzoek ondervraagde mannen én vrouwen geel als minst favoriete kleur, en maar liefst 22% associeert geel met goedkoop.
Blauw
Bovendien is blauw veruit de favoriete kleur bij zowel mannen (57%) als vrouwen (35%). Toch is het wel vreemd dat blauw ook zoveel voor social media sites gebruikt wordt, het is immers ook een kleur die geassocieerd wordt met kou / koel, zakelijk en formeel.
Groen
Hoewel groen niet zo vaak gebruikt wordt als hoofdkleur voor een website wordt deze kleur wel vaak ingezet voor elementen als vinkjes of call to action buttons. Door groen in te zetten als steunkleur op een witte website krijg je een lekker frisse uitstraling (zie screenshot hiernaast).
Oranje
Oranje is echter ook de minst favoriete kleur van vrouwen (maar liefst 33%) en de op één na minst favoriete kleur van mannen (22%). Dat onderzoek is echter uitgevoerd onder met name Amerikanen, aangezien oranje zo’n typisch Hollandse kleur zullen die percentages in Nederland waarschijnlijk wat lager liggen.
Paars (violet)
Bruin
Bruin kan zorgen voor een hele warme, sfeervolle uitstraling, maar je kunt dan wel beter kiezen voor een afbeelding, bijvoorbeeld van een houten tafel, vloer of boom.
Zwart
Zwart wordt echter ook sterk geassocieerd met angst (38%) en de dood, en wordt slechts door 9% van de mannen en 6% van de vrouwen als favoriete kleur genoemd. Aan de andere kant wordt zwart door niemand als minst favoriete kleur genoemd.
Grijs
Grijs kan dus prima werken, zeker als je iets met techniek doet of als je kwaliteit wilt uitstralen (in combinatie met zwart). Ook in combinatie met een andere krachtige steunkleur kan grijs een erg mooi en chique effect geven.
Tenslotte wordt grijs ook veel gebruikt voor teksten, aangezien een donkere grijstint vaak net wat vriendelijker overkomt dan zwart. Zorg in dat geval wel voor voldoende contrast!
Wit
Wit wordt vaak gebruikt als hoofdkleur (achtergrond) van een website, meestal in combinatie met één of enkele krachtige steunkleuren.
Kleuren combineren
Een webdesign bestaat altijd uit minimaal 2 kleuren, al is het maar een witte achtergrond met zwarte letters. Vaak worden er echter nog een aantal andere kleuren gebruikt; zelfs in een eenvoudig ontwerp als mijn eigen website zitten al geel, bruin, wit en minstens een stuk of 7 verschillende grijstinten.
Omdat wit, grijs en zwart zo neutraal zijn kun je deze kleuren prima combineren met iedere andere kleur, maar niet alle kleuren passen even goed bij elkaar. Kleuren die wel altijd goed bij elkaar matchen zijn:
Primaire kleurencombinaties
Een combinatie van primaire kleuren wordt wel snel als kinderlijk of goedkoop ervaren, let daar dus wel op. Om dat te voorkomen kun je een primaire kleur combineren met een niet-primaire kleur, of kiezen voor een lichtere tint.
Complementaire kleurencombinaties
Complementaire kleuren versterken elkaar waardoor je een heel krachtig kleurenpalet krijgt als je deze combineert. Maar als men zegt dat bepaalde kleuren “vloeken” heeft men het ook vaak over complementaire kleuren, dus dit valt niet bij iedereen in de smaak.
Complementaire kleuren zijn ook prima te gebruiken voor call-to-action buttons.
Analoge kleurencombinaties
Analoge kleurencombinaties zijn dus bijvoorbeeld oranje en geel, rood en paars, paars en blauw enzovoorts.
Combineer niet teveel kleuren
Je kunt natuurlijk wel meerdere tinten van 1 kleur gebruiken, zoals de verschillende grijstinten die ik op deze site gebruik.
Websites waarmee je mooie kleurencombinaties vind
Er zijn een aantal websites waarmee je mooie kleurencombinaties kan vinden.
Daarbij kun je verschillende combinaties laten tonen: alleen verschillende tinten van 1 kleur, de complementaire kleur, analoge kleurencombinaties, “driehoek” combinaties zoals bij de drie primaire kleuren, en zelfs een combinatie met 4 kleuren.
Onder het kleurenwiel vind je nog enkele handige functies: als je bijvoorbeeld op “presets” klikt krijg je een aantal voorgedefinieerde kleurpalets te zien in verschillende tinten, en onder “examples” vind je zelfs een voorbeeld webdesign en diverse achtergronden met de door jou gekozen kleuren. Tenslotte vind je onder “tables / export” diverse mogelijkheden om je kleurenpalet te exporteren, bijvoorbeeld voor je webbouwer. Een erg handige tool dus!
Een soortgelijke, maar minder uitgebreide tool vind je op color.adobe.com. Deze website bevat echter wel heel veel kleurencombinaties die gemaakt zijn door gebruikers zelf, die je kunt bewonderen door op “verkennen” bovenin te klikken. In het zoekvenster kun je vervolgens de kleur(code) typen waar je suggesties voor wilt krijgen, maar ook een (Engelse) zoekterm als “christmas” of “summer”.
Afbeeldingen
De afbeelding hiernaast bestaat bijvoorbeeld uit 3 screenshots van de website van OAD (klik op de afbeelding om deze te vergroten). OAD gebruikt verschillende van bovenstaande technieken voor het selecteren van afbeeldingen. De bovenste afbeelding is bijvoorbeeld erg sterk gekozen: deze gaat van een gele tint die net iets donkerder is dan het menu naar een aardetint, en de combinatie met de vrijwel zwarte silhouetten van olifanten sluit naadloos aan op het zwart/gele logo van OAD.
In de tweede afbeelding is juist gekozen voor een gele auto als blikvanger, die vrijwel dezelfde kleur heeft als het menu. De derde afbeelding is juist in roodtinten uitgevoerd, wat bewijst dat het combineren van 2 primaire kleuren (rood en geel) heel mooi kan uitpakken.
Zorg ook dat de afbeeldingen aansluiten bij hetgeen je wilt verkopen: bij de OAD website sluiten de afbeeldingen uitstekend aan op het soort reis, waardoor je meteen in de juiste stemming komt. Ook als je producten verkoopt toon je niet alleen afbeeldingen van het product zelf, maar vooral ook mooie sfeerfoto’s van een situatie waarin het product gebruikt wordt. Denk aan Nespresso, waar George Clooney geniet van een heerlijk kopje koffie, of aan modemerken waar je een knappe dame of man in de betreffende kleding ziet.
Andere artikelen over kleuren
Voor dit artikel zijn onder andere de volgende bronnen gebruikt:
“The ultimate color guide” van CoSchedule
Het veelvuldig genoemde onderzoek over kleurassociaties
Artikel over kleuren combineren op WikiHow
Interessant artikel over kleuren op Frankwatching
Nog een artikel over kleuren van Nicoline Wouterlood
20 websites die de juiste sfeer weten te creëren

Beken kleur aan Bob!
Wil je mijn mening (en wellicht ook die van andere bezoekers) over het kleurgebruik op jouw website? Zet dan een link naar je website in de reacties onderaan, dan vertel ik je graag wat ik ervan vind!
Wil je dat ik je website naast de kleuren ook beoordeel op meer dan 250 andere aspecten als indeling, usability (gebruiksvriendelijkheid), SEO, teksten etcetera? Bestel dan een website review vanaf €199,00 exclusief BTW!
Daarnaast kun je me natuurlijk ook inhuren om een website voor je te bouwen.
Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂
Top artikel!
Ik merk nog steeds dat personen niet bereid zijn in een goede design te investeren, terwijl het niet eens zo duur hoeft te zijn.
Bedankt voor je reactie Marloes!
Bedankt voor dit artikel! Heldert veel op, ga ik zeker meenemen.
Thanks Chiel!