Op een website heeft elke kleur een taak: achtergrond, tekst, knoppen, links en meldingen. Deze 12 paletten zijn daarvoor gemaakt, met een lichte of donkere achtergrond, een goed leesbare tekstkleur en een accent voor knoppen. Kopieer de HEX-codes direct naar je CSS of je websitebouwer.
Strak SaaS-blauw
Bijna witte achtergrond, heel donkerblauwe tekst en knoppen in helder blauw.
Sober zakelijk
Voor advocatenkantoren, adviesbureaus of industriële bedrijven.
Warme webshop
Oranje laat de koopknoppen opvallen op een warme achtergrond.
Dark mode met groen
Gelaagde donkere achtergronden, lichte tekst en een groen accent voor acties.
Natuurlijk en biologisch
Voor winkels met natuurproducten, moestuinen of wellness.
Vriendelijk pastel
Toegankelijk; het donkere blauwgrijs houdt de tekst leesbaar.
Redactioneel met rood
Voor blogs, tijdschriften en nieuwssites; rood markeert links en koppen.
Technologisch paars
Veel gezien bij digitale producten, online cursussen en AI-tools.
Turquoise en koraal
Twee complementaire accenten: één voor knoppen en één voor meldingen.
Donkere luxe
Voor hotels, restaurants of premium merken waar foto's de hoofdrol spelen.
Zorg en welzijn
Schoon en rustig; goed voor klinieken en therapeuten.
Zand en blauwgroen
Warm en serieus tegelijk; voor toerisme, makelaars of koffiezaken.
Tik op een kleur om de HEX-code te kopiëren. Met het potloodicoon open je het palet in de editor om het aan te passen.
Pas de 60-30-10-regel toe
Gebruik de dominante kleur (meestal de achtergrond) op ongeveer 60% van de pagina, een secundaire kleur op 30% (secties, kaarten, header) en het accent op de overige 10%. Bewaar het accent voor knoppen en links, zodat bezoekers weten waar ze moeten klikken.
Controleer het contrast van je tekst
De WCAG-richtlijnen voor toegankelijkheid vragen een minimaal contrast van 4,5:1 voor gewone tekst. Lichtgrijs op wit ziet er chic uit, maar leest lastig, vooral op een telefoon in de zon. Gebruik een contrastchecker voordat je publiceert.
Kies kleuren voor statussen en meldingen
Naast je merkpalet heeft een website kleuren nodig voor fouten (rood), succes (groen) en waarschuwingen (geel of oranje). Kies varianten die bij je palet passen en gebruik ze overal op dezelfde manier in formulieren en berichten.
Meestal zijn drie of vier genoeg: een achtergrond, een tekstkleur, een hoofdkleur en een accent, plus de kleuren voor meldingen.
Welke kleur is het best voor knoppen op een website?
Er is niet één beste kleur; het belangrijkste is dat de knop contrasteert met de achtergrond en dat je die kleur nergens anders op de pagina voor gebruikt.
Hoe zet ik een kleurenpalet op mijn website?
Kopieer de HEX-codes naar de kleurvariabelen in je CSS of naar de globale kleurinstellingen van je websitebouwer, zoals WordPress, Wix of Shopify.