Kleuren kiezen voor je website

Een van de kenmerken van een goede website is, naast goede content en typografie, het juiste gebruik van kleuren. In het item Over kleurgebruik op je website heb ik daar het een en ander over geschreven.

Het belangrijkste punt bij het kiezen van kleuren is: Beperk je in het aantal (hoofd-)kleuren. Als je er meer dan zes hebt, ben je waarschijnlijk niet goed bezig.Ik heb echter sites gezien die tien hoofdkleuren hebben, en die er toch goed uitzien. Ik heb echter ook websites gezien die maar drie hoofdkleuren gebruiken en die ik foeilelijk vind.

Als voorbeeld van een kleurenpalet staat hier onder het palet van deze website met daarbij de hexadecimale kleurcode:

#e4e9f6 #ffffd8 #ddffdd

Het palet heeft de drie hoofdkleuren: Paarsblauw, Geel en Groen.
Om de kleuren los te maken van de achtergrond is een neutraalgrijze achtergrond gebruikt.

Behalve de hoofdkleuren kun je / moet je ook andere kleuren ('nevenkleuren') gebruiken. Zo zie je op deze website de kleur zeegroen (#0099A8), bijvoorbeeld in de rafelranden tussen de gele en paarsblauwe kolommen. Voor de koppen en zaken die aandacht vragen gebruik ik steenrood (maroon, #800000 en marine (navy, #000080). Soms gebruik ik daar ook andere kleuren voor, zoals helder rood (#ff0000).

Kleuraccenten (kleine 'stukjes' met een sterk contrasterende kleur) zijn met name belangrijk om de site levendiger te maken of om de aandacht te trekken. Een website die is opgemaakt met een zwart en een paar tinten grijs op een witte achtergrond, is gebaat bij wat rode accenten. Als je het rood echter vervangt door groen of blauw, wordt de site ineens heel anders van karakter.

Wees consequent bij het toepassen van nevenkleuren en kleuraccenten, anders wordt het al gauw een rommeltje.
N.B.: De hexadecimale codes voor kleuren worden beschreven in het item Kleurcodes voor tekst, links en achtergrond.

Het kiezen van een goed palet voor de hoofdkleuren is niet gemakkelijk. Hieronder een paar dingen om je af te vragen bij het kleurenpalet:

Als je een kleurenpalet moet kiezen en om inspiratie verlegen zit, kan het helpen om eens te kijken naar wat anderen hebben gebruikt. In de loop der jaren heb ik een aantal paletten verzameld, die je kunt raadplegen met een applicatie die ik daarvoor heb ontwikkeld. Druk op de knop hiernaast.
De paletten staan in willekeurige volgorde. Als in een palet een donkere (bijna zwarte), of juist een lichte (bijna witte) kleur voorkomt, dan kan dat de tekstkleur zijn. Daarin ben ik niet helemaal consequent geweest bij het verzamelen van de paletten.
De verzameling wordt nog verder uitgebouwd.

Op het worldwide web zijn goede sites te vinden waar je zelf een kleurenpalet kunt samenstellen, bijvoorbeeld Color safe en Coolors.

 
terug

html-387; Laatste wijziging: 21 mei 2020