Hoe kies je de juiste kleuren voor je website? Zo stel je een kleurenpalet samen

De uitstraling van je website wordt voor een groot deel bepaald door kleurgebruik. Maar kleuren hebben ook de functie om sturing te geven aan je websitebezoekers. Door contrast aan te brengen laat je elementen die belangrijk zijn opvallen. Denk aan buttons die opvallen omdat ze een andere (opvallende) kleur hebben ten opzichte van omliggende elementen.

In dit artikel leggen we uit hoe jij een kleurenpalet samenstelt die past bij jouw merk. Aan de hand van kleurtheorieën en met behulp van een aantal handige tools kan ook jij een kleurenpalet samenstellen waarmee je website de show steelt.

Onze associaties met kleuren

Elke kleur roept bepaalde gevoelens of ideeën op. Dat gebeurt vaak zonder dat je er zelf bij stilstaat. Als je een website maakt of een merk een eigen uitstraling wilt geven, is het handig om te weten wat kleuren met mensen doen. Denk eens na: wat wil je dat je bezoekers voelen? En welk gedrag wil je uitlokken?

Hieronder zie je wat kleuren vaak uitstralen:

• Groen: rijkdom, natuur, gezondheid, een gevoel van overvloed
• Geel: creatief, vrolijk, optimistisch en benaderbaar
• Zwart: stijlvol, krachtig, soms somber, maar ook vol controle
• Roze: warm, zacht, oprecht en zorgzaam
• Oranje: speels, gezellig, vrijheid, speels
• Wit: schoon, helder, rustig en puur
• Paars: trouw, luxe, een tikje mysterieus, creatief en chic
• Blauw: logisch, betrouwbaar, vredig, professioneel en rustig
• Rood: spannend, vol energie, krachtig en soms gevaarlijk
• Bruin: veilig, natuurlijk, beschermend en steunend

Natuurlijk hoeft niet iedereen kleuren op precies dezelfde manier te ervaren, maar dit overzicht kan je wel helpen bij het maken van keuzes. De juiste kleur zorgt ervoor dat je boodschap beter overkomt — zonder dat je daar extra woorden voor nodig hebt.

Gebruik de 60-30-10-regel

De 60/30/10-regel helpt je om kleuren op een slimme en evenwichtige manier te gebruiken. 60% van je ontwerp bestaat uit een hoofdkleur, 30% uit een of meerdere steunkleuren en 10% uit een opvallende accentkleur. Je hoeft dus niet per se maar drie kleuren te kiezen — je kunt bijvoorbeeld twee kleuren gebruiken als steunkleur, zolang de totale verdeling in balans blijft. Deze aanpak zorgt voor rust in je ontwerp, maakt belangrijke onderdelen beter zichtbaar (zoals knoppen of links) en geeft structuur aan je website.

Deze richtlijn wordt niet alleen voor webdesign gebruikt, maar ook interieurdesigners maken er bijvoorbeeld gebruik van.

Voorbeelden van kleurgebruik volgens de 60-30-10-richtlijn

Hieronder een aantal voorbeelden van websites die zijn opgebouwd aan de hand van de 60-30-10-richtlijn.

Revolut gebruikt blauw als hoofdkleur, wit als steunkleur, en zwart als accentkleur.

Douwe Egberts gebruikt beige als hoofdkleur, wit als steunkleur, en donkerrood als accentkleur.

Tony Chocolony gebruikt blauw als hoofdkleur, geel als steunkleur, en zwart en wit als accentkleur.

Kies voor contrasterende kleuren

Stel je kleurenpalet samen op basis van contrasterende kleuren. Tekst en elementen zoals buttons moeten goed zichtbaar zijn ten opzichte van de achtergrondkleur waarop ze liggen. Zo is een witte tekst goed leesbaar wanneer de achtergrond donker is. Maar als je bijvoorbeeld twee lichte kleuren combineert, dan kan de ene kleur ten opzichte van de andere wegvallen waardoor tekst niet goed leesbaar is of waardoor een button niet opvalt.

