Ga je met een eigen website aan de slag, dan heb je meer nodig dan alleen een sterk domein en een geschikt hostingpakket. Mensen vellen onbewust binnen 90 seconden hun oordeel over je website. Daarmee is de vormgeving hiervan erg belangrijk. Bovendien is tussen de 62% en 90% van de eerste indruk enkel gebaseerd op kleur. Daarom deze blogserie over vormgeving. In deel 1 leggen we uit hoe je kleurgebruik op je website in jouw voordeel gebruikt.
Inhoudsopgave
Met kleur prikkel je bezoekers visueel, roep je positieve of negatieve associaties op en kun je zelfs conversie beïnvloeden. Het kiezen van de juiste kleuren op je website, is dus meer dan alleen een esthetische keuze. Soms is de werking van kleur heel persoonlijk, maar meestal zijn er overeenkomsten qua kleurbeleving die voor een groter publiek gelden. Deze worden dieper omschreven door middel van kleurenpsychologie.
Wat is kleurenpsychologie?
Kleurenpsychologie onderzoekt hoe verschillende kleuren stemming en gedrag kunnen beïnvloeden. Het geeft antwoord op de vraag welke uitwerking ze hebben op emoties, ervaringen en zelfs fysieke reacties. Dit wordt gebruikt in marketing, binnenhuisarchitectuur, (geestelijke) gezondheidszorg en in dit geval ook in website-ontwerp.
De basis met neutrale kleuren
Neutrale kleuren zet je het beste in als basis. In combinatie met andere warme of koele kleuren vul je de verdere sfeer van je website in.
Zwart
Zwart is functioneel en modern. Het is een intimiderende kleur die autoriteit uitstraalt en symboliseert luxe en elegantie.
Wit
De kleur wit wordt voornamelijk geassocieerd met zuiverheid, onschuld en perfectie. Wit is daardoor een populaire kleur in de trouwbranche. Voor minimalistische ontwerpen is wit vrijwel onmisbaar.
Grijs
Grijs wordt vaak als saai gezien, maar is juist elegant, tijdloos en zeer veelzijdig. Deze kleur kan namelijk zowel warme als koude eigenschappen aannemen.
Bruin
Bruine nuances zijn neutraal, natuurlijk en sfeervol. Meestal wordt het ingezet als een warme kleur, maar je kunt er ook voor kiezen om de bruintint koeler te maken. Daardoor is het een uitgesproken basiskleur.
Geef je website kleur en warmte
Rood, geel en oranje zijn warme kleuren en hebben een stimulerende werking op onze emoties. Warme kleuren vallen op en worden daardoor vaak opzettelijk gebruikt om bezoekers tot actie aan te sporen.
Rood
De kleur rood wordt voornamelijk geassocieerd met liefde, passie en gevaar. Rood komt op je af en trekt als geen andere kleur de aandacht. Het is daardoor een geschikte kleur om aan je call to action toe te wijzen.
Geel
Geel staat voor geluk en optimisme. Het is een vrolijke en energieke kleur welke positiviteit stimuleert. Daarnaast associëren we de kleur geel vaak met korting en voordelige aankopen.
Oranje
Oranje straalt warmte en positiviteit uit. Het komt over als een jeugdige en energieke kleur. Mensen associeren oranje tinten ook met het najaar.
Roze
De warme kleur roze heeft een onschuldig en zacht karakter. Het is de kleur van onvoorwaardelijke liefde, zorgzaamheid en medeleven. Daarbij staat het symbool voor romantiek en vrouwelijkheid.
Rust met koele kleuren
Koele kleuren hebben in tegenstelling tot warme kleuren een kalmerende werking op onze emoties. Blauw, paars en groen – maar ook zwart en wit – worden als koude kleuren bestempeld. Ze zijn daardoor zeer geschikt als bijvoorbeeld achtergrond voor je website.
Blauw
Blauw heeft een kalmerend en ontspannend effect. Deze kleur komt serieus over en symboliseert vrede, vertrouwen, vrijheid, diepgang, harmonie, trouw en verlangen.
Paars
Paars is de kleur van spiritualiteit en verbeelding. Het wordt vaak geassocieerd met extravagantie, exclusiviteit en luxe.
Groen
Groen is de meest evenwichtige kleur. Hij bevindt zich namelijk in het midden van het kleurenspectrum. Groen staat voor welvaart, harmonie en gezondheid. Deze tint werkt kalmerend op lichaam en geest en wordt geassocieerd met groei.
Context en cultuur
De context waarin een kleur wordt toegepast, is vaak doorslaggevend. Zo vinden wij de kleur blauw wellicht mooi voor bepaalde producten zoals auto’s of muurverf, maar wordt deze kleur in combinatie met voedsel al snel als onsmakelijk beschouwd.
Ook culturele kenmerken spelen een belangrijke rol. Zo wordt de kleur rood in het Verre Oosten geassocieerd met geluk en fortuin, maar in West-Europa voornamelijk met hartstocht en gevaar. Wees je daarvan dus bewust bij een internationale doelgroep!
Het kleurenwiel
Inmiddels weet je hoe kleuren worden ervaren. Nu is het tijd om naar de basis van vormgeving met kleuren te kijken; het kleurenwiel. Deze bestaat uit twaalf kleuren. Daarop zijn rood, blauw en geel de primaire kleuren. Meng je de primaire kleuren met elkaar, dan krijg je de secundaire kleuren. Dit zijn oranje, groen en paars. Meng je vervolgens de de primaire met de secundaire kleuren, dan maak je tertiaire kleuren.
Daarnaast kun je ook wit, zwart of grijs toevoegen om de kleur nog verder te veranderen. Daarmee krijg je lichte of donkere tinten. Zo creëer je oneindig veel kleurvariaties!
Kleurharmonie
Met behulp van een aantal basisregels stem je kleuren goed op elkaar af om het perfecte kleurenschema voor je website samen te stellen. Deze regels bieden je een houvast om een schema te kiezen dat goed past bij het doel van jouw website. Zorg er daarom voor dat je een duidelijk beeld hebt van wat je met jouw website wenst te bereiken en uit te stralen.
Monochroom
Een monochroom kleurenschema bestaat uit verschillende tinten en verzadigingen van een basiskleur uit het kleurenwiel. Hieronder wordt dit geïllustreerd met vier tinten rood.
Analoog
Analoge kleuren staan naast elkaar op het kleurenwiel. Daardoor creëren ze een gevoel van harmonie en samenhang. Hieronder zie je hoe geel, lichtoranje en oranje analoog met elkaar verbonden zijn.
Complementair
Complementaire kleuren staan recht tegenover elkaar in het kleurenwiel en creëren contrast. Dit heeft een opvallend resultaat. Deze regel is zeer geschikt voor een strategie waarbij je oproept tot actie.
Split-complementair
Bij split-complementair combineer je een primaire kleur met twee analoge kleuren. Dit is een variatie op het complementair kleurenschema. De kleuren vormen een ongelijkbenige driehoek met elkaar in het kleurenwiel.
Triadisch
Bij deze strategie gebruik je drie kleuren die altijd een gelijkbenige driehoek vormen in het kleurenwiel. Hieronder zijn dat rood, blauw en geel, maar je zou net zo goed voor paars, oranje en groen kunnen kiezen.
Tetradisch
Met een tetradisch kleurenschema gebruik je twee paren van complementaire kleuren die in een vierkant of rechthoek in het kleurenwiel staan. Tetradische kleurenschema’s zorgen daarom voor zowel harmonie als contrast.
60/30/10-regel
Je gebruikt hierbij een hoofdkleur, een tweede kleur en een accentkleur. De getallen in deze regel staan voor de verhoudingen waarin die kleuren worden gebruikt, dus 60%, 30% en 10%. Dit hulpmiddel wordt veel gebruikt bij interieurstyling om balans te creëren.
Als hoofdkleur kies je een neutrale kleur die bijvoorbeeld als achtergrond wordt gebruikt. Koude kleuren zoals wit of lichtgrijs zijn zeer geschikt als hoofdkleur. Voor de tweede kleur kies je een kleur welke tegenover de neutrale kleur voldoende contrast oplevert. Als accentkleur kies je vervolgens bijvoorbeeld een opvallende complementaire kleur.
In het bovenstaande voorbeeld wordt een bijna witte tint met weinig blauw gebruikt. Als tweede en derde kleur heb ik in dit geval een heldere tint blauw en een complementaire, donkere oranjetint gekozen.
Test en vergelijk!
Wees niet bang bij het kiezen van de kleuren van je website te experimenteren met de percentages, verschillende tinten en extra accentkleuren.
In de balken hierboven heb ik de blauwtint en de oranjetint uit het bovenstaande voorbeeld iets aangepast. Welke heeft jouw voorkeur?
Twijfel je?
Laat twee verschillende versies aan kennissen of vrienden zien. Dan merk je welke indruk je opwekt met die kleuren. Je kiest dan voor het kleurenpallet welke het meeste past bij wat jij wilt uitstralen.
Handige tools voor kleuren op je website
Kun je hulp gebruiken bij het samenstellen van je kleurenschema of zoek je inspiratie? Zet dan één van de vele tools in die online te vinden zijn.
Adobe Color
Adobe Color is één van de bekendste tools. Via deze app stel je niet alleen je eigen kleurenschema’s samen, maar bekijk je ook kleurenschema’s die door andere gebruikers zijn samengesteld. Zoeken kan niet alleen op kleur, maar ook op thema’s. Denk daarbij bijvoorbeeld aan zomer, Halloween en vintage. Ideaal als je een bepaalde sfeer wilt uitstralen, maar niet precies weet welke kleuren daar het beste bij passen. Voor het eerder gebruikte voorbeeld, heb ik zelf de zeer lichtblauwe tint uitgekozen en daarna aan de linkerkant gekozen voor een complementaire regel voor kleurharmonie.
Colormind
Een ander voorbeeld is Colormind. Dit is een generator voor kleurenschema’s die gebruikmaakt van deep learning. Deep Learning is een vorm van kunstmatige intelligentie (AI) die de manier imiteert waarop mensen bepaalde soorten kennis verwerven. Het kan kleurstijlen leren van foto’s, films en populaire kunst.
Zelf kies je één of twee kleuren, die je vastzet. Door op de knop ‘Generate’ te klikken, genereer je drie andere kleuren die goed bij jouw eerder gekozen kleur passen. In de afbeelding hierboven heb ik de eerste twee kleuren uit het voorbeeld vastgezet en de overige drie kleuren zijn daarna door Colormind hierbij gegenereerd.
RGB to HEX Color Converter
Sommige programma’s zoals Photoshop vertegenwoordigen kleuren meestal in RGB. Dat is een manier om een kleur uit te drukken met behulp van een combinatie van rood, groen en blauw. Voor webdesign wordt de voorkeur gegeven aan zogenoemde hexadecimale kleurcodes. Die codes zie je ook bij de bovenstaande afbeelding staan. Heb je een mooie foto waarop kleuren voorkomen die je wenst te gebruiken? Denk hierbij aan het palet van je favoriete schilderij of een foto van de zonsondergang op vakantie, dan moet je de codes omzetten van RGB naar hexadecimale kleurcodes. Die omzetting kun je met deze tool uitvoeren.
Denk aan toegankelijkheid
Natuurlijk wil je dat je website toegankelijk is voor iedereen. Daarom heeft het World Wide Web Consortium de Web Content Accessibility Guidelines (WCAG) 2.1 opgesteld. Dit zijn richtlijnen voor het maken van toegankelijke websites. Daar hoort ook kleurgebruik bij. Door kleuren te kiezen die voldoende contrast bieden, kunnen bezoekers met visuele beperkingen en kleurenblindheid je website beter gebruiken.
Denk daarom aan de contrastratio. Deze verhouding geeft aan hoeveel het contrast is tussen de kleur van de tekst en de achtergrond waarop die tekst wordt weergegeven. Je berekent het door de helderheid van de voorgrondkleur te delen door de helderheid van de achtergrondkleur. Zo moet voor normale tekst (kleiner dan 18pt of 14pt vetgedrukt) de contrastverhouding minimaal 4,5:1 zijn. De tekstkleur is dan dus minimaal 4,5 keer helderder dan de achtergrondkleur.
Rooskleurige toekomst voor je website!
Hopelijk weet je nu wat er komt kijken bij het selecteren van het juiste kleurenschema. Ik wens je veel plezier bij het kiezen van je palet! Houd ons blog in de gaten voor het tweede deel in de serie vormgeving. Daar ga ik verder in op typografie en help ik je met het kiezen van de juiste lettertypes voor jouw website.
P.S. Blijf op de hoogte en volg ons via Facebook, X, Instagram, e-mail en RSS. Heb je vragen, tips of opmerkingen? Laat het achter als reactie. Vond je het artikel nuttig? Deel het dan met anderen!
Misschien goed om hier aan toe te voegen dat in het kader van digitale toegankelijkheid wel gelet moet worden op een bepaald contrastwaardeverschil in kleuren, tussen tekst en achtergrond, wat je moet aanhouden om tekst voor iedereen goed leesbaar te maken. Ook kleurenblindheid is hierbij een belangrijke overweging (8% van de mannen heeft hier mee te maken en 0,5% van de vrouwen). De regels over waar je op moet letten heten WCAG 2.1, in Nederland wordt het vaak ‘webrichtlijnen’ genoemd.
Hi Jack, bedankt voor het reageren! Dat is inderdaad een goede aanvulling. We hebben daarom zojuist een stukje over toegankelijkheid aan het artikel toegevoegd.