Basiskennis van kleurentheorie

Hoewel het misschien overweldigend lijkt, kan je jouw keuzes gemakkelijker vastleggen met een beetje basiskennis van kleurentheorie. Het kiezen van kleuren is meer dan een kwestie van persoonlijke voorkeur. Elke kleur heeft een andere betekenis en kan mensen op een bepaalde manier beïnvloeden. Daarom is kleur zo belangrijk voor webdesign – het heeft de kracht om meteen de juiste boodschap over jouw bedrijf over te brengen.
Laten we eens kijken naar de betekenis van kleuren en welke emoties ze kunnen oproepen.

Warme kleuren

Rood kan passie opwekken. Het kan een energetisch effect hebben op de bezoeker. Maar wanneer alleen rood gebruikt wordt, heeft het de neiging overmatig te stimuleren. Het is een goed idee om ze te combineren met koele en neutrale kleuren voor meer balans.

• Rood – actief, emotioneel, gepassioneerd, kracht, liefde, intensiteit
• Roze – lief, romantisch, speels, warm, medelevend, zacht
• Oranje – warm, enthousiast, succes, vastberadenheid, vriendelijk
• Geel – jeugdig, levendig, energiek, fris, optimistisch    

Koele kleuren

Deze hebben een rustgevend effect op jouw bezoeker. Daarom zijn dit de meest voorkomende kleuren die op websites gebruikt worden. Maar wees voorzichtig: als ze te veel worden gebruikt, kunnen ze een koud of onpersoonlijk gevoel hebben.

• Groen – fris, kalm, ontspannen, vertrouwen, vredig, hoopvol, helend
• Blauw – comfort, duidelijkheid, kalmte, vertrouwen, integriteit, loyaliteit, betrouwbaarheid
• Paars – glamour, kracht, nostalgisch, luxe, ambitie, spiritueel   

Neutrale kleuren

Deze zijn perfect te combineren met warme of koele kleuren en ze worden vaak gebruikt om primaire kleuren af te zwakken en balans te bieden in webdesign.

• Grijs – respect, wijsheid, geduld, modern, lang leven, intelligent
• Zwart – krachtig, krachtig, serieus, elegant, luxueus, dramatisch, formeel    
• Bruin – vriendschappen, aarde, thuis, buitenshuis, geloofwaardigheid, eenvoud, uithoudingsvermogen   

Een geweldig webdesign met neutrale kleuren voor balans en om een luxe, minimalistisch gevoel te creëren.

Kleurpsychologie en merkherkenning

Als het gaat om merkbetrokkenheid voor een website, fungeert kleur als een sleutelfunctie om aandacht te trekken, verlangen te creëren en conversies te stimuleren. Met de juiste kleurselectie kan een gebruiker een bekend merk onmiddellijk herkennen, zelfs zonder het logo te zien.

Naast de algemene betekenis achter elke kleur, zijn er ook bepaalde trends die merken vaak volgen om erkenning te creëren. Zo gebruiken restaurants meestal rood en oranje, banken en financiële instellingen vaak blauw, luxeproducten worden doorgaans zwart verpakt, hotels meestal wit, blauw, zwart of groen. Enkele iconische merken die bekend staan om hun kleuren zijn CNN voor rood, wit en zwart, National Geographic voor geel en McDonald’s voor rood en geel.

Kleurentheorie in webdesign

Nu je weet hoe kleuren jouw bezoekers kunnen beïnvloeden, kan je ze met opzet gebruiken om meer invloed op het gebruikersgedrag te krijgen. Kort samengevat is kleurentheorie de wetenschap achter de interactie van kleuren op het kleurenwiel, die goed samenwerken in een ontwerp. Drie algemeen aanvaarde structuren voor een kleurenschema zijn complementaire, analoge en triadische kleuren.

Je kan meer genuanceerde selecties op het kleurenwiel maken door complementatie, contrast en levendigheid te overwegen.