Op de website van WebAIM staat een handige contrast checker. De tool geeft een score die aangeeft of het contrast groot genoeg is om te voldoen aan toegankelijkheidsvoorwaarden.

Tools om een kleurenpallet samen te stellen

De website Coolers en het kleurenwiel van Adobe kunnen je helpen om een kleurenpalet samen te stellen.

Kleurenpalet maken met Coolers

De tool van Coolers gebruik je op de volgende manier:

1. Start de generator
   Ga naar coolors.co en klik op “Start the generator”. Je ziet nu een rij van vijf kleuren. Druk op de spatiebalk om een nieuw palet te genereren. Elke keer dat je dit doet, krijg je een nieuwe combinatie van kleuren.

2. Kleuren vastzetten
   Zie je een kleur die je mooi vindt? Klik dan op het slot-icoontje onder die kleur om deze vast te zetten. Als je daarna op de spatiebalk drukt, blijven de vastgezette kleuren hetzelfde en veranderen alleen de andere kleuren.

3. Kleuren aanpassen
   Klik op een kleur om de kleurcode te bekijken en aan te passen. Je kunt de kleur handmatig wijzigen door een andere code in te voeren of door de schuifregelaars te gebruiken.

4. Kleuren toevoegen of verwijderen
   Wil je meer of minder dan vijf kleuren in je palet? Klik op het plus-icoontje om een kleur toe te voegen of op het kruisje om een kleur te verwijderen. Je kunt maximaal tien kleuren in één palet hebben.

5. Kleuren uit een afbeelding halen
   Heb je een foto met mooie kleuren? Klik op het camera-icoontje om een afbeelding te uploaden. Coolors haalt automatisch de belangrijkste kleuren uit de afbeelding en maakt er een palet van.

6. Contrast controleren
   Gebruik de ingebouwde contrastchecker om te zien of de kleuren in je palet voldoende contrast hebben. Dit is belangrijk voor de leesbaarheid, vooral voor mensen met een visuele beperking.

7. Palet opslaan of exporteren
   Ben je tevreden met je palet? Je kunt het opslaan als je een gratis account aanmaakt. Daarnaast kun je het palet exporteren in verschillende formaten, zoals PNG, PDF of SVG.

Adobe color wheel

Met deze tool kun je op een makkelijke manier kleuren kiezen die goed bij elkaar passen. Zo werkt het:

1. Kies een kleurharmonie
   Boven het kleurenwiel zie je verschillende opties zoals analoog, monochromatisch, complementair of triade. Dit zijn manieren waarop kleuren met elkaar gecombineerd kunnen worden. De tool past automatisch je kleuren aan op basis van de stijl die je kiest.

2. Versleep de rondjes op het wiel
   In het midden zie je een groot kleurenwiel met vijf rondjes. Je kunt die rondjes verslepen om de kleuren aan te passen. De tool zorgt ervoor dat de andere kleuren netjes meegaan, zodat het palet mooi in balans blijft.

3. Bekijk de kleurcodes
   Onderaan zie je van elke kleur de bijbehorende hexcode (zoals #f8eddb). Die kun je kopiëren en gebruiken op je website.

4. Kleuren uit een afbeelding halen
   Je kunt ook een foto uploaden (klik op het camera-icoontje linksboven) en Adobe Color haalt daar automatisch de mooiste kleuren uit. Superhandig als je bijvoorbeeld kleuren wilt afstemmen op een logo of sfeerbeeld.

5. Sla je palet op of exporteer het
   Heb je een mooi kleurenpalet gemaakt? Dan kun je het opslaan (als je een gratis Adobe-account hebt) of gewoon de kleurcodes kopiëren om meteen te gebruiken.

Conclusie:

Het kiezen van de juiste kleuren voor je website lijkt misschien lastig, maar met een beetje kennis en de juiste tools kom je al een heel eind. Door te gebruik te maken van contrast,  de 60/30/10-regel toe te passen en door rekening te houden met de associaties die mensen hebben bij bepaalde kleuren kan ook jij een kleurenpalet samenstellen die past bij je website en bedrijf.