Kleuren en hun effect in webdesign: de ultieme handleiding

Kleuren spelen een grote rol in ons dagelijkse leven. Onze ogen zijn ten slotte een van de sterkste zintuigen en elke kleur die we zien roept een bepaald gevoel op. Daarnaast heeft elke kleur ook een bepaald effect op ons brein en kunnen kleuren ons zelfs aanzetten om een bepaalde actie te ondernemen.

Wist je trouwens dat het gebruik van kleuren terug vindt in spreekwoorden of gezegdes, zoals “groene vinger hebben”, “een blauwtje lopen”, “witheet zijn”, “de rode draad”, “zo blauw als een tientje” enzovoort.

Daarnaast verschilt de betekenis en het effect van een kleur per land of cultuur. Dus voordat je aan de slag gaat met het uitkiezen van het kleurgebruik op je website, is het raadzaam om je te verdiepen in je doelgroep en waar ze vandaan komen. Want anders heb je de kans dat je een “blauwtje loopt” bij je doelgroep. Want de eerste indruk die een consument van je website heeft, wordt voor 62-90% bepaald door de kleurkeuze, wijst onderzoek uit. Zo wordt zwart in westerse landen vaak gebruikt als rouwkleur, terwijl ze in oosterse landen voornamelijk wit gebruiken. Verdiep je dus goed.

Er zijn miljoenen kleuren. Door al die kleuren kan het een beetje gaan duizelen. Daarom zijn kleurgroepen bedacht om het een beetje makkelijker te maken. Kleuren worden traditioneel weergegeven in een kleurencirkel en aan de hand van deze cirkel kunnen we kleuren indelen in drie hoofdgroepen: primair, secundair en tertiair.

Primaire kleuren zijn rood, blauw en geel. Deze kleuren zijn de basiskleuren waaruit alle andere kleuren op de kleurencirkel zijn opgebouwd.

Secundaire kleuren zijn kleuren die je krijgt als je de basiskleuren met elkaar mengt. Dit zijn kleuren als oranje, paars of groen.

Tertiaire kleuren bestaan uit de middelste kleuren zoals geel-groen en blauw-groen. Deze ontstaan door menging van een primaire kleur en een secundaire kleur.

Er zijn allerlei termen om kleuren te beschrijven, wat later handig zal zijn om te weten wanneer we kleuren en hun emotionele betekenissen bespreken.

Complimentaire kleuren zijn kleuren die elkaar goed aanvullen en die zich tegenover elkaar bevinden op het kleurenwiel. Dit zijn kleuren als blauw en oranje, paars en geel, en rood en groen.

Analoge kleuren zijn kleuren die zich vlak naast elkaar bevinden op het kleurenwiel, zodat ze meestal redelijk goed bij elkaar passen, maar weinig contrast bieden wanneer ze samen worden gebruikt.

Belangrijk om te weten is dat kleuren vaak geassocieerd worden met emoties. Deze emoties zijn op te delen in 3 verschillende kleurgroepen, namelijk warm, koel en neutraal:

Warme kleuren roepen warmte, genegenheid en passie op. Dit zijn kleuren zoals rood, geel en oranje.

Koele kleuren doen mensen vaak denken aan autoriteit, vertrouwen, koelte en kilheid. Denk hierbij aan kleuren zoals blauw, groen en paars.

Neutrale kleuren wekken, zoals de term al doet vermoeden, niet veel emoties op. Kleuren zoals grijs en bruin zijn een voorbeeld van neutrale kleuren.

Zoals je inmiddels weet heeft elke kleur een eigen betekenis. In dit stuk gaan we kijken naar de betekenis van de kleuren en welke emoties ze oproepen bij mensen. Houdt hierbij wel rekening dat dit per land of cultuur kan verschillen. Daarom houden we het voor nu bij de algemene betekenis van kleuren.

We hebben er gelijk maar een aantal toonaangevende voorbeelden uit de praktijk bij gezet zodat je een goede indruk krijgt hoe andere bedrijven de betreffende kleuren toepassen op hun website.

Rood symboliseert vuur en kracht en wordt geassocieerd met passie en liefde. Het helpt ook om energie en opwinding te stimuleren. Maar de kleur rood wekt ook honger op. Niet voor niets kozen grote fastfoodketens als McDonalds en KFC voor de kleur rood in hun huisstijl.

De negatieve connotaties van rood zijn woede, noodtoestand en woede, die voortkomen uit de hartstochtelijke en agressieve kwaliteiten van rood.

Oranje is een combinatie van rood en geel. Oranje symboliseert geluk, optimisme, vrolijkheid, vreugde en zonneschijn. Het is een vrolijke kleur, die kinderlijke uitbundigheid oproept. De kleur oranje vooral geassocieerd met technologie en gadgets.

