Kleurenpalet kiezen voor je B2B-website (zonder regenboog)

Een goed kleurenpalet voor je B2B-website bestaat uit drie lagen: een primaire kleur die je merk draagt, een of twee secundaire kleuren die rust en structuur geven, en precies een accentkleur die je bewaart voor de actie die telt. Geen regenboog, geen tien tinten die om aandacht vechten, maar een klein, doelbewust systeem. In dit artikel lees je hoe je dat systeem opbouwt, hoe je per sector een hoofdkleur kiest, en waarom je conversiekleur apart moet staan van de rest.

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, geen doel. Een palet dat er prachtig uitziet maar je belangrijkste knop laat wegvallen, is een slechte keuze. Vanuit die bril bekijken we het hele verhaal. 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?

Een professioneel palet is een systeem met vaste rollen, niet een verzameling kleuren die je mooi vond. Geef elke kleur een taak, dan voorkom je dat je site rommelig oogt. Het simpelste werkbare systeem voor B2B ziet er zo uit.

• Primaire kleur: je merkkleur, de toon die mensen onthouden. Die zie je terug in je logo, koppen en belangrijke vlakken.
• Secundaire kleur(en): een of twee ondersteunende tinten die structuur en rust geven, bijvoorbeeld voor achtergronden, secties of kaders.
• Neutralen: een reeks grijzen, een bijna-wit en een bijna-zwart voor tekst, lijnen en achtergronden. Dit is het stille werkpaard van je site en vult verreweg de meeste ruimte.
• Accent- of conversiekleur: een enkele, opvallende kleur die je bewust schaars houdt voor knoppen en links die je wil laten klikken.

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. Een handige vuistregel is een verdeling waarbij neutralen het grootste deel van het scherm vullen, je primaire kleur een kleiner deel, en je accentkleur slechts een paar procent. Die schaarste is precies wat je accent zijn kracht geeft.

Welke kleur past bij jouw sector?

Je hoofdkleur kies je op basis van je positionering en je sector, niet op basis van je lievelingskleur. Kleurpsychologie is geen exacte wetenschap en betekenis verschilt per cultuur en context, maar in een B2B-koopproces waar vertrouwen en geloofwaardigheid centraal staan, sturen bepaalde tinten de eerste indruk wel degelijk. Gebruik deze richtlijnen als startpunt, niet als wet.

• Blauw straalt betrouwbaarheid, stabiliteit en kalmte uit. Het is niet toevallig de standaardkeuze in tech, finance, SaaS en consultancy. Het werkt, maar het is ook veilig en alomtegenwoordig, dus je valt er zelden mee op.
• Groen verbindt zich met groei, duurzaamheid, gezondheid en evenwicht. Sterk voor cleantech, agri, healthcare en alles met een duurzaamheidsverhaal.
• Zwart, grijs en diepe tinten lezen als premium, precies en zakelijk. Passend voor engineering, industrie, architectuur en high-end dienstverlening.
• Paars wordt vaak gelinkt aan creativiteit en een zekere durf, handig als je je net wil onderscheiden van de blauwe massa in je markt.
• Rood en oranje trekken aandacht en geven energie, maar zijn als hoofdkleur in B2B riskant omdat ze ook urgentie of waarschuwing kunnen oproepen. Ze werken vaak beter als accent dan als merkbasis.

Belangrijker dan de exacte tint is dat je kleur klopt met wie je bent en met de markt waarin je speelt. Kijk naar je sector, maar durf er bewust van af te wijken als je je wil onderscheiden. Een afwijkende hoofdkleur kan je net helpen opvallen, zolang ze nog steeds vertrouwen uitstraalt. Want hoe je site oogt, bepaalt mee of mensen je geloven. Meer daarover lees je in vertrouwen wekken met je B2B-website.

Waarom heb je maar een conversiekleur nodig?

Je conversiekleur is de kleur die je reserveert voor de actie die telt, en haar kracht zit in schaarste. Gebruik je hetzelfde fel oranje voor je knoppen, je koppen, je iconen en je accentvlakken, dan valt de knop die je echt wil laten klikken niet langer op. Het oog ziet geen hiërarchie meer.

De truc is eenvoudig: kies een kleur die voldoende afsteekt tegen de rest van je palet en gebruik die zo goed als uitsluitend voor je primaire call-to-action. Op een blauwe site werkt een warm contrast als oranje of geel goed, omdat het opvalt zonder te vloeken. De kleur op zich maakt overigens minder verschil dan het contrast: een knop converteert niet omdat hij groen of oranje is, maar omdat hij duidelijk afsteekt tegen alles eromheen en de bezoeker meteen begrijpt dat dit de volgende stap is.

Hou daarom je conversiekleur weg van alle andere visuele ruis. Een pagina met een duidelijke, contrasterende knop op een rustige achtergrond presteert bijna altijd beter dan een drukke pagina waar de knop verdrinkt. Hoe je die knoppen verder vormgeeft en bewoordt, behandelen we in call-to-action voorbeelden. Kleur is daarbij maar een laag van een bredere conversiegerichte aanpak, zoals beschreven in onze UX best practices voor B2B.

Hoe zorg je dat je palet leesbaar en toegankelijk blijft?

Een kleurenpalet is pas af als tekst en knoppen voor iedereen leesbaar zijn, en daarvoor bestaat een harde norm. De internationale toegankelijkheidsrichtlijnen (WCAG) schrijven voor dat gewone tekst minstens een contrastverhouding van 4,5 op 1 heeft met de achtergrond, en grote tekst minstens 3 op 1. Voor knopranden en interface-elementen geldt ook minstens 3 op 1. Lichtgrijze tekst op wit mag dan strak ogen, vaak haalt ze die drempel niet en lezen mensen ze simpelweg slecht.

Dit is geen detail voor de designafdeling. Slecht contrast kost je echte aanvragen, want een bezoeker die je tekst of je knop niet vlot leest, haakt af. En sinds 2025 stelt de Europese toegankelijkheidsrichtlijn voor steeds meer digitale diensten ook wettelijke eisen, dus toegankelijkheid is in toenemende mate een verplichting in plaats van een keuze. Toets je kleurcombinaties daarom in een contrastchecker voor je ze vastlegt, en reken niet op je eigen scherm: wat op jouw monitor knalt, kan op een goedkoop laptopscherm in een lichte vergaderzaal verdwijnen. Meer fouten om te vermijden vind je in veelgemaakte toegankelijkheidsfouten.

Denk daarbij ook aan kleurenblindheid: vertrouw nooit op kleur alleen om iets duidelijk te maken. Een foutmelding die enkel rood kleurt zonder tekst of icoon, mist een deel van je bezoekers. Combineer kleur altijd met vorm, tekst of positie.

De korte samenvatting

Een sterk B2B-palet is klein en doelbewust: een primaire merkkleur, een of twee secundaire tinten, een set neutralen die het meeste werk doen, en precies een accentkleur die je bewaart voor je belangrijkste actie. 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, en 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.

Twijfel je welk palet bij jouw merk en doelgroep past, of wil je een bestaande site die te druk oogt terugbrengen tot een helder systeem? Dat is precies het soort keuze waar wij in ons webdesign op sturen: kleur die leads dient, niet het ego van de designer.

Plan je gratis intake