De kleuren van je website bepalen met deze 5 handige tools

De kleuren van je website zijn enorm belangrijk: ze zorgen voor herkenbaarheid van je merk (verhoging van 80%), ze bepalen het gevoel dat een bezoeker krijgt en ze laten bepaalde elementen eruit springen, zoals bijv. buttons. Ik heb 5 handige tools gevonden waarmee je de kleuren en kleurcombinaties van je website kunt bepalen.

Deze komen verderop in het artikel aan bod. Eerst heb ik nog wat extra informatie voor je over het gebruik van kleur voor je website (en huisstijl).

Waar moet je op letten bij het kiezen van kleur?

Kies een hoofdkleur die weergeeft waar je bedrijf voor staat

Er is inmiddels veel onderzoek gedaan naar de invloed van kleuren op onze psyche én ons koopgedrag. Hieruit is gebleken dat kleuren er toe doen! Ze werken door in ons onderbewustzijn en roepen bepaalde gevoelens op. Belangrijk is dan ook om dit mee te nemen in het bepalen van je huisstijl en de kleuren van je website. Je kunt je doelgroep wel degelijk beinvloeden door het juiste gebruik van kleuren. Wat voor indruk wil je achterlaten? Hoe wil je dat je (potentiële) klant jou ziet? Hieronder vind je de elementaire kleuren en het gevoel dat ze oproepen.

Rood

warmte • kracht • energie • passie • moed • opwinding • agressie • gevaar

Voorbeelden: Ferrari, Coca Cola

Oranje

veiligheid • vriendelijkheid • benaderbaar • creativiteit • warmte • plezier • levenskracht • vrolijkheid • passie

Voorbeelden: FundaBarkables

Geel

optimisme • positivisme • vriendelijkheid • creativiteit • zelfvertrouwen • licht • zonnig • nieuwsgierigheid

Voorbeelden: Beste CryptocursusMailchimp

Groen

leven • natuur • rust • evenwicht • gezondheid • vrede • verfrissing • balans • herstel

Voorbeelden: Greenchoice, BP

Blauw

spiritualiteit • vrijheid • geduld • toewijding • loyaliteit • betrouwbaarheid • stabiliteit

Paars

luxe • kwaliteit • elegantie • bewustzijn • rijkdom

Roze

romantiek • vrouwelijkheid • liefde • rust • warmte

Zwart

kwaliteit • elegant • rijkdom • stijl • macht • prestige

Grijs

veiligheid • volwassenheid • betrouwbaarheid

Wit

onschuldig • puur • helderheid • zuiverheid • eenvoud • hygiëne

Naast deze elementaire kleuren bestaan er enorm veel kleurvarianten. Dit heeft ermee te maken dat kleuren eigenlijk lichtstralen zijn die op verschillende golflengtes zitten. Doordat een voorwerp vaak meer dan één golflengte terugkaatst, zien wij ontelbaar veel kleuren. (Bron: leerwiki.nl)

Cover kleurengids

Geef je website kleur!

Kleuren doen ertoe!
Je kunt je doelgroep wel degelijk beïnvloeden door het juiste gebruik van kleuren in je website. Het is dan ook belangrijk om hier goed over na te denken bij het bepalen van je huisstijl en de kleuren van je website.

Zorg dat de kleuren in de presentatie van je bedrijf overal gelijk zijn

Met andere woorden: zorg voor een duidelijke huisstijl en laat deze terugkomen in je logo, briefpapier, website en reclame,- en marketing uitingen. Door het consequent doorvoeren van je kleuren, lettertypes etc. bouw je aan een herkenbaar merk. 

Voeg 1 of 2 accentkleuren toe aan je kleurenpalet

Gebaseerd op de hoofdkleur die je gekozen hebt, kies je nog 1 of 2 kleuren om je kleurenpalet compleet te maken. Dit kunnen accentkleuren zijn die dicht bij je hoofdkleur liggen, bijvoorbeeld een donkere of een lichtere variant. Het is echter ook aan te raden om een complementaire kleur te kiezen om kleurcontrast te bieden. Deze wordt vaak gebruikt voor bijvoorbeeld buttons en Call to Actions, zodat ze goed opvallen en ervoor zorgen dat bezoekers tot actie over gaan.

De onderstaande online tools zijn makkelijke hulpmiddelen voor het kiezen van je hoofdkleur, accentkleuren en complementaire kleuren.

Kies je kleuren met deze tools:

Picular

Picular is een soort Google voor kleuren. Je typt een woord of begrip in, bijv. milieu en het programma geeft je een kleurenpalet. Ik heb het zowel met Nederlandse als Engelse begrippen getest, en beide zijn mogelijk. De Engelse begrippen zijn voor mijn gevoel echter wat nauwkeuriger in de kleurenvoorstellen.

Material Design

Material Design geeft een aantal kleurenpaletten met zowel hoofdkleuren als de kleurenvarianten hiervan. De Hex (#) codes staan erbij. Deze kun je kopiëren en in de kleureneditor van je website plakken.

Adobe Color CC

Adobe heeft een handig kleurenwiel bedacht om te komen tot een goed kleurenpalet. Je kunt hier ook een afbeelding inladen en het programma zoekt er dan de passende kleuren bij. Superhandig!

Colorion

Colorion geeft in ontelbare kleurpaletten voorbeelden van kleuren die goed bij elkaar passen. De #code kun je eenvoudig kopiëren door op de kleur te klikken. De paletten zijn verdeeld in 3 hoofdgroepen: full colormaterial design en flatui design

Encycolorpedia

Iedere keer als je de website van Encycolorpedia opent, krijg je een ander kleurenpalet te zien. (druk dus gerust een aantal keer op ‘vernieuwen’) De kleuren zijn mooi afgestemd op elkaar en gebaseerd op een prachtige achtergrondfoto die gebaseerd is op de natuur. Als je hier zelf een hex code (#) invoert van een kleur die je aanpreekt, krijg je allerlei informatie over deze kleur. Zo laat hij de alternatieven en de verwanten zien, maar ook de verloop van kleurtinten en de verloop van de kleur naar de tegenhanger (complementaire kleur). Een mooie database van kleuren dus waar je veel aan kan hebben in je zoektocht naar de juiste kleur.

Kijk voor nog meer kleureninspiratie eens op Pinterest

Met een combinatie van persoonlijke voorkeur, kijken naar wat anderen in jouw branche doen en de bovenstaande hulpmiddelen moet het je zeker lukken om de juiste kleuren te bepalen voor je website en je hele huisstijl.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *