Kleurkeuze bestaat uit het samenstellen van een palet. Kleurtoepassing daarentegen bepaalt hoe kleuren worden ingezet: welke verbanden worden gelegd, waar begint de ene kleur en eindigt de andere, welke accenten worden aangegeven, enzovoort.

Kleurtoepassing heeft alles te maken met het leiden van het oog. En dus heeft het grote invloed op het functioneren van een site. Hoe kun je de toepassing van kleur nu analyseren? En werken je kleuren echt?. Daar gaan we het over hebben in dit artikel. De keuze van de kleuren (het palet), laten we voor het gemak even buiten beschouwing.

Wat is kleur?

Maar eerst: wat bedoelen we nu met kleur? Er zijn bijna net zoveel ideeën over wat kleur precies is als dat er mensen zijn. In een artikel over kleur zou een definitie van kleur nooit mogen ontbreken, zodat we tenminste weten waar het over gaat. De in dit artikel geldende definitie is de volgende:

Kleur is een gebeurtenis omdat het zich afspeelt in het hoofd van een waarnemer. Dat maakt van kleur per definitie een subjectief verschijnsel. Daarnaast oefent de lichtbron grote invloed uit op een kleur, simpelweg omdat men zonder licht geen kleur ziet. En tenslotte heeft het oppervlak van het object zelf — het ding waarnaar men kijkt — natuurlijk ook een kleur.

Zo bezien is kleur dus heel wat meer dan de vrolijke vakjes in de Pantone waaier. Kleur bestaat bij gratie van een trio partijen. Als één van de partijen in het trio verandert, verandert ook de kleur.

De kleuren van een website zijn in zekere zin bijzonder omdat eigenlijk het object ontbreekt. Je ziet een knop, maar er is geen knop. De knop is slechts een metafoor voor een bepaalde functie. Een site bestaat slechts virtueel, niet materieel, niet als object. Een site is enkel waarneembaar door manipulatie van een lichtbron: de monitor. Technisch gesproken gaat de bovenstaande definitie van kleur hier dus niet op. Praktisch echter wel. De knoppen op een website kunnen gerust als ‘dingen’ worden beschouwd. Ookal bestaan ze niet echt. En zoals alle andere dingen kunnen ze een kleur krijgen. Een kleur die werkt of een kleur die niet werkt.

In de praktijk

Rood is een opvallende kleur. Maar een rode knop op een rode webpagina is nauwelijks zichtbaar. Om te zien wat een kleur doet, kan men beter naar de grenzen van die kleur met andere kleuren kijken dan naar de kleur zelf. Het gaat dus, anders gezegd, om de contouren van de kleuren. De rode knop is opvallend als hij zich duidelijk onderscheidt van de rest, als de contour van de knop duidelijk is.

Ook kunnen we nog naar de details kijken, zoals bijvoorbeeld de fontkleur. Om een indruk te krijgen van het belang hiervan kun je je een boekenkast voorstellen met honderden boeken. Stel dat je zoekt naar een boek over Afrika. Dan moet je alle ruggen van de boeken lezen totdat je het juiste boek vindt. Voor een enkele boekenkast kan dat zomaar 10 minuten duren. Maar als je weet dat het boek rood is, dan zul je het in één oogopslag zien staan. Misschien staan er nog twee of drie andere rode boeken, maar meer dan een paar seconden zal de zoektocht al met al niet duren. Dit is de kracht van kleur. Dit is de eigenschap waarmee kleur zich onderscheidt van alle andere ontwerpelementen zoals vorm en textuur. Het leggen van verbanden en het leiden van het oog is wat van kleur een buitengewoon krachtig ontwerpmiddel maakt.

Laten we deze inzichten nu eens loslaten op twee bestaande websites om te zien wat er van geleerd kan worden.

Marktplaats.nl

Contouren

Marktplaats.nl wordt eerst door het mediaan filter van Photoshop gehaald waarmee de pagina wordt vertaald in abstracte kleurvlekken. Dit is een soort Rorschach-test waarmee we meer te weten komen van de gesteldheid van de site. Als dan het contrast voor de duidelijkheid nog wat wordt opgekrikt, komen we tot bovenstaand beeld. De site is ook na deze behandeling nog steeds heel inzichtelijk. Duidelijk zichtbaar zijn de rode marges, de gele advertentieruimte en de blauwe achtergrond. Zelfs de koppen zijn nog als zodanig herkenbaar als oranje vlekken. De grenzen tussen de verschillende kleuren, de contouren, zijn duidelijk en consequent gekozen.

Verbanden

Dezelfde website gaan we nu bekijken op visuele verbanden. Dat is niet zo moeilijk. Gewoon een kleur eruit lichten en de rest wissen. Het op die manier oplichten van donkerblauw levert voor Marktplaats het volgende beeld op:

En zie, ook op deze manier bekeken is het kleurgebruik consequent en duidelijk. Alle koppen hebben een donkerblauwe fontkleur en zijn dus onmiddellijk als zodanig herkenbaar.

