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
Kleuren bepalen in grote mate het gevoel dat bezoekers bij je website hebben. Het is echter niet verstandig zomaar een willekeurige kleur te gebruiken; uit een onderzoek naar kleuren dat in 2003 is uitgevoerd onder 232 mensen uit 22 landen (waarvan 80% Amerikanen) blijkt namelijk dat iedere kleur onbewust een bepaalde associatie oproept, en zelfs kan zorgen voor een sterke emotionele reactie. Hieronder lees je welke associatie bepaalde kleuren oproepen.
Rood
Om maar meteen bij de heftigste kleur te beginnen 😉 Rood is de kleur van liefde, passie en verlangen, en je ziet deze kleur dan ook vaak op dating en erotiek websites. Daarnaast wordt rood geassocieerd met kracht en snelheid (denk aan Ferrari).
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.
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
Geel is een hele zonnige (duh), warme kleur waar mensen vrolijk van worden en die door veel mensen geassocieerd wordt met plezier (fun). Ondanks het feit dat geel dus een hele positieve, energieke kleur is zie je niet veel websites die geel als hoofdkleur hebben. Dat komt omdat geel een hele felle kleur is, als je die bijvoorbeeld als achtergrond gebruikt is dat erg vermoeiend voor de ogen.
Kijk maar eens naar de afbeelding hierboven. Merk je dat je ogen moeite hebben met zo’n grote gele 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
Blauw staat onder andere voor betrouwbaarheid, veiligheid (denk aan de politie), kwaliteit, high tech en rust. Dat laatste zorgt ervoor dat blauw wel een geschikte kleur is om op websites te gebruiken, en dat wordt dan ook veelvuldig gedaan door grote websites als Facebook, Twitter, Bol.com, Nu.nl enzovoorts.
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
Groen is een hele positieve kleur die wordt geassocieerd met veiligheid, gezondheid, versheid, milieuvriendelijkheid, natuur en vertrouwen. Door deze eigenschappen zorgt groen voor een ontspannen en kalm gevoel, en 14% van zowel mannen als vrouwen noemen groen dan ook als favoriete kleur.
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 lichtgroen in te zetten als steunkleur op een witte website kun je ook een lekker frisse uitstraling krijgen.
Oranje
Oranje wordt natuurlijk vooral geassocieerd met voetbal en Koningsdag, een echte Hollandse kleur. Oranje is een warme kleur die, net als geel, vaak met plezier (fun), maar ook met goedkoop geassocieerd wordt.
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)
Paars wordt geassocieerd met luxe, royalty, moed, spiritualiteit, magie en plezier (fun). Vrouwen zijn meer fan van de kleur paars dan mannen: 23% van de vrouwen noemt paars als favoriete kleur, tegen 0% bij de mannen. 22 procent van de mannen noemt paars zelfs als minst favoriete kleur, tegenover 8% van de dames.
Bruin
Bruin wordt geassocieerd met aarde, hout, natuur, veiligheid en betrouwbaarheid, wat het een rustgevende kleur maakt. Bruin wordt echter ook genoemd als goedkope kleur, en het is bovendien de minst favoriete kleur van mannen (27%) en de 1 na minst favoriete kleur van vrouwen (20%).
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
Maar liefst 43% van de ondervraagden zegt de kleur zwart met kwaliteit te associëren. Ook als hetzelfde gevraagd wordt over technologie wordt zwart in 26% van de gevallen genoemd, en 24% van de respondenten associeert zwart met betrouwbaarheid. Ook macht, autoriteit en stijlvol worden genoemd bij de kleur zwart. Een zeer krachtige kleur dus, die dan ook graag gebruikt wordt door luxemerken.
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 is een vrij neutrale kleur, die vooral genoemd wordt als men denkt aan high tech (23%). In mindere mate wordt grijs ook geassocieerd met kwaliteit (zeker in combinatie met zwart), betrouwbaarheid en veiligheid.
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
Net als grijs is ook wit een heel neutrale kleur die je prima kan combineren met elke willekeurige kleur. Wit is lekker licht, rustig, puur en clean. Mensen associëren wit met betrouwbaarheid, veiligheid, hygiëne, zuiverheid, techniek, kwaliteit en stijl.
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, wit en een aantal 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
Primaire kleuren passen altijd goed bij elkaar. De primaire kleuren zijn rood, geel en blauw. Een combinatie met deze kleuren werkt altijd goed, denk bijvoorbeeld aan de logo’s van IKEA (blauw-geel), McDonalds en Shell (rood-geel) en Microsoft en Google (rood-groen-geel-blauw).
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 zijn kleuren die tegenover elkaar in het kleurenwiel staan. Voorbeelden van complementaire kleuren zijn groen en rood, blauw en oranje, geel en paars enzovoorts.
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
Als je kleuren combineert die naast elkaar in het kleurenwiel staan spreken we over analoge kleurencombinaties. Door diverse tinten van deze kleuren te gebruiken krijg je een heel mooi subtiel kleurenpalet.
Analoge kleurencombinaties zijn dus bijvoorbeeld oranje en geel, rood en paars, paars en blauw enzovoorts.
Combineer niet teveel kleuren
Voor welke manier van combineren je ook kiest, gebruik in elk geval niet teveel kleuren in je design. Als je meer dan 3 kleuren gebruikt wordt het al snel erg druk en onrustig, ook wel een kleurenkermis genoemd.
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.
Op Palleton.com kun je bijvoorbeeld de hoofdkleur die je wilt gebruiken selecteren in een kleurenwiel of door een zogenaamde hex waarde in te voeren (een 6 cijferige kleurcode), waarna je te zien krijgt welke kleuren daarbij passen.
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
Die eerder genoemde drukke en onrustige uitstraling kan ook ontstaan doordat afbeeldingen niet goed worden afgestemd op het design… of net andersom, want als je al een logo of huisstijl hebt vormt dat natuurlijk de basis voor je design. Met name grote afbeeldingen, bijvoorbeeld een afbeelding die als achtergrond of in de header gebruikt wordt, dienen qua kleuren te matchen met de kleuren in het design.
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
Geef een reactie