Kleurenpalet kiezen voor je B2B-website (zonder regenboog)

Een goed kleurenpalet voor je B2B-website heeft drie lagen.

Een primaire kleur die je merk draagt, een of twee secundaire kleuren voor rust en structuur, en precies een accentkleur voor de actie die telt.

Het verdict: een kleurenpalet voor je website kiezen is een systeem bouwen, geen mooie kleuren verzamelen. Klein, doelbewust en getoetst op contrast.

Geen regenboog dus, en geen tien tinten die om aandacht vechten.

Hieronder: hoe je dat systeem opbouwt, hoe je per sector een hoofdkleur kiest en waarom je conversiekleur apart staat.

Waar we op sturen

Even vooraf, want het bepaalt elke keuze hieronder.

Wij sturen niet op het mooiste palet, maar op een site die bezoekers naar een aanvraag leidt.

Kleur is daarin een hulpmiddel.

Een palet dat prachtig oogt maar je belangrijkste knop laat wegvallen, is een slechte keuze.

Wil je het brede plaatje van een site die leads oplevert? Lees dan ook de B2B-website gids.

Hoe bouw je een kleurensysteem op in plaats van losse kleuren?

Geef elke kleur een vaste rol, dan oogt je site nooit rommelig.

Een professioneel palet is een systeem, geen verzameling kleuren die je mooi vond. Het simpelste werkbare systeem voor B2B heeft vier rollen:

• Primaire kleur: je merkkleur, terug in logo, koppen en vlakken.
• Secundaire kleur(en): een of twee tinten voor achtergronden en kaders.
• Neutralen: grijzen, een bijna-wit en een bijna-zwart voor tekst en lijnen.
• Accent- of conversiekleur: een opvallende kleur, schaars, voor knoppen en links.

De neutralen zijn het stille werkpaard van je site.

Ze vullen verreweg de meeste ruimte.

De fout: te veel hoofdrollen

De fout die we het vaakst zien, is te veel hoofdrollen.

Vier felle kleuren die allemaal even hard roepen, en de bezoeker weet niet meer waar te kijken.

Vuistregel: neutralen vullen het grootste deel van het scherm, je primaire kleur een kleiner deel, je accentkleur slechts een paar procent.

Die schaarste is precies wat je accent zijn kracht geeft.

Zo ziet die verdeling eruit als je ze uittekent:

Kleur is maar één laag van je huisstijl. De volledige opbouw staat in een huisstijl laten ontwikkelen in stappen.

Hoe kies je een kleurenpalet voor je website in vijf stappen?

Begin bij je positionering en eindig bij een contrasttest, nooit andersom.

Deze volgorde houdt het project kort:

1. Positionering eerst. Wat moet een bezoeker in drie seconden over je denken?
2. Hoofdkleur kiezen. Vanuit sector en onderscheid, zie de tabel hieronder.
3. Neutralen vastleggen. Een tekstkleur, twee grijzen, een achtergrond.
4. Eén accent reserveren. Een kleur die nergens anders op de pagina voorkomt.
5. Contrast toetsen. Elke combinatie van tekst en achtergrond, voor je ze vastlegt.

Bijvoorbeeld: een ingenieursbureau dat precisie wil uitstralen, kiest een diep antraciet als hoofdkleur. Het warme oranje bewaart het voor de knop “Vraag een offerte”.

Wil je de logo- en merkkant er meteen bij nemen? Volg dan het stappenplan voor merkkleuren.

Welke kleur past bij jouw sector?

Je hoofdkleur kies je vanuit je positionering en je sector, niet vanuit je lievelingskleur.

Kleurpsychologie is geen exacte wetenschap.

Betekenis verschilt per cultuur en context.

Maar in een B2B-koopproces waar vertrouwen centraal staat, sturen bepaalde tinten de eerste indruk wel degelijk. Gebruik deze richtlijnen als startpunt, niet als wet:

Blauw is niet toevallig de standaardkeuze in tech, finance, SaaS en consultancy.

Het werkt, maar het is ook veilig.

Meer over de betekenis per kleur lees je in kleurpsychologie in branding.

Durf bewust af te wijken

Belangrijker dan de exacte tint is dat je kleur klopt met wie je bent en met je markt.

Kijk naar je sector, maar durf af te wijken als je wil opvallen.

Een afwijkende hoofdkleur helpt, zolang ze nog steeds vertrouwen uitstraalt.

Zo pakt een donker palet met één paarse accentkleur uit bij een securitybedrijf:

De merkvisual van Aikido Security, zoals op onze casepagina gebruikt (screenshot oktober 2026).

Neutralen dragen bijna het hele beeld, paars zit enkel in het logo. In die case van Aikido Security steeg de conversieratio van de landingspagina met 25%.

Hoe je site oogt, bepaalt mee of mensen je geloven. Meer daarover in vertrouwen wekken met je B2B-website.

Waarom heb je maar een conversiekleur nodig?

Omdat de kracht van je conversiekleur in schaarste zit.

