Kleur is vaak het eerste wat een bezoeker van je site onthoudt, en tegelijk een van de onderdelen waar het meest mee wordt gestoeid. Eén merkkleur is nog te overzien, maar een hele site vraagt om meer: accenten voor knoppen, neutralen voor tekst en achtergronden, en kleuren die betekenis geven aan meldingen. Een werkend webpalet is geen losse verzameling mooie kleuren maar een doordacht systeem. Deze gids laat zien hoe je vanaf je merkkleur naar zo'n palet bouwt, met aandacht voor contrast, betekenis en consistentie.
Beginnen bij de merkkleur
Een palet bouw je vanaf een ankerpunt: je merkkleur. Die kleur draagt de identiteit en komt overal terug. Heb je al een huisstijl, dan is dat je startpunt; heb je die nog niet, dan kies je een kleur die past bij wat je wilt uitstralen en die zich onderscheidt in je markt.
Belangrijk is dat een kleur op een scherm anders werkt dan op papier. Wat in drukwerk mooi is, kan op een beeldscherm fel of juist dof uitvallen. Hoe je een merkkleur kiest die op het web echt presteert, behandel ik in een merkkleur die werkt op het web. Dit sluit aan op de gids over een visuele identiteit opbouwen, waar kleur een van de dragers is.
De opbouw van een palet
Een bruikbaar webpalet bestaat uit een paar duidelijke rollen, niet uit een willekeurige reeks tinten. Door elke kleur een functie te geven, weet je altijd waar je hem inzet.
- Hoofdkleur. De merkkleur die de toon zet en herkenbaarheid geeft.
- Accentkleur. Een opvallende kleur, spaarzaam ingezet voor knoppen en aandachtspunten.
- Neutralen. Een reeks grijzen en een bijna-zwart en bijna-wit voor tekst, lijnen en achtergronden.
- Statuskleuren. Vaste kleuren voor succes, fout en waarschuwing.
Het idee dat kleur betekenis draagt, maar nuchter benaderd moet worden, werk ik uit in kleurpsychologie nuchter bekeken.
Neutralen als basis
De meeste van je site bestaat niet uit felle kleuren maar uit neutralen: het grijs van je tekst, het wit of bijna-wit van je achtergrond, de subtiele lijnen tussen secties. Een goede reeks neutralen is het stille fundament dat je merkkleur laat opvallen. Te weinig neutralen en alles vecht om aandacht; een doordachte reeks geeft rust.
Let er daarbij op dat tekstgrijs niet te licht wordt. Lichtgrijze tekst op wit oogt strak maar leest slecht, een veelgemaakte fout die ik in contrast en leesbaarheid behandel. Neutralen moeten dienend zijn, niet decoratief.
Statuskleuren en betekenis
Naast je merkkleuren heeft een site een paar functionele kleuren nodig die betekenis dragen. Groen voor een geslaagde actie, rood voor een fout, soms geel voor een waarschuwing. Die statuskleuren staan los van je merk maar horen wel bij je palet, zodat een bevestiging of foutmelding overal hetzelfde aanvoelt.
Het loont om die kleuren vroeg vast te leggen, want ze duiken op zodra je formulieren en interactie hebt. Hoe je formulieren prettig maakt, inclusief duidelijke meldingen, lees je in de gids over een conversiegerichte website ontwerpen.
Contrast en toegankelijkheid
Een palet is pas af als het ook werkt voor mensen die minder goed zien. Tekst moet voldoende contrasteren met de achtergrond, en betekenis mag nooit alleen via kleur worden overgebracht. Dit is geen extra stap maar onderdeel van het kiezen zelf: een mooie kleurcombinatie die slecht leesbaar is, valt af.
De minimale contrastverhoudingen uit de toegankelijkheidsrichtlijnen geven hier houvast, behandeld in de gids over toegankelijkheid en WCAG in de praktijk. Een palet dat daaraan voldoet, is voor al je bezoekers prettiger, niet alleen voor wie slecht ziet.
Consistentie over je site
Een palet is alleen waardevol als je het overal hetzelfde toepast. Dezelfde accentkleur voor elke knop, hetzelfde grijs voor alle tekst, dezelfde achtergrond voor vergelijkbare secties. Die herhaling maakt je site herkenbaar en rustig. Eén pagina die afwijkt, en het hele beeld verzwakt.
Daarom leg je je palet vast in een set afspraken die meegroeit met je site, zoals beschreven in consistentie in design. Voor een groeiende site is dat het verschil tussen een merk dat scherp blijft en een dat gaandeweg verwatert.
Zelf doen of uitbesteden?
Met de juiste aanpak en een gratis contrasttool kun je zelf een eenvoudig palet samenstellen, zeker als je merkkleur al vaststaat. De moeilijkheid zit in het uitbalanceren: genoeg contrast, een palet dat overal werkt en kleuren die elkaar versterken in plaats van bevechten. Wie het uitbesteedt, koopt vooral dat evenwicht. Bekijk de dienst webdesign of een designsysteem en stijlgids, of neem vrijblijvend contact op.
Veelgestelde vragen
Minder dan de meeste mensen denken. Een hoofdkleur, een of twee accenten en een set neutralen voor tekst en achtergronden is voor de meeste sites genoeg. Een beperkt palet maakt je merk herkenbaarder en je site rustiger; te veel kleuren maken het beeld onrustig en willekeurig.
Begin bij wat je wilt uitstralen en kijk naar wat onderscheidend is in je markt. Een kleur moet passen bij je merk, goed werken op een scherm en voldoende contrast geven met tekst. Niet de mooiste kleur wint, maar de kleur die herkenbaar is en op je site overal blijft kloppen.
Statuskleuren geven betekenis aan acties en meldingen: groen voor geslaagd, rood voor een fout, soms geel voor een waarschuwing. Ze staan los van je merkkleuren maar horen wel bij je palet, zodat foutmeldingen en bevestigingen overal hetzelfde aanvoelen en meteen begrepen worden.
In de basis wel, maar een scherm werkt anders dan papier. Kleuren die op drukwerk mooi zijn, kunnen op een scherm fel of dof uitvallen. Vaak kies je voor het web een variant die dichtbij de huisstijl blijft maar geoptimaliseerd is voor leesbaarheid en contrast op een beeldscherm.
Verder in de kennisbank: Een visuele identiteit opbouwen · Een typografisch systeem opzetten · Webdesign: de complete gids