Oranje is niet zo agressief als rood, maar heeft wel dezelfde eigenschappen en stimuleert de geestelijke activiteit. Het symboliseert ook onwetendheid en bedrog.

Geel is een zonnige en vrolijke kleur die de positieve eigenschappen vertegenwoordigt, namelijk zon, vreugde, intelligentie, helderheid, energie, optimisme, en geluk. De kleur geel zie je vaak voorbij komen op websites van reisbureau’s, speelgoedwinkels, maar ook discounters en prijsstunters gebruiken de kleur geel (vaak in combinatie met blauw).

Een vale gele kleur brengt juist negatieve gevoelens met zich mee: voorzichtigheid, kritiek, luiheid en jaloezie.

Groen symboliseert de natuur, gezondheid, ontspanning en positiviteit. Het kan gebruikt worden om groei en harmonie te symboliseren. Mensen voelen zich veilig bij groen. Ziekenhuizen, duurzaamheidsbedrijven en tuincentra’s gebruiken vaak de kleur groen in hun huisstijl en webdesign.

Aan de andere kant staat groen symbool voor geld en toont het hebzucht of jaloezie. Het kan ook gebruikt worden om een gebrek aan ervaring te symboliseren of een beginner die nog moet groeien (“een groentje”).

Een voorbeeld van een bedrijf die de plank volledig misslaat met de kleur van de huisstijl en in het webdesign, is het Britse olie- en gasproducerende BP (British Petrol). BP maakt gebruik van een groen bloemvormig logo met een gele kern. Inmiddels weet je dat de kleur groen onder andere staat voor duurzaamheid. Maar aardolie is alles behalve duurzaam, dus de keuze voor het gebruik van de kleur groen in het logo is wat mij betreft niet helemaal logisch.

Blauw is een echte allemansvriend en daarom wereldwijd de meest favoriete kleur. Blauw is een vredige en kalmerende kleur die stabiliteit en deskundigheid uitstraalt. Het is dan ook een veelgebruikte kleur in bedrijfssites, met name verzekeringsmaatschappijen of webshops maken veelal gebruik van blauwtinten in hun huisstijl. Blauw symboliseert dan ook vertrouwen en betrouwbaarheid.

De andere kant van de medaille is dat de kleur blauw negatieve emoties kan oproepen, zoals depressie, kilte en passiviteit.

Paars is de kleur van koninklijkheid en verfijning en toont rijkdom en luxe. Het geeft ook een gevoel van spiritualiteit en moedigt creativiteit aan.

Helderder paars kan een magisch gevoel uitstralen. Het is ook zeer geschikt voor het bevorderen van creativiteit en vrouwelijke kwaliteiten.

Donkerder paars kan somberheid en droefheid oproepen.

Zwart (en wit) mag je eigenlijk geen kleur noemen. Maar in de volksmond wordt er toch vaak gesproken over “de kleur zwart”. Daarom houden we het in dit artikel lekker makkelijk en spreken we gewoon over de kleur zwart.

Hoewel zwart dus eigenlijk geen kleur is, kan het toch worden gebruikt om gevoel en betekenis te suggereren. Het wordt vaak in verband gebracht met macht, elegantie, verfijning en diepte. Er wordt gezegd dat het dragen van zwart op een sollicitatiegesprek kan laten zien dat de geïnterviewde een krachtig persoonlijkheid heeft. Hetzelfde geldt voor websites.

Zwart kan ook negatief worden gezien omdat de kleur wordt geassocieerd met de dood, mysterie en het onbekende. Het is de kleur van rouw en verdriet, dus het moet verstandig worden gebruikt.

Net als zwart is ook wit eigenlijk geen kleur. Wit symboliseert zuiverheid en onschuld. Het toont ook netheid en veiligheid. Wit zie je doorgaans veel op een website. Het wordt vaak gebruikt als achtergrond van de website. Het is een veilige keuze en tevens een neutrale kleur zonder dat deze afbreuk doet aan de psychologische eigenschappen van de overige aanwezige kleuren.

Aan de andere kant kan wit worden gezien als koud en afstandelijk, als symbool voor leegte of de harde en bittere eigenschappen van de winter.

Het kiezen van de juiste kleuren om te gebruiken in je webdesign kan een flinke opgave zijn. Zeker als je niet weet waar je moet beginnen en het je ontbreekt aan de betekenis van de kleuren. Bovendien maken we vaak keuzes in kleuren op basis van persoonlijke voorkeur, maar dat is niet altijd de juiste keuze. Kleur is een krachtig middel om je bezoekers een bepaalde stemming of een bepaald gevoel te geven en kan worden gebruikt om de merkherkenning te vergroten.

