Veel sites hebben prachtige kleuren en ogen toch rommelig. Dat komt zelden door de kleuren zelf, maar door de manier waarop ze worden ingezet: een knop in drie verschillende tinten, een accent dat overal opduikt, een achtergrond die per pagina verspringt. Kleur werkt pas als elke tint een vaste rol heeft die je overal aanhoudt. In deze gids kijken we hoe je een handvol kleuren consequent door je hele site voert, zodat alles als één geheel oogt en niets willekeurig voelt.

Waarom consequent gebruik belangrijker is dan de kleur zelf

Een mooie kleur is een prettig begin, maar geen garantie voor een mooie site. Zodra dezelfde kleur de ene keer iets belangrijks aanduidt en de andere keer zomaar een vlak vult, raakt de bezoeker het spoor bijster. Hij leert onbewust wat een kleur betekent, en als die betekenis steeds verschuift, ontstaat ruis.

Consequent gebruik is daarom waardevoller dan het perfecte palet. Een gewoon kleurenschema dat overal hetzelfde betekent, oogt rustiger dan een prachtig palet dat lukraak wordt ingezet. Het samenstellen van zo'n palet komt aan bod in de gids over een kleurenpalet samenstellen; hier draait het om de toepassing.

Elke kleur een vaste rol geven

De kern van consequent kleurgebruik is dat je per kleur afspreekt waarvoor hij dient en die afspraak overal aanhoudt. Een eenvoudig systeem ziet er bijvoorbeeld zo uit:

Zodra elke kleur zo'n vaste taak heeft, weet de bezoeker onbewust waar hij aan toe is. Dat denken in vaste rollen is precies wat een designsysteem doet; daarover gaat de gids over een designsysteem opzetten.

Een kleur die overal hetzelfde betekent, hoeft niet hard te roepen om gehoord te worden.

Klein palet, grote samenhang

De verleiding om kleuren toe te voegen is groot. Een pagina voelt saai, dus komt er een extra tint bij, en nog een. Het resultaat is een site die per pagina anders oogt. Een klein palet werkt vrijwel altijd beter: hoe minder kleuren, hoe makkelijker je ze consequent toepast en hoe samenhangender het geheel.

Beperking is hier een kracht. Met een hoofdkleur, een neutrale basis en één accent kom je verbazend ver. Variatie haal je niet uit meer kleuren, maar uit de manier waarop je ze combineert met ruimte en typografie. Hoe ruimte daarbij helpt, raakt aan de blog over whitespace en rust in ontwerp.

De accentkleur bewaken

De accentkleur verdient bijzondere bewaking, want die is je sterkste stuurmiddel. Gebruik je hem alleen voor de belangrijkste actie, dan trekt hij de blik feilloos naar de juiste knop. Gebruik je dezelfde kleur ook voor losse details, dan verwatert het effect en weet de bezoeker niet meer waar hij moet klikken.

Houd je accent daarom schaars. Eén opvallende kleur op een pagina vol rust springt eruit; tien plekken in diezelfde kleur springen nergens uit. Hoe je met contrast en nadruk bepaalt wat de aandacht krijgt, beschrijf ik in de gids over contrast en nadruk.

Je kleurafspraken vastleggen

Wat in je hoofd zit, verwatert vanzelf. Leg daarom vast welke kleuren je gebruikt en welke rol elke kleur heeft. Dat hoeft geen dik document te zijn: een overzicht van je tinten met een korte notitie waarvoor ze dienen, is genoeg om consequent te blijven, ook als er later pagina's bijkomen.

Zo'n leidraad bewijst zijn waarde zodra je site groeit. Nieuwe pagina's sluiten dan vanzelf aan, omdat je niet opnieuw hoeft te bedenken welke kleur waar hoort. Dat onderhoud van samenhang werk ik verder uit in de gids over consistent ontwerp over alle pagina's heen.

Zelf doen of uitbesteden?

Het bewaken van je kleurafspraken kun je goed zelf, zeker met een heldere leidraad. Het opzetten van een palet met de juiste rollen, voldoende contrast en een accent dat precies genoeg opvalt is fijner werk om uit handen te geven, omdat de afwegingen subtiel zijn en kleine fouten meteen rommelig ogen.

Wil je een site waarop kleur overal klopt? Bekijk dan de webdesign op maat, waarin een doordacht kleursysteem standaard is. Oogt je huidige site door wisselend kleurgebruik onrustig, dan brengt een restyle of redesign de rust terug. Leg me je situatie gerust voor via de contactpagina.

Veelgestelde vragen

Verrassend weinig. Een hoofdkleur, een rustige basis voor achtergrond en tekst en één accentkleur volstaan meestal. Daaromheen een paar tussentinten voor randen en details. Hoe kleiner het palet, hoe samenhangender je site oogt en hoe makkelijker je het consequent toepast.

Dat je per kleur afspreekt waarvoor hij dient en die afspraak overal aanhoudt. Je accentkleur is bijvoorbeeld alleen voor knoppen en belangrijke acties. Zodra dezelfde kleur de ene keer een knop is en de andere keer zomaar een vlak, raakt de bezoeker het spoor bijster.

Meestal omdat de kleuren wisselend worden ingezet. Mooie kleuren zonder vaste rol leiden alsnog tot ruis: een knop in drie verschillende tinten, accenten die overal opduiken. Niet de kleuren zelf maar het gebrek aan een vast systeem maakt het onrustig.

Dat kan, maar doe het bewust. Geef een nieuwe kleur meteen een duidelijke rol en voer hem overal door waar die rol speelt, niet alleen op één pagina. Een kleur die los op één plek opduikt, oogt al snel als een vergissing in plaats van een keuze.

Verder in de kennisbank: Een kleurenpalet samenstellen · Een designsysteem opzetten · Consistent ontwerp over alle pagina's