Kleuren website: zo kies je een palet dat werkt

Kleur is het eerste wat een bezoeker ziet, nog voor hij een woord leest. In een paar tellen vormt hij een gevoel bij je bedrijf: degelijk, warm, luxe of speels. De kleuren van je website sturen dat gevoel.

Kleur doet ook praktisch werk. Het laat zien waar je kunt klikken, wat belangrijk is en welke onderdelen bij elkaar horen. Een goed gekozen palet maakt je site rustig, herkenbaar en prettig om te gebruiken.

Heb je al een logo, bedrijfsauto of visitekaartje, dan heb je vaak al merkkleuren. Gebruik die als vertrekpunt. Zo herkent een klant je bedrijf op straat, in Google en op je website als één geheel.

Vraag de exacte kleurcodes op bij je ontwerper of drukker. Voor het web heb je een HEX-code nodig, zoals #1A5F7A. Een kleur die op papier mooi is, kan op een scherm feller of doffer uitvallen, dus test hem altijd op je eigen telefoon.

1. HoofdkleurDe kleur waar mensen je aan herkennen, meestal uit je logo.
2. SteunkleurEen tweede kleur die rust geeft of de hoofdkleur versterkt.
3. AccentkleurEen opvallende kleur voor knoppen en de belangrijkste acties.

De 60-30-10-regel komt uit de interieurwereld en werkt ook online heel goed. Je verdeelt je kleuren in drie rollen. Zo krijgt elke kleur een vaste taak en blijft je site overzichtelijk.

Zie de percentages als richtlijn voor hoeveel ruimte een kleur ongeveer krijgt op je scherm. Het gaat om de balans: veel rustige basis, een duidelijke tweede kleur en een klein, krachtig accent.

1. 60 procent basisMeestal wit, gebroken wit of een lichte tint. Hierop lees je de tekst en komen je foto's goed uit.
2. 30 procent steunkleurVoor kopjes, achtergrondblokken, het menu en de footer. Dit is vaak je hoofdkleur.
3. 10 procent accentVoor knoppen, links en kleine details die aandacht verdienen. Juist omdat het weinig voorkomt, valt het op.

Voeg daar een neutrale tekstkleur aan toe, zoals heel donkergrijs of bijna zwart. Daarmee leest lopende tekst rustig en blijft het contrast hoog.

Mooie kleuren werken pas als iedereen je tekst goed kan lezen. Daarvoor bestaan de WCAG-richtlijnen, de internationale standaard voor toegankelijke websites. Ze geven een meetbare contrastverhouding tussen tekst en achtergrond.

Voor gewone tekst vraagt niveau AA een verhouding van minstens 4,5 op 1. Voor grote tekst, zoals kopjes, is 3 op 1 genoeg. Wil je het hoogste niveau AAA, dan ligt de lat voor gewone tekst op 7 op 1.

1. Meet het contrastGratis tools zoals de WebAIM Contrast Checker geven direct de verhouding en laten zien of je slaagt.
2. Donkere tekst op lichte vlakkenDat leest voor lange stukken tekst het prettigst, zeker op een telefoon in de zon.
3. Let op tekst over foto'sLeg een donkere laag of een effen vlak achter de tekst, zodat hij overal goed leesbaar blijft.
4. Knoppen en iconen ookWCAG vraagt voor knoppen, invoervelden en iconen minstens 3 op 1 ten opzichte van de achtergrond.

Je belangrijkste knop, zoals 'Plan een afspraak' of 'Vraag een offerte aan', verdient de accentkleur. Gebruik die kleur alleen voor acties. Dan leert je bezoeker snel: deze kleur betekent klikken.

Welke kleur het beste werkt, hangt af van je palet. Een knop valt op door contrast met de omgeving. Een oranje knop op een blauwe site springt eruit, net als een donkerblauwe knop op een lichte, warme site.

1. Hoofdknop gevuldEffen accentkleur met witte of donkere tekst die het contrast haalt.
2. Tweede knop rustigerEen omlijnde knop of een tekstlink, zodat de hoofdactie de aandacht houdt.
3. Duidelijke hoverLaat de knop iets donkerder worden als je eroverheen beweegt, zo voelt hij levendig.

Zoek je een steun- of accentkleur bij je hoofdkleur, dan helpt de kleurencirkel. Daarop staan alle kleuren in een ring. Met een paar vaste combinaties vind je snel kleuren die goed samengaan.

1. ComplementairTwee kleuren recht tegenover elkaar, zoals blauw en oranje. Veel contrast, ideaal voor een accent.
2. AnaloogKleuren naast elkaar, zoals groen, blauwgroen en blauw. Rustig en harmonieus.
3. MonochroomEén kleur in lichte en donkere tinten. Strak en elegant, met een los accent voor knoppen.
4. TriadeDrie kleuren op gelijke afstand op de cirkel. Speels en energiek, werkt het best met één kleur in de hoofdrol.

Veel mensen verbinden kleuren met een gevoel. Blauw voelt voor velen betrouwbaar en zakelijk, groen fris en natuurlijk, warme tinten als oranje en terracotta toegankelijk en hartelijk. Donkere tinten met goud of crème ogen vaak luxe.

Zie dat als inspiratie, als vaste wet werkt het minder goed. Kijk vooral naar je klant en je concurrenten. Kiezen al je concurrenten voor blauw, dan kan een eigen kleur je juist helpen opvallen in Google en op social media.

1. Verzamel je merkkleurenNoteer de HEX-codes uit je logo en huisstijl.
2. Kies de rollenBepaal welke kleur basis, steun en accent wordt, volgens de 60-30-10-regel.
3. Maak lichte en donkere tintenVan elke kleur twee of drie varianten, voor achtergronden, randen en hover.
4. Test het contrastCheck elke combinatie van tekst en achtergrond op WCAG AA.
5. Leg het vast in een stijlgidsEén pagina met alle codes en waar je ze gebruikt, zodat je site overal hetzelfde blijft.

1. Bekijk je site buitenOp een telefoon in fel daglicht zie je meteen of tekst en knoppen sterk genoeg zijn.
2. Denk aan kleurenblindheidEen flink deel van de mannen ziet rood en groen lastig uit elkaar. Gebruik daarom ook iconen of tekst bij foutmeldingen en statussen.
3. Bekijk je site in grijstintenBlijft de hoofdknop dan duidelijk zichtbaar, dan werkt je contrast.
4. Vraag iemand andersLaat een klant je site vijf seconden zien en vraag waar hij zou klikken.

Bij Delta Six krijgt elke site een premium 3D-design op maat in jouw kleuren, met sterk contrast en duidelijke knoppen voor afspraken en aanvragen. We bouwen je complete website eerst gratis en laten hem zien in een online showcase van 15 minuten.

Je betaalt pas als je tevreden bent. Kies je ervoor, dan staat je site binnen twee weken live.