Gebruik je hetzelfde fel oranje voor knoppen, koppen, iconen en vlakken, dan valt de knop die telt niet langer op. Het oog ziet geen hiërarchie meer.

Contrast wint van kleur

De truc is eenvoudig: kies een kleur die afsteekt tegen de rest van je palet. Gebruik die zo goed als uitsluitend voor je primaire call-to-action.

Bijvoorbeeld: op een blauwe site werkt een warm contrast als oranje of geel goed.

Het valt op zonder te vloeken.

De kleur op zich maakt minder verschil dan het contrast met de omgeving.

Een knop converteert niet omdat hij groen of oranje is. Hij converteert omdat hij afsteekt en de bezoeker meteen begrijpt dat dit de volgende stap is.

Hou de knop vrij van ruis

Hou je conversiekleur weg van alle andere visuele ruis.

Een duidelijke, contrasterende knop op een rustige achtergrond presteert bijna altijd beter dan een drukke pagina waar de knop verdrinkt.

Hoe je die knoppen vormgeeft en bewoordt, behandelen we in call-to-action voorbeelden.

Kleur is daarbij maar een laag van een bredere aanpak, zoals in onze UX best practices voor B2B en de gids over conversiegericht webdesign.

Hoe zorg je dat je palet leesbaar en toegankelijk blijft?

Toets elke combinatie van tekst en achtergrond aan de WCAG-norm voor contrast.

Een kleurenpalet is pas af als tekst en knoppen voor iedereen leesbaar zijn. Daarvoor bestaat een harde norm.

De drie drempels van WCAG

De internationale toegankelijkheidsrichtlijnen (WCAG) leggen deze minimale contrastverhoudingen vast:

• Gewone tekst: minstens 4,5 op 1 met de achtergrond.
• Grote tekst: minstens 3 op 1, vanaf 18 punt of 14 punt vet.
• Knopranden en interface-elementen: minstens 3 op 1 tegen aangrenzende kleuren.

Die drempels zijn strikt: 4,499 op 1 haalt de 4,5 niet.

Lichtgrijze tekst op wit mag dan strak ogen, vaak haalt ze die drempel niet. Mensen lezen ze simpelweg slecht.

Zo scoren gangbare combinaties

We berekenden een paar gangbare combinaties met de WCAG-formule, waaronder de kleuren van onze eigen site:

Let op het limegroen van onze eigen site. Zwarte tekst erop haalt 17,2 op 1, witte tekst maar 1,2 op 1.

Vuistregel: kies bij elke accentkleur meteen de tekstkleur die erop komt. Een kleur is pas een knopkleur als die combinatie slaagt.

Waarom dit geen detail is

Slecht contrast kost je echte aanvragen.

Een bezoeker die je tekst of je knop niet vlot leest, haakt af.

Sinds 28 juni 2025 gelden ook wettelijke eisen uit de Europese toegankelijkheidswet. Die richten zich vooral op digitale diensten aan consumenten, zoals webshops en boekingssites.

Toegankelijkheid wordt zo steeds meer een verplichting in plaats van een keuze. Wat dat voor jou betekent, lees je bij digitale toegankelijkheid.

Toets op een slecht scherm, niet op het jouwe

Toets je kleurcombinaties in een contrastchecker voor je ze vastlegt.

Reken niet op je eigen scherm.

Wat op jouw monitor knalt, verdwijnt op een goedkoop laptopscherm in een lichte vergaderzaal.

Je kan een eerste automatische meting doen in PageSpeed Insights. Zo scoort onze eigen site:

Lighthouse-scores voor onze eigen site customerimpact.be in PageSpeed Insights, eind september 2026: toegankelijkheid 96.

De toegankelijkheidsscore van Lighthouse controleert onder meer kleurcontrast. Wil je een snellere eerste blik? Gebruik onze tool om je website op toegankelijkheid te testen.

Meer valkuilen vind je in veelgemaakte toegankelijkheidsfouten.

Vertrouw nooit op kleur alleen

Denk ook aan kleurenblindheid. WCAG zegt het letterlijk: kleur mag niet het enige visuele middel zijn om informatie over te brengen.

Een foutmelding die enkel rood kleurt zonder tekst of icoon, mist een deel van je bezoekers.

Let op: combineer kleur altijd met vorm, tekst of positie. De volledige norm staat in onze uitleg over WCAG.

De korte samenvatting

Een sterk B2B-palet is klein en doelbewust:

• een primaire merkkleur
• een of twee secundaire tinten
• neutralen die het meeste werk doen
• precies één accentkleur

Kies je hoofdkleur vanuit je sector en positionering, maar durf af te wijken om op te vallen.

Hou je conversiekleur schaars zodat ze blijft knallen.

Toets alles op contrast, zodat je site leesbaar en toegankelijk is.

Geen regenboog dus, wel een systeem dat de bezoeker rustig naar de aanvraag leidt.

Inspiratie nodig? Bekijk onze B2B-webdesign voorbeelden.

Twijfel je welk palet bij jouw merk past, of oogt je huidige site te druk? Dat soort keuze maken we in ons webdesign: kleur die leads dient, niet het ego van de designer.

Neem contact op