Een goede website heeft een logische structuur, een heldere navigatie en een mooi design. En één van de aspecten die komt kijken bij een mooi design is kleur. Kleur is meer dan alleen een ondersteunend middel om belangrijke onderwerpen aan te geven: kleur kan namelijk je website maken of breken.

Luke Wroblewski schrijft op Boxes and Arrows dat er waarschijnlijk geen ander designelement te vinden is dat zoveel invloed heeft op hoe we ons voelen in een ruimte als kleur. Kleur is bewust of onbewust gekoppeld aan de sfeer: denk maar aan de gezellige, bruine kroeg. En iedereen weet dat je de muren van een kleine kamer beter niet donker kunt verven, omdat de ruimte anders veel kleiner lijkt dan hij in werkelijkheid is. De invloed van kleur geldt echter niet alleen voor fysieke ruimtes, maar ook voor websites. De kleurstelling van een website draagt voor een belangrijk deel bij aan hoe je bezoekers de website ervaren.

Hoe werkt kleur?

Kleuren die je ziet worden door je hersenen geïdentificeerd als bijvoorbeeld rood of groen. Je ziet gras en je hersenen vertellen je dat het groen is. De hersenen doen daarnaast nog iets: ze koppelen waardeoordelen aan de kleur die je ziet op basis van menselijke instincten en aangeleerd gedrag. Kinderen leren al snel dat de blauwe kraan ongevaarlijk is omdat daar koud water uitkomt, maar dat ze met de rode kraan moet oppassen, omdat het water wel eens erg heet zou kunnen zijn. Ook het idee dat bepaalde kleuren bij elkaar vloeken, zoals roze en rood, is aangeleerd. Kijk je naar een mooie bos bloemen, dan zie je dat de combinatie roze en rood helemaal zo slecht nog niet is.

Kleur toepassen op websites

Aangeleerd of niet, kleur maakt emotie los en kan je daardoor blij of boos, verrast of verveeld, ongemakkelijk of prettig laten voelen. Dit principe kun je prima toepassen op websites door een kleurenschema te maken dat de gewenste emotie oproept. De eerste stap is om niet bij de kleur zelf te beginnen, maar bij de boodschap van de website. Wordt het een zakelijke presentatie of moet de website juist speels zijn? Schrijf een groot aantal emoties op die de boodschap moeten dragen, zoals bijvoorbeeld professioneel, overtuigend of interactief. Schrijf en schrap net zolang totdat je een duidelijk beeld hebt van de belangrijkste emotie.

Naar welke kleur welke emotie los kan maken is uitgebreid onderzoek gedaan. De verschillende onderzoeken heb ik gebruikt om mijn eigen lijstje van kleur en emotie samen te stellen. Voor uitgebreidere overzichten kun je terecht op de website van Claudia Cortés en op Wikipedia. Op basis van je hoofdemotie kun je met behulp van het onderstaande kleurenoverzicht je hoofdkleur vinden. Het schema helpt je een basiskleur te kiezen, ook als het niet je persoonlijke eerste keuze zou zijn.

• Oranje is, naast de kleur van alles wat Hollands is, communicatief en waarschuwend. Oranje is feestelijk, inspirerend, smakelijk, interessant en actief. Oranje kan bovendien ervoor zorgen dat dure producten betaalbaar en geschikt lijken voor iedereen. Oranje teksten zijn echter minder goed leesbaar en teveel oranje kan nogal een belasting zijn voor de ogen. Oranje is een warme kleur.
• Rood is in veel culturen de kleur van het leven en daarom kunnen we rood associeren met dynamiek, vitaliteit en levendigheid. Rood is echter ook gebiedend (het rode stoplicht), alert en zichtbaar. Rood is eigenlijk een kleur met een tegenstelling: aan de ene kant agressief, aan de andere kant romantisch. Door die tegenstelling is rood een nerveuze, onrustige kleur, maar daarom niet minder nuttig.
• Geel is de kleur van de zon en kernwoorden die daarom goed bij geel passen zijn helder en vrolijk, speels en nieuwsgierig, licht en vrolijk.
• Groen is overduidelijk de kleur van groei en natuur. Groen heeft geen haast, is uitgebalanceerd en veilig. Groen past bij ontspanning, vrije tijd en kalmte.
• Paars is een beetje een plechtige, melancholische kleur. Daarnaast wordt paars geassocieerd met luxe, intelligentie en magie. Paars kan ook ijdel zijn en artistiek. Paars is echter wel een koude kleur.
• Blauw is een veelgenoemde lievelingskleur en is net als rood een beetje tegenstrijdig. Blauw is beschermend en vreedzaam, maar ook koud, technisch, formeel en zakelijk. Blauw staat voor wijsheid, stabiliteit en hoop.
• Zwart is dan wel geen echte kleur, maar je moet het zeker serieus nemen. Zwart straalt autoriteit en macht uit en is tijdloos en stijlvol. Zwart kan echter ook overweldigend zijn en daarom zul je zwart met mate moeten toepassen.
• Wit is licht, puur en vooral lekker neutraal. Wit kan overal bij en kun je erg goed gebruiken als achtergrond bij zaken die eruit moeten springen.

