Kleur is een van de eerste dingen die een bezoeker opvalt en een van de laatste waar mensen rationeel over nadenken. Een goed kleurenpalet versterkt je merk, houdt tekst leesbaar en geeft je site rust, terwijl een slecht gekozen palet juist onrust en twijfel oproept. In deze gids leg ik uit hoe je kleuren kiest die bij je bedrijf passen, hoe je voorkomt dat je site te druk wordt en waarom contrast belangrijker is dan de mooiste kleur. Geen kleurentheorie voor de vorm, wel keuzes die op het scherm echt werken.
Waarom kleur meer doet dan je denkt
Kleur bepaalt in een fractie van een seconde welk gevoel je site oproept. Warme tinten voelen anders dan koele, een rustig palet straalt iets anders uit dan een fel palet. Nog voor iemand een woord heeft gelezen, heeft de kleur al iets gezegd over wie je bent.
Daarnaast stuurt kleur de aandacht. Een knop in een opvallende tint trekt het oog, terwijl rustige achtergronden de tekst laten ademen. Dat samenspel hoort doelbewust te zijn en niet toevallig. Hoe kleur past binnen het grotere geheel van je merk, lees je in de gids over merkidentiteit op het web.
Hoe een werkend palet is opgebouwd
Een goed kleurenpalet is geen verzameling mooie tinten, maar een set kleuren met elk een eigen rol. Meestal ziet dat er zo uit:
- Een hoofdkleur die je merk draagt en die op veel plekken terugkomt.
- Een accentkleur die je spaarzaam inzet voor wat de aandacht moet hebben, zoals knoppen.
- Neutrale tinten voor achtergronden, lijnen en grote vlakken, zodat het oog kan rusten.
- Een tekstkleur die op je achtergrond goed leesbaar blijft.
Door elke kleur een rol te geven, weet je altijd waar je hem inzet. Dat voorkomt dat je op elke pagina opnieuw staat te twijfelen en houdt je site samenhangend. Hoe je die afspraken vastlegt, komt aan bod in de gids over een designsysteem opzetten.
Kleuren kiezen die bij je merk passen
De beste kleuren komen niet uit een trendlijst, maar uit wat je bedrijf is en voor wie je werkt. Een paar vragen helpen je op weg.
Wat wil je uitstralen?
Betrouwbaar en degelijk vraagt om andere kleuren dan speels en eigenwijs. Begin bij het gevoel dat je wilt oproepen en kies daar je tinten bij, in plaats van andersom.
Wie is je klant?
Kleuren die de ene doelgroep aanspreken, kunnen een andere juist afschrikken. Denk aan wie je site bezoekt en wat bij hem past, niet alleen aan wat jij mooi vindt.
Welke kleur heb je al?
Een bestaand logo of bestaand drukwerk is een logisch startpunt. Je website hoort zich daar moeiteloos bij te voegen, zodat klanten je overal herkennen.
De mooiste kleur is waardeloos als de tekst erop niet te lezen valt. Leesbaarheid wint altijd van smaak.
Contrast en leesbaarheid voorop
Een kleurenpalet kan op je scherm prachtig ogen en toch falen zodra er tekst overheen moet. Contrast is daarom geen bijzaak maar de eerste toets die elke combinatie moet doorstaan.
Tekst moet rusten op de achtergrond
Lichtgrijze tekst op wit oogt misschien chic, maar veel mensen lezen het amper. Zorg voor genoeg verschil tussen tekst en achtergrond, zodat lezen geen moeite kost. Meer daarover lees je in de blog over kleurcontrast en leesbaarheid.
Denk aan wie minder goed ziet
Voldoende contrast helpt niet alleen bij fel zonlicht, maar ook mensen die kleuren minder goed onderscheiden. Het is een kleine moeite die je site voor iedereen bruikbaar houdt.
Test op meerdere schermen
Wat op je eigen monitor klopt, kan op een telefoon wegvallen. Bekijk je palet op verschillende schermen voordat je het vastlegt, want de bezoeker kijkt zelden op precies jouw scherm.
Veelvoorkomende valkuilen
De meeste kleurproblemen ontstaan niet door een verkeerde kleur, maar door te veel of te weinig houvast. Een paar valkuilen die ik vaak tegenkom:
Te veel kleuren tegelijk
Wie elke sectie een eigen kleur geeft, krijgt een site die onrustig aanvoelt. Minder kleuren met een duidelijke rol oogt vrijwel altijd rustiger en sterker.
De accentkleur overal inzetten
Een accentkleur werkt juist omdat hij opvalt. Gebruik je hem overal, dan valt niets meer op en weet de bezoeker niet meer waar hij moet kijken.
Kleur kiezen zonder context
Een tint die los mooi is, kan tegen je beeld of je logo lelijk botsen. Beoordeel kleuren altijd in samenhang, niet als losse staaltjes.
Zelf doen of uitbesteden?
Een eerste palet samenstellen kun je zelf. Begin bij je merkkleur, kies een rustige achtergrond en een accent voor je knoppen, en toets steeds of de tekst goed leesbaar blijft. Voor een eenvoudige site brengt dat je vaak al een heel eind.
Wordt je website een serieus visitekaartje, dan loont het om de kleuren door iemand te laten kiezen die let op samenhang, contrast en hoe alles op verschillende schermen oogt. Niet omdat je geen kleur kunt kiezen, maar omdat de details die een palet laten kloppen makkelijk over het hoofd worden gezien. Wil je weten wat dat voor jouw site betekent? Bekijk dan de restyle en redesign of leg me je vraag voor via de contactpagina.
Veelgestelde vragen
Vaak minder dan je denkt. Een hoofdkleur, een accentkleur voor knoppen en een paar neutrale tinten voor achtergrond en tekst brengen je een heel eind. Te veel kleuren maken een site juist onrustig. Houd het beperkt en geef elke kleur een duidelijke rol.
Je logo is een goed startpunt, maar een website vraagt meer. Naast de merkkleur heb je rustige tinten nodig voor grote vlakken en tekst, want een felle logokleur over een heel scherm werkt zelden. We bouwen het palet rond je merk, maar vullen het aan met kleuren die op een scherm prettig blijven.
Schermen verschillen in helderheid en kleurweergave, en daar heb je weinig invloed op. Daarom kies je kleuren die met genoeg contrast werken, zodat ze op een fel en op een gedimd scherm allebei goed leesbaar blijven. Te subtiele verschillen vallen op het ene scherm weg en op het andere niet.
Dat kan, en het is vaak een van de snelste manieren om een site frisser te laten ogen. We kijken welke kleuren je nu gebruikt, brengen ze terug tot een heldere set en zorgen dat het contrast klopt. Ik reken daarvoor een projectprijs op maat, zodat je vooraf weet wat het kost.
Verder in de kennisbank: Een designsysteem opzetten voor je website · Merkidentiteit op het web · UI-design: het ontwerp dat je ziet en aanraakt