Website kleuren kiezen: zo maak je een goed kleurenpalet

Kies voor je website één hoofdkleur uit je logo of huisstijl, één opvallende accentkleur voor knoppen en links, en een paar neutrale kleuren voor tekst en achtergrond. Zorg dat tekst genoeg contrast heeft met de achtergrond en gebruik elke kleur op elke pagina op dezelfde manier. Dan oogt je site rustig en herkenbaar.

In het kort

• Haal je hoofdkleur uit je logo of huisstijl, zodat klanten je herkennen.
• Gebruik één accentkleur alleen voor knoppen, links en andere acties.
• Houd tekst en achtergrond neutraal en controleer het contrast met een contrastchecker.
• Gebruik kleur nooit als enige manier om iets duidelijk te maken, zoals een verplicht veld.

Waarom de kleuren van je website ertoe doen

Kleuren bepalen mee hoe je bedrijf overkomt: zakelijk of speels, rustig of uitgesproken. Ze zorgen ook voor herkenning. Een klant die je bus, je visitekaartje of je Google Bedrijfsprofiel kent, herkent je website sneller als daar dezelfde kleuren terugkomen.

Kleur heeft ook een praktische functie. Een knop in een opvallende kleur laat zien waar de bezoeker kan klikken, en genoeg contrast maakt tekst leesbaar, ook op een telefoon buiten in de zon.

Welke associaties roepen kleuren op?

Mensen verbinden kleuren met bepaalde eigenschappen, al verschilt dat per persoon, branche en cultuur. Gebruik het overzicht hieronder als hulpmiddel en kijk ook naar de kleuren van concurrenten in je regio. Kiest iedereen in je branche blauw, dan val je met een andere kleur meer op.

Zo stel je een kleurenpalet samen

Een palet is de vaste set kleuren die je op je hele site gebruikt. Met deze stappen stel je er een samen.

1. Begin bij je logo en huisstijl. Noteer de kleurcodes, de hexcodes die beginnen met een hekje (bijvoorbeeld #1E3A5F). Heb je nog geen huisstijl, kies dan eerst één hoofdkleur die past bij hoe je wilt overkomen.
2. Kies één accentkleur voor knoppen en links, zoals 'Bel direct' of 'Offerte aanvragen'. Gebruik die kleur verder spaarzaam, zodat de knoppen opvallen.
3. Kies neutrale kleuren voor tekst en achtergrond, bijvoorbeeld wit of lichtgrijs voor de achtergrond en donkergrijs voor de tekst.
4. Houd het beperkt. Met een hoofdkleur, een accentkleur en twee of drie neutrale tinten kom je meestal uit. Meer kleuren maken een site al gauw druk.
5. Leg het palet vast met de kleurcodes, zodat je webbouwer, je drukker en jij dezelfde kleuren gebruiken.
6. Bekijk het resultaat op je telefoon en op een computerscherm voordat je het definitief maakt.

Werk je met een websitebouwer, kies dan een template waarvan je de kleuren zelf kunt aanpassen. Welke bouwers er zijn, lees je in zelf een website maken met een websitebouwer. Kleuren werken het best als ook de opbouw van je site klopt; zie hoe je je website-indeling bepaalt.

Let op contrast en leesbaarheid

Tekst moet goed leesbaar zijn tegen de achtergrond. De internationale richtlijn voor toegankelijke websites (WCAG) vraagt een contrastverhouding van minimaal 4,5 op 1 voor gewone tekst en 3 op 1 voor grote tekst, vanaf 18 punt of 14 punt vet (W3C).

Gebruik kleur ook nooit als enige manier om iets duidelijk te maken. Markeer een verplicht veld in een formulier bijvoorbeeld met een sterretje of een woord erbij, zodat ook mensen die kleuren slecht onderscheiden het zien (W3C).

Voor een deel van de bedrijven is toegankelijkheid verplicht. Sinds 28 juni 2025 moeten websites en apps waarop klanten producten of diensten kopen, afsluiten of reserveren toegankelijk zijn als je 10 of meer mensen in dienst hebt en/of meer dan 2 miljoen euro jaaromzet (ACM). Meer over een site die prettig werkt voor bezoekers lees je in de checklist voor een gebruiksvriendelijke website.

Handige tools om kleuren te kiezen

• Met Adobe Color kies je kleuren op een kleurenwiel met harmonieën, zoals complementaire en analoge kleuren. Je kunt er ook kleuren uit een foto halen, het contrast controleren en bekijken hoe je palet overkomt bij verschillende vormen van kleurenblindheid.
• Coolors maakt met een druk op de spatiebalk steeds een nieuw palet. Bijna alle functies zijn gratis, met een limiet op het aantal paletten dat je kunt opslaan.
• In de Contrast Checker van WebAIM vul je twee kleurcodes in en zie je of de combinatie voldoet aan de contrasteisen voor gewone en grote tekst.

Kies foto's die bij je kleuren passen

Je kleuren komen ook terug in je foto's. Kies beelden waarin je hoofdkleur of accentkleur terugkomt, of beelden met rustige, neutrale tinten, zodat ze niet vloeken met de rest van de site. Eigen foto's van je werk, je team of je zaak zeggen vaak meer dan foto's uit een beeldbank. Waar je rechtenvrije foto's vindt, lees je in gratis rechtenvrije foto's.

Een website met je eigen kleuren via Places

Laat je je website maken, neem je logo en kleurcodes dan mee in de opdracht. Bij Website Basis van Places kies je uit tien thema's voor een site van twee pagina's, voor 29 euro per maand plus 95 euro opstartkosten. Alle pakketten staan op de pagina websitepakketten.

Veelgestelde vragen over website kleuren

Welke kleuren zijn het beste voor een website?

Er is geen kleur die voor elke site het beste werkt. Kies kleuren die passen bij je logo en bij hoe je wilt overkomen, en zorg voor genoeg contrast tussen tekst en achtergrond. Een rustige basis van wit of lichtgrijs met één opvallende accentkleur is voor veel bedrijfssites een goede keuze.

Hoeveel kleuren gebruik je op een website?

Meestal een hoofdkleur, een accentkleur en twee of drie neutrale tinten voor tekst en achtergrond. Met meer kleuren wordt een site snel onrustig en vallen je knoppen minder op.

Welke kleur geef je een knop?

Geef knoppen een accentkleur die je verder weinig gebruikt, zodat ze opvallen. Let ook op het contrast tussen de knop en de tekst erop: de WCAG vraagt minimaal 4,5 op 1 voor gewone tekst (W3C).

Hoe controleer je of je kleuren genoeg contrast hebben?

Vul de kleurcodes van je tekst en je achtergrond in bij een contrastchecker, zoals die van WebAIM. Je ziet dan direct of de combinatie voldoet aan de eisen voor gewone en grote tekst.

Bijgewerkt op 1 november 2026.

Bronnen: W3C (WCAG 2.1, contrast en gebruik van kleur), ACM (digitale toegankelijkheid) en de websites van Adobe Color, Coolors en WebAIM.