Stel dat je een ondernemer bent met een tuincentrum en je favoriete kleur is rood, dan lijkt het misschien voor de hand liggend om de kleur rood prominent door te voeren in je webdesign. Maar roept dat wel de juiste emotie op bij je bezoekers en je doelgroep?

Wanneer je aan de slag gaat met het uitkiezen van kleuren voor je website of huisstijl kan het handig zijn om eerst te bedenken in welke van de drie kleurgroepen je de kleuren gaat kiezen, dus: warm, koel of neutraal.

Als je bijvoorbeeld een slagerij of een restaurant hebt is het misschien verstandig om je kleuren in de warme kleurgroep te zoeken, aangezien mensen warme kleuren vaak associëren met eten. Ben je een witgoed specialist of heb je een winkel in tuinartikelen? Denk dan bijvoorbeeld eens aan kleuren binnen het koele kleurenspectrum.

Als je aan de slag gaat met de kleuren van je webdesign kies je eerst één of meerdere basiskleuren. Het is van belang om bij het kiezen van de basiskleuren rekening te houden met de psychologische kleurassociaties die aan kleuren verbonden zijn. Bovendien is het belangrijk dat deze kleuren de visie van je bedrijf goed naar voren laten komen. Door de basiskleuren aan te laten sluiten op je visie versterk je deze onbewust.

Je kunt kiezen uit één of meerdere basiskleuren. In de praktijk zul je tevens zien dat de meeste website één a twee basiskleuren gebruiken. Hoe dan ook; kies ze bewust en zorg er voor dat ze goed op elkaar aansluiten. Een tweetal voorbeelden zijn Coca Cola en Coolblue. Coca Cola maakt gebruik van slechts één basiskleur, namelijk rood. Coolblue heeft er juist voor gekozen om met twee basiskleuren te werken, namelijk blauw en oranje.

Wil je inspiratie opdoen voor je basiskleuren? Kijk dan eens bij de trending kleurenpaletten van Coolors. Hier vind je een mooi overzicht van allerlei verschillende paletten, geordend op populairiteit.

Heb je je basiskleuren gekozen? Top! Dan kun je nu door naar de overige kleuren. Dit is overigens optioneel. Als je ervoor kiest om maar een of twee basiskleuren te gebruiken in je webdesign, dan is dat ook goed natuurlijk. Het is helemaal aan jou.

Een aanvullende kleur of kleuren kiezen kan in sommige gevallen zelfs lastiger zijn dan het kiezen van een basiskleur. Net als je basiskleur kies je ook een aanvullende kleur niet zomaar. Deze kleuren moeten niet alleen aansluiten op de basiskleuren, maar zeker ook op je bedrijfsvisie. Kies ze daarom zorgvuldig en verdiep je ook in de betekenis van deze kleuren.

Je kunt werkelijk alle kanten van het kleurenwiel op, bijvoorbeeld door een kleur te kiezen in het zelfde spectrum als je basiskleur. Maar je kan uiteraard ook een aanvullende kleur kiezen die zich juist in de tegenovergestelde richting van je basiskleur op het spectrum bevindt.

Daarnaast is het ook handig om je te bedenken waar je de aanvullende kleur voor wil gebruiken in je webdesign. Contrasterende kleuren kunnen handig zijn voor het benadrukken van een call-to-action, linkjes of buttons. Maar gebruik ze met mate. Maak het niet te bont en probeer geen lsd-trip van je webdesign van te maken, want dan heb je juist kans dat je je bezoekers afschrikt.

In het bovenstaande voorbeeld zie je welke kleuren wij hebben gekozen voor ons webdesign. De eerste twee kleuren zijn onze basiskleuren. Deze twee kleuren behoren tot de zogeheten analoge kleuren. Dit zijn kleuren die zich dicht bij elkaar bevinden op het kleurenwiel, maar ondanks het kleine contrast goed op elkaar aansluiten.

De derde kleur is een secundaire kleur. Dit is de zogeheten “complimentary color”, ofwel een contrasterende kleur dat zich aan tegenover de basiskleur op het kleurenwiel bevindt, maar de basiskleur juist complimenteert. Deze kleur gebruiken we voornamelijk in buttons, als mouse-over effect of iconen. Deze kleur is niet sterk aanwezig en gebruiken we enkel om onopvallende elementen meer nadruk te geven.

De vierde kleur is een kleur die zich, net als de twee basiskleuren, bevindt in het analoge kleurenvlak en tevens aansluit op de twee basiskleuren. Deze kleur gebruiken we voornamelijk als achtergrond van bepaalde secties op de pagina om ze uit te lichten en meer nadruk te geven.

Zo, dat was een flinke lap tekst en een hoop stof tot nadenken, niet? We hopen dat je na het lezen van dit artikel een heleboel inspiratie hebt opgedaan waarmee je zelf aan de slag kunt om tot een prachtig kleurenpalet te komen voor jouw webdesign.