Zijn de kleuren van Marktplaats mooi? Dat laten we hier even buiten beschouwing. We hebben het enkel over het effect van de toepassing van de kleuren. Maar werkt het? Dankzij het slimme gebruik van de kleuren: zonder enige twijfel. Het is bovendien interessant te constateren dat ongestraft het kleurpalet van Marktplaats verwisseld zou kunnen worden, zonder merkbare gevolgen voor de inzichtelijkheid van de site. Zolang dezelfde contourlijnen worden aangehouden tenminste. Hieronder een voorbeeld van Marktplaats.nl in een blauw-groen palet.

Knuffelkado.nl

Contouren

Het tweede voorbeeld: knuffelkado.nl, een kleurrijke site. Veel kleurrijker dan Marktplaats, maar werken die kleuren?

Eerst halen we de site weer door het mediaan filter in Photoshop. De boven- en ondermarges zijn duidelijk te onderscheiden. Verder is het logo nog te zien en de drie ronde vlakken die de fases in het koopproces aangeven: start, winkel en kassa. Maar in het witte gebied daartussen raak je onmiddellijk de weg kwijt. Daar resten slechts wat kleurvlekken zonder enige betekenis.

Verbanden

Laten we vervolgens kijken hoe het zit met het verband tussen de kleuren. Gezien de vele kleuren op de site is dit uitgesplitst in de drie kleuren geel, paars en groen. Dit is tenslotte ook de codering van de fases in het koopproces.

Geel

De gele tinten vertegenwoordigen een ratjetoe van betekenissen: de winkel, een paar letters van het woord ‘welkom’ en zo nog wat zaken. Wel wordt de tekst ‘kies een mooie knuffel’ terecht in verband gebracht met de winkel.

Paars

De paarse tinten zijn nog verwarrender. De tekst ‘regel de veilige betaling’ wordt in verband gebracht met het paarse ‘start’ in plaats van met het groene ‘kassa’.

Groen

De groene tinten zijn net zo min consequent en duidelijk. Al met al wordt het oog op deze website als een bal in een flipperkast van het ene naar het andere punt geschoten, zonder dat er veel van betekenis blijft hangen. Afgaand op de kleurtoepassing mag men dus concluderen dat deze site op zijn zachtst gezegd verwarrend is.

Moraal van dit verhaal

De keuze van kleuren is één ding, de manier waarop deze worden toegepast een heel andere. Het vervangen van de kleuren voor Marktplaats.nl hoeft geen gevolgen te hebben voor de bruikbaarheid van de site. De zalmkleurige marge zou bijvoorbeeld best groen mogen zijn, zolang deze zich maar blijft onderscheiden van de rest. Het gaat immers vooral om de verbanden en verschillen tussen de kleuren, niet om de kleuren zelf. Het gaat om de muziek, niet om de toon. Verder dient kleur uiteraard een integraal onderdeel te zijn van het ontwerp. Het beschouwen van kleur als apart ontwerpelement kan bruikbaar zijn ten behoeve van analyse, het blijft natuurlijk een beetje kunstmatig. Kleur kan niet los worden gezien van vorm.

Tenslotte

Hoewel er vuistregels te geven zijn met betrekking tot kleur zijn dit nooit regels van Meden en Perzen. Men kan over het algemeen beter afgaan op het gezonde verstand dan op allerhande ‘zekerheden’ die doorgaans over kleur worden verkondigd. Kleur is niet zo ingewikkeld, maar het vraagt wel even wat aandacht.

Het lezen waard

Er is zijn onnoemelijk veel pagina’s geschreven over kleur. Maar slechts een klein deel daarvan is echt de moeite waard.

• Aanrader zijn en blijven de boeken van Edward Tufte. Tufte rept bijna met geen woord over kleur, maar tussen de regels door gaat het over vrijwel niets anders.
• Colour and Culture van John Cage (ISBN: 0-500-27818-0) mag inmiddels een klassieker heten.
• Wittgenstein’s Bemerkungen über die Farben (Opmerkingen over de kleuren, ISBN: 90-60009-897-8) is ook aan te raden omdat zijn vlijmscherpe filosofische fileermes weinig heel laat van veel onzin over kleur.
• Peter Struycken heeft samen met Rein Ferwerda een bijzonder nuttig boekje over kleur geschreven: Aristoteles Over kleuren. (ISBN: 90-5573-129-3)
• Voor een meer wetenschappelijke benadering is er het uitstekende Licht op kleur van ir. C.H Kleemans (ISBN: 9074252346).
• Voor de kunstzinnige benadering is er natuurlijk Johannes Itten’s Kunst en Kleur. (ISBN: 90 213 0056 7) Zijn kleurtheorieën mogen dan ietwat achterhaald zijn, ze blijven voorlopig nog bruikbaar.
• Over digitaal kleurmanagement hebben Fraser, Bunting en Murphy het uitstekende Real World Colour Management geschreven (ISBN: 0-201-77340-6). Verplichte kost voor iedereen die de computer gebruikt als ontwerpmiddel.

Links naar meer informatie

• Een heldere uitleg over kleur
  Met nadruk op technische aspecten
• Een interactieve cursus kleur
  Hierin ook een uitleg van het ‘eyetrack’ kleur onderzoek
• Wat je ziet is niet wat je ziet
• Meer kleurillusies
• Het virtuele kleurmuseum

• Home
• Artikelen
• Colofon