Hou bij het gebruik van één van deze kleuren rekening met het verschil in warme en koele kleuren. De warme kleuren zijn de rode, bruine, gele en oranje tinten (herfstkleuren). De warme kleuren zijn opwindender en agressiever dan koude kleuren en kun je daarom beter met mate toepassen. Koele kleuren zijn tinten gebaseerd op blauw, blauw-groen en paars. Omdat deze tinten meer rust uitstralen zijn ze wat makkelijker en wat meer in te zetten dan de warme kleuren.

Vaststellen van de hoofdtint

Nu je de hoofdkleur van de website hebt gekozen ben je klaar voor stap twee: het vaststellen van de hoofdtint. Stel dat je groen hebt gekozen voor een website over gezondheid, dan zijn er miljoenen soorten groen die je kunt gebruiken. Wat je nodig hebt is een groen om mee te starten. Hoe kom je het eenvoudigst aan een groen? Ga naar een website, pak een plaatje erbij of ga gewoon wat zitten vogelen in Photoshop en kies een groen. Zie je ergens een groen die je bevalt, gebruik dan een van de vele programmaatjes (ik gebruik zelf de Hex Color Finder om de RGB waarden vast te stellen. Heb je een foto gebruikt om je eerste groen te vinden? Bewaar deze dan, want die heb je later nodig.

Kleurenschema op basis van de hoofdtint

Nu is het zaak om bij je hoofdgroen een aantal bijpassende tinten te vinden. Een eenvoudige manier om dit te doen is met behulp van een beetje wiskunde. Op EasyRGB.com kun je de RGB waarden van je hoofdkleur invoeren en daar berekent de website de tinten die daar het beste bij passen. In het groene voorbeeld zie je dat er ook een rode tint uitkomt. Erg handig, want die kun je gebruiken voor onderdelen in je website die extra aandacht nodig hebben (denk hierbij wel aan je kleurenblinde bezoeker, die deze twee kleuren niet goed van elkaar kan onderscheiden). Uit de resultaten van pak je vier of vijf tinten en je bent klaar met het creëren van een kleurenschema!

Een tweede methode om de kleuren bij elkaar te zoeken is met behulp van de foto die je gebruikt had voor je hoofdtint. Deze methode neemt iets meer tijd in beslag, maar het grote voordeel is dat het eigenlijk niet mis kan gaan en je altijd een kleurenschema krijgt dat er prettig uitziet. De theorie hierachter is dat de natuurlijke omgeving met al zijn verschillende kleuren – ook degenen waarvan je aangeleerd is dat ze niet bij elkaar passen – er altijd goed uitziet. Heb je een foto gevonden die bij de boodschap past, of waar je startkleur uit afkomstig is, dan kun je het overige deel van de foto gebruiken om je andere tinten te vinden. Alle kleuren die je uit de foto haalt zullen goed bij elkaar passen, omdat ze dat in het echt ook doen!

En nu?

Nu je je kleurenpalet bij elkaar hebt kun je deze (met mate) gaan toevoegen aan de website die je aan het ontwikkelen bent of gebruiken voor een redesign. Ook al zorgt een goed kleurenschema voor een prettig ogende website, dit betekent niet dat er automatisch meer bezoekers komen. Echter, je jaagt nieuwe bezoekers ook niet meteen weg. Ervaren (nieuwe) bezoekers je website als prettig, dan heb je grote kans dat ze nog eens terugkomen. En dat is eigenlijk waar je het allemaal voor gedaan hebt!

Meer lezen?

• Boxes and Arrows: Natural Selections - Colors Found in Nature and Interface Design
• Web Page Design for Designers - Colour
• Adam Polselli: Where's Ya Get That Color Scheme?
• Sitepoint: 4 Simple Steps to Coloring your WWWorld!
• Claudia Cortés: Color in Motion
• Infoplease: Psychology of color
• Importance of color in webdesign
• Webreference.com: The World of Color
• Startpagina voor kleur
• Wikipedia over kleur

Gebruikte tools

• EasyRGB.com
• [ws] Color Scheme Generator 2
• Hex Color Finder

• Home
• Artikelen
• Colofon