Kleuren kiezen voor je website is altijd een leuk, maar ook spannend proces. Wat past bij elkaar? Welke kleuren horen bij je onderneming? Hoeveel kleuren moet je gebruiken op je website? Er zijn verschillende tools om kleurencombinaties voor je website te maken, die vind je hier. In dit artikel lees je de beste kleurcombinaties voor je website én hoe je zorgt dat deze kleuren het juiste contrast hebben.
Wat zijn de beste kleuren voor je website?
De beste kleuren voor een website hebben het juiste contrast en hangen af van je doel, doelgroep en merkidentiteit. Hét beste kleurenschema voor iedereen is er dus niet. De manier waarop je de kleuren gebruikt en het kleurcontrast is wel voor alle websites belangrijk. Zo is het gebruikelijk om een basiskleur te kiezen, een ondersteunende kleur en een accentkleur.
De online tools verderop in dit artikel kun je gebruiken om jouw kleurencombinatie te maken.
1. De hoofdkleur van je website
Meestal is er één (soms meer) hoofdkleur op je website. De primaire kleur. Zoals blauw voor vertrouwen, groen voor groei of oranje voor enthousiasme. Elke kleur zorgt voor een ander effect bij je bezoeker. Ook wel de psychologie van kleuren genoemd. Daarom is het belangrijk dat je kleuren kiest die bij jouw onderneming, je merk en je doel passen. Wat wil je uitstralen? Welke boodschap wil je je bezoeker meegeven? Pas de kleuren hierop aan.
Hier de belangrijkste kleuren en de psychologie erachter op een rijtje:
- Rood: Liefde, warmte, kracht en urgentie. Het versnelt de hartslag en stimuleert tot actie.
- Blauw: Geeft vertrouwen, diepte en professionaliteit, en werkt mentaal kalmerend.
- Oranje: Stimuleert, geeft energie, vrolijkheid, warmte en vriendschap.
- Geel: Grijpt de aandacht en staat voor optimisme, zelfvertrouwen en creativiteit.
- Groen: Balans, verfrissing, natuurlijke rust en gezondheid
- Roze: Liefde, medeleven, zorgzaamheid, positiviteit en vrouwelijkheid.
- Paars: Luxe, emotionele balans, spiritualiteit, creativiteit en intuïtie.
- Zwart: Luxe, elegantie, status en rijkdom.
- Wit: Straalt rust, overzicht en zuiverheid uit, maar kan ook als steriel worden ervaren.
Hier lees je meer over de psychologie van kleuren.
2. Ondersteunende kleuren op je website
Ondersteunende kleuren op een website worden gebruikt als achtergrond voor hoofdkleuren en accenten, zodat deze beter opvallen. Kleuren die ondersteunen zijn vaak neutrale tinten, zoals wit, grijs, of lichte kleuren. Deze kleuren verbeteren de leesbaarheid en versterken de boodschap van je website.
3. Accentkleuren voor actieknoppen (CTA’s)
Accentkleuren op een website zijn opvallende, contrasterende kleuren. Accentkleuren worden gebruikt om belangrijke elementen, zoals knoppen, links en meldingen te benadrukken en de aandacht van de gebruiker te trekken.
Deze kleuren worden spaarzaam gebruikt om een visuele hiërarchie te creëren en de bruikbaarheid te verbeteren, zonder de website rommelig te maken. Ze worden vaak gekozen als een complementaire kleur, die tegenover de hoofdkleur op een kleurenwiel staat, om een dynamisch effect te creëren. Klik op de link, vul jouw hoofdkleur in en zie welke complementaire kleur daar bij hoort. Je kunt ook color-hex gebruiken.
De beste kleurencombinaties voldoen aan de WCAG-richtlijn voor kleurcontrast
Welke kleuren er in jouw palet zitten maakt niet heel veel uit (als ze goed bij elkaar en bij jouw merk passen uiteraard), als het contrast en de combinatie maar goed is. Dat is veel belangrijker. Oftewel: De beste kleurencombinaties voor websites voldoen aan de WCAG-richtlijnen voor kleurcontrast.
De WCAG (Web Content Accessibility Guidelines) is de internationale standaard voor digitale toegankelijkheid. Heel handig, want hiermee weet je precies welke kleuren en teksten goed bij elkaar passen, zodat al je bezoekers deze goed kunnen lezen.
Wat zijn de WCAG-richtlijnen voor kleurcontrast?
Het kleurcontrast volgens de WCAG-richtlijnen heeft een minimale contrastverhouding van 4,5:1 voor normale tekst en 3:1 voor grote (18pt of 14pt vetgedrukte) tekst. Het kleurcontrast check je heel makkelijk met een online tool. Ikzelf gebruik graag contrast-ratio.org.
Hiermee zorg je er altijd voor dat er voldoende contrast is tussen tekst en achtergrond, maar ook tussen andere visuele elementen zoals knoppen, iconen en lijnen. En maak je je website super goed leesbaar voor je bezoekers.
Hoe werkt een contrast-checker?
Vul de codes in van de 2 kleuren waarvan je het contrast wilt weten. Bijvoorbeeld wit de achtergrond en de tekstkleur die je wilt gebruiken. Of bijvoorbeeld je primaire kleur die je als achtergrond wilt gebruiken, en de tekstkleur.
Soms denk je dat witte tekst goed leesbaar is op jouw primaire kleur als achtergrond, maar blijkt zwart beter te zijn. Check het ook altijd voor je CTA-knoppen: een goed contrast voor knoppen is heel belangrijk.
Online tools om kleurencombinaties te maken voor je website
Er zijn ontzettend veel online tools om kleurcombinaties te maken, die je kunt gebruiken voor je website. Deze tools heb je eigenlijk alleen nodig als je zelf je eigen kleuren bedenkt voor je website. Als je een grafisch ontwerper hebt die jouw logo en/of huisstijl heeft gemaakt, dan gebruik je uiteraard die kleuren.
Tips voor het gebruik van tools voor kleurenpaletten:
- Een kleurencombinatie kan er in een tool superleuk uitzien, maar op de website helemaal niet goed uitkomen. Check eerst je combinatie live op je website en maak dan pas je keuze.
- Zorg voor een goed contrast tussen kleuren. Hartstikke hip een pastelkleur met witte tekst, maar goed leesbaar is het niet. Check altijd het contrast met een contrastchecker (zoals hierboven beschreven).
- Maak een huisstijl die bij je onderneming en je merkdoel past. Dat kunnen jouw lievelingskleuren zijn, maar dat hoeft helemaal niet. Stel jouw favoriete kleur is roze, maar je doelgroep zijn mensen die fit willen worden door middel van krachttraining, dan is roze daarvoor niet de beste kleur.
De beste tools voor kleurcombinaties voor de huisstijl van je website
Ikzelf gebruik nooit maar één tool voor kleuren, maar een combinatie van. Alle tools hebben specifieke eigenschappen en voor- en nadelen. Maak dus gerust gebruik van meerdere tools voor kleuren, is nog leuk ook!
Canva Color Palette Generator
De Canva Color Palette Generator is een tool om kleuren uit foto’s te halen. Handig als je bijvoorbeeld een fotoshoot hebt gedaan voor je onderneming, en je wilt kleuren die daar goed bij passen. Upload je foto en voilá er rolt een kleurenpalet uit die daarbij past.
Canva Colors
Canva heeft meer kleurentools, namelijk 4 in totaal. Namelijk de kleurenpalet generator van hierboven, kant-en-klare kleurschema’s, een kleurenwiel en kleurenpsychologie. Handig om te vergelijken, mee te spelen en om jouw beste kleuren te vinden.
Paletton
Paletton geeft kleurschema’s op basis van jouw ingevoerde basiskleur. Vervolgens zie je precies welke kleuren daar goed bij passen.
Per gekozen schema toont Paletton meerdere varianten per kleur (lichter, donkerder en verschillende tinten) en je kunt zelfs een complementaire kleur toevoegen.
Dit is één van mijn favoriete tools.
Coolors
Coolors is een snelle kleurenpalet-generator: je klikt of drukt op de spatiebalk om paletten te maken en kleuren die je erin wilt houden vergrendel je. Een leuke en handige tool. Let er wel op dat de kleuren die je uiteindelijk kiest het juiste contrast hebben.
Color Hex
Color Hex is dé kleurentool die je eigenlijk altijd wel een keer nodig hebt. Je gebruikt de tool door een kleur in te voeren en er rolt van alles uit. Zoals verschillende kleurtinten (bijvoorbeeld als je een lichte achtergrondkleur wilt gemaakt uit je hoofdkleur) en bijpassende kleuren. Hiermee kun je zelf een palet samenstellen of simpelweg je gekozen kleur onderzoeken.
ColorSpace
Een superleuke tool waar je een kleur invult en er rollen vervolgens diverse kleurenpaletten uit die daarbij passen. Je kunt ook gradiënten maken uit 2 kleuren.
Colorhunt
Een verzameling van trending en kant-en-klare kleurenpaletten waar je heerlijk doorheen kunt scrollen.
Contrast Ratio en WCAG Color Contrast Checker
Handige tools om het kleurcontrast te checken. Doe dit standaard als je 2 kleuren samen gebruikt. Bijvoorbeeld de achtergrondkleur met witte of zwarte tekst, en de knopkleuren. Zo weet je zeker dat de kleuren die je samen wilt gebruiken goed leesbaar zijn voor iedereen die op je website komt.
Hoe gebruik je de kleuren op je website?
1. Kies een rustige achtergrond
Met een rustige achtergrond komen de primaire en accentkleuren er beter uit. Daarnaast creëert het rust voor je lezer.
2. Gebruik een accentkleur die de aandacht trekt
Accentkleuren gebruik je vaak in actieknoppen, en daar wil je de aandacht op vestigen. En ook andere elementen vragen om aandacht, zoals icoontjes en links in de tekst.
Gebruik de kleuren gelijk verdeeld over de website, zoals één kleur voor alle knoppen. En eventueel een tweede accentkleur voor icoontjes. Zo valt het op zonder chaotisch te worden.
3. Creëer balans op je website
Vul niet je hele website met je primaire kleur, met af en toe een witruimte. Eerder andersom: meer witruimte, een beetje je van je primaire kleur en nog minder van je accentkleur.
Je kunt bijvoorbeeld deze verhouding aanhouden: 70% witruimte, 20% primaire kleur en 10% accentkleur, zodat de website niet te druk wordt.
4. Less is more
Kies eerder voor het gebruik van 3 of maximaal 4 kleuren, dan voor een kleurenpallet met 10 kleuren door elkaar. Ook slechts 1 of 2 kleuren werkt heel goed. Houd het rustig, dat leest prettig en je bezoeker kan zich daardoor focussen op wat er toe doet: de inhoud.
5. Zorg voor genoeg witruimte
Witruimte zorgt voor evenwicht in je website en rust voor je lezer. Het is een soort rustmomentje tussen 2 gekleurde elementen. Daarnaast zorgt witruimte ervoor dat andere elementen, zoals knoppen, teksten en foto’s, juist opvallen. Het houdt de website clean en overzichtelijk. Gebruik dus gerust lekker veel witruimte.
6. Maak je website goed leesbaar
De leesbaarheid van je website is misschien wel het allerbelangrijkste. Zorg er daarom voor dat je teksten goed leesbaar zijn. Experimenteren met allerlei tekstkleuren is daarom niet aan te raden. Houd het simpel: zwart op een witte of lichte achtergrond en wit op een donkere achtergrond.
Twijfel je over je tekstkleur? Vul je kleuren in in de contrastchecker en je weet of je wit of zwart moet gebruiken.
7. Gebruik de juiste kleuren voor knoppen
Je wilt dat je actieknoppen (CTA) goed opvallen, dat bereik je door een kleur te kiezen die tegenover je hoofdkleur staat, zodat de knop eruit springt. Of je maakt de knop juist minder opvallend, zodat de website een meer rustige uitstraling krijgt zonder pusherig over te komen. Als de knop maar een duidelijke andere kleur heeft dan de hoofdkleur.
8. Vergeet je foto’s niet
Het is een goed idee als je je foto’s bij je huisstijlkleuren laat passen, of andersom natuurlijk. Je kunt kleuren uit foto’s halen, of je foto’s laten maken met jouw kleurenpalet in je achterhoofd. Zorg er in ieder geval voor dat alles goed bij elkaar past. Dus geen roze website met knalrode foto’s.
Meer tips over de gebruiksvriendelijkheid van je website vind je hier.