Complementatie is de manier waarop de ene kleur interactie maakt met de andere. Wanneer je kleuren afstemt op de tegenoverliggende uiteinden van het kleurenwiel, krijg je een visueel aantrekkelijk effect. De kleuren zijn in balans.
Contrast vestigt de aandacht van bezoekers door de elementen op de pagina duidelijk te verdelen, wat de leesbaarheid van tekst ondersteunt of de aandacht trekt naar een specifiek deel van de pagina.
Levendigheid kan de emotionele reactie van bezoekers beïnvloeden. Heldere kleuren kunnen je energieker maken en donkere tinten kunnen je ontspannen en je helpen meer op inhoud te focussen.

De primaire kleur selecteren

Om te beginnen met het mengen van de kleuren van jouw webdesign, is jouw eerste prioriteit het bepalen van de primaire kleur voor jouw onderneming. Dit moet worden bepaald aan de hand van jouw logo. Als dat niet mogelijk is, gebruik dan kleurpsychologie en associatie om er een te selecteren.

Tinten of gradaties maken

Zodra een primaire kleur voor jouw website gekozen is, kunnen we aan de slag gaan met het kleurenschema. Voor sommige websites volstaat één enkele kleur. Maar meestal wil je op zijn minst een paar tinten om mee te werken.

Het is niet altijd de beste oplossing om je primaire kleur door het hele ontwerp te gebruiken. Je mag het afzwakken of de tint helderder maken om subtiele variatie op de website te maken met behoud van dezelfde basiskleur. Als je bijv. voor de achtergrond van grote tekstblokken lichtere tinten van een kleur kiest, kan je de primaire of meest prominente tint voor CTA-knoppen gebruiken, zodat ze meer opvallen. (CTA staat voor Call To Action, zoals een link naar een contactformulier.)

Een van de beste tools voor kleurselectie is Adobe Color. Deze tool is relatief eenvoudig te gebruiken. Het is heel handig dat je a.d.h.v. trefwoorden verschillende kleurenschema’s kan vinden en aanpassen naar jouw wensen.

De 60-30-10-regel

Deze techniek is niet heel eenvoudig, maar wel effectief voor het mengen van verschillende kleuren. Om harmonie te creëren, zou je kleuren over het algemeen moeten combineren in een verhouding van 60% – 30% – 10%. Je moet niet altijd met drie kleuren werken, maar het is een goed aantal om veilig en gebalanceerd te zijn. Bij deze methode moet 60% de dominante kleur zijn, 30% een secundaire kleur en 10% een accentkleur. Deze verhouding is aangenaam voor het menselijk oog, omdat het de visuele elementen geleidelijk laat opkomen.

Contrast

Kleurcontrast is een heel belangrijk onderdeel van een visuele compositie. Als je bijvoorbeeld bezoekers nodig hebt om speciale aandacht te besteden aan een specifiek deel van de website (zoals een CTA-knop), kun je twee sterk contrasterende kleuren gebruiken, zoals oranje en groen of rood en blauw voor je achtergrond en knop.

Hoewel contrast nuttig kan zijn, moet het voorzichtig worden gebruikt. Als je overal op de site een hoog contrast gebruikt, zal het moeilijk zijn om de tekst te lezen of te bekijken. Ik zou aanraden dat je voor het grootste deel van het ontwerp een contrast op het middenniveau maakt en alleen een hoog contrast toepast wanneer je belangrijke elementen markeert.

Werken met afbeeldingen

Soms kan het handig zijn om met een foto te starten. Als je een foto in gedachten hebt die je onderneming kan definiëren, kan je de hoofdkleuren daaruit selecteren.

Werken met meerdere afbeeldingen kan lastig zijn, omdat je een manier moet vinden om kleurharmonie in het ontwerp te brengen. Er zijn verschillende manieren om je afbeeldingen te balanceren:

• overweeg ze in grijswaarden te veranderen
• pas de levendigheid van de beelden aan om de toon te verminderen
• gebruik neutrale kleuren om de afbeeldingen in evenwicht te brengen
• of maak een verloopoverlay met de tinten van het kleurenpalet dat je voor het webdesign hebt gekozen.    

Afhankelijk van welke oplossing het beste werkt voor jouw website, kan je eenvoudig de door jouw geselecteerde foto’s harmonieus in elkaar laten passen.