Bij het maken van een website is het bepalen van de kleuren een belangrijk onderdeel.
Kleurgebruik op je website heeft een grote impact in hoe je website overkomt op je bezoeker.
Mensen zijn namelijk visueel ingesteld.
Kleuren hebben daardoor ook een belangrijke rol in de herkenbaarheid van je merk.
En je kan met de juiste kleuren je merk ook aantrekkelijker maken.
Het uitzoeken van de juiste kleuren voor een merk en/of website kan voor veel mensen lastig zijn.
Nadat je de juiste primaire kleur(en) hebt gevonden moet je nog bijpassende kleuren vinden voor de details van je website zodat alles een mooi geheel lijkt.
Er zijn zoveel kleuren om uit te kiezen. Wat moet je doen als je geen keuze kan maken?
Omdat het kiezen van de juiste kleurcombinaties een obstakel kan zijn waar je onnodig veel tijd aan kwijt bent, laat ik je in dit artikel zien aan de hand van welke stappen ik kleuren uitzoek als ik een nieuwe website maak.
Stap 1: een primaire kleur kiezen
Het ligt voor de hand als je een website maakt voor een bestaand merk dat je de bestaande kleuren gebruikt als startpunt.
Heb je bijvoorbeeld al een logo in een bepaalde kleur? Dan is dat een goede optie om als primaire kleur te gebruiken.
Dit betekend overigens niet automatisch dat je logo kleur ook je primaire kleur moet zijn. Als je een rood logo hebt, hoef je dit niet per definitie als primaire kleur te gebruiken. Je kan het ook gebruiken voor je accenten (call to actions, iconen, etc). Ga dus niet omdat je een rood logo hebt gelijk een compleet rode website maken, dat is nergens voor nodig.
De kans is echter groot dat je nog helemaal geen kleur hebt.
Je kan natuurlijk gewoon je favoriete kleur kiezen, maar het is verstandig om eerst een aantal dingen af te wegen.
- Kijk eerst naar welke kleuren je concurrenten gebruiken.
Stel je wilt een sportschool beginnen in een bepaalde stad. Je weet dat er al grote sportscholen zijn die bekend staan met bijvoorbeeld de kleuren oranje (Basic Fit) en rood (Fit for Free). Het is dan verstandig om deze kleuren weg te strepen van de potentiële kleuren die je kan kiezen. - Denk na over hoe je wilt dat de website overkomt op de bezoekers.
Een website van een voetbalvereniging wil waarschijnlijk een ander gevoel overbrengen dan een website van een zakelijke instelling. Vraag jezelf dus duidelijk af hoe je wilt dat bezoekers zich voelen als ze jouw website bezoeken.
In het ideale scenario heb je op basis hiervan al een goed beeld wat je als primaire kleur wilt gebruiken.
Het geeft echter niet als je nog steeds niet zeker weet welke kleur je moet kiezen.
Ik vind het ook lastig om te kleuren van deze blog te bepalen.
Er zijn niet echt kleuren van (directe) concurrenten om weg te strepen.
Mijn doelgroep zijn kleine ondernemingen en ZZP’ers. En ik wil dat bezoekers van mijn website zich serieus genomen voelen.
Maar in principe kan je dan nog steeds alle kanten op. Blauw, groen of misschien lichtgrijs.
Dan is er ook nog zoiets als ‘kleurpsychologie’.
Blauw wordt bijvoorbeeld geassocieerd met rust en rood met passie.
Ik ben niet zo goed in de theorie achter kleurpsychologie want op basis hiervan weet ik alsnog nooit wat ik moet kiezen.
Blauw wordt bijvoorbeeld ook geassocieerd met depressie en rood met gevaar..
Het kiezen van een primaire kleur kan een obstakel zijn bij het maken van je website. Om ervoor te zorgen dat je hier niet teveel tijd aan kwijt raakt vind ik het altijd prettig om inspiratie op te doen.
Dit kan op verschillende manieren. Er is niet per definitie een manier het beste. Ik laat alleen een aantal manieren zien (in willekeurige volgorde) hoe ik dit doe.
Manier 1: populaire kleurpaletten
Er zijn meerdere websites waar je talloze kleurpaletten kan vinden die populair zijn.
Goede websites die ik hiervoor gebruik zijn:
Stel je hebt eenmaal bedacht dat je de kleur blauw wilt gebruiken op je website.
Maar welk type blauw moet je nemen? Donker of juist licht? En welke kleuren passen daar goed bij?
Via Canva heb ik bijvoorbeeld onderstaande kleurpalette gevonden.
Je hebt nu gelijk verschillende soorten blauw gevonden om te gebruiken op je website die mooi bij elkaar passen.
Je hoeft uiteraard niet perse precies deze kleuren te gebruiken. Je kan ze altijd wat aanpassen of een andere combinatie maken.
Door bijvoorbeeld op ‘Baby Blue‘ te klikken vind je op de pagina meer informatie over deze kleur. Je ziet dan bijvoorbeeld kleuren die complementair zijn aan deze kleur en andere kleurcombinaties.
Deze websites zijn handig om kleurcombinaties te vinden die geliefd zijn bij mensen.
Er zijn echter ook een aantal nadelen.
Veel kleurpaletten hebben veel meer kleuren dan je nodig hebt op een website.
Naast een primaire kleur heb je op je website ook neutrale kleuren nodig voor bijvoorbeeld je teksten en achtergronden.
Een kleurpallet met 8 kleuren + nog een aantal neutrale kleuren is daarom niet bepaald praktisch.
Persoonlijk zou ik daarom 1 primaire kleur kiezen uit zo’n kleurpallet en dan misschien nog 2-3 kleuren als secundaire kleuren + een aantal neutrale kleuren.
Manier 2: kleuren uit een foto gebruiken
Het vorige voorbeeld had de aanname dat je had besloten een vorm van blauw te gebruiken.
Maar wat als je na het bekijken van al die populaire kleurpaletten geen besluit hebt kunnen nemen welke kleur je wilt gebruiken?
Via bijvoorbeeld Canva.com en Coolors.co is het mogelijk om een kleurpalet te genereren op basis van een foto.
Stel je wilt een website maken voor een Italiaans restaurant.
In dit voorbeeld gebruik ik de ‘image picker’ van Coolors.co
Je kan dan een eigen foto uploaden, een URL invoeren of zoeken via hun website.
Ik kies voor de laatste optie en zoek op ‘italy’.
Je kiest vervolgens natuurlijk een foto uit waarvan je de ‘sfeer’ goed vindt passen bij je website.
Vervolgens worden er een aantal kleuren gegeneerd op basis van de gekozen foto.
En je hebt nu een kleurpalet die hopelijk goed past bij wat je wilt dat de website uitstraalt.
Eventueel kan je nog het aantal kleuren nog eenvoudig vergroten of verkleinen.
Als je de kleuren toch niet zo mooi vindt kan je natuurlijk altijd een aantal andere foto’s uitproberen.
Op het moment dat je eenmaal een geschikt kleurpalet hebt gevonden hoef je alleen nog te bepalen welke kleur je primaire kleur wordt.
Manier 3: inspiratie opdoen met bestaande websites
In het voorbeeld van een Italiaans restaurant kan je goed een foto gebruiken om het gevoel van Italië over te brengen in bepaalde kleuren.
Maar niet voor elke website zal het zo makkelijk zijn om een geschikte foto te vinden.
In dat soort gevallen doe ik inspiratie op bij bestaande websites met een mooi design.
Handige websites om inspiratie op te doen zijn:
Als voorbeeld zal ik mijn eigen website gebruiken.
Toen ik deze blog ging maken had ik geen idee welke kleuren ik moest gebruiken.
Het enige wat ik wist was dat ik geen blauw wou gebruiken, omdat ik deze kleur al zo vaak zag bij ‘marketing’ en ’tech’ websites die ik zelf lees.
Maar met enkel ‘geen blauw’ zijn er nog steeds veel opties open.
Ik gebruik het liefst de website van Land-book.
Door op ’tags’ te klikken selecteer je een aantal onderwerpen die passen bij jouw website.
Ik koos voor deze website bijvoorbeeld Agency, Marketing, WordPress, etc.
Daarna scrol je door het zoekresultaat. Ik klik nog nergens op maar kijk alleen in het overzicht welke kleuren mij opvallen.
Na een tijdje ben ik meerdere designs tegen gekomen waarvan donkergroen de primaire kleur was die mij positief opviel.
Ik besluit dus om van donkergroen mijn primaire kleur te maken.
Maar je wilt natuurlijk niet letterlijk dezelfde kleuren kopiëren als de voorbeelden.
Je wilt een eigen kleurpalet maken.
Ik gebruik het liefste de website van Coolors.co maar er zijn meerdere websites waarmee je ongeveer het zelfde kan.
Je kan in het menu kiezen voor ”Generate” om een kleurpalet te maken of voor ”Explore” om een kleurpalet in het overzicht te zoeken.
Als je kiest voor ”Explore” dan is het handig om je zoekresultaat te verfijnen door op een kleur of style te filteren.
Als je een kleurpalet hebt gevonden die in de buurt komt van wat je mooi vindt klik je op de ‘3 puntjes’ en daarna op ‘Open in the generator’:
Het is geen probleem als dit nog niet precies zo is als je wilt.
Het enige wat ik op dit moment weet is dat ik donkergroen als dominante kleur wil.
Ik heb daarom een kleurpalet uitgekozen waarin een donkergroen zit. Maar je kan ook eenvoudig de kleur wijzigen.
Een goed startpunt is een van de kleuren die ik mooi vond tijdens mijn zoektocht op Land-book.
Vervolgens klik ik op ‘view shades’:
Je ziet dan verschillende types groen.
Over het algemeen geldt dat een lichtere kleur frisser is en een donkere kleur serieuzer.
Probeer gewoon meerdere uit en kijk welke je mooi vindt.
Eventueel kan je de kleur nog wat aanpassen voordat je opnieuw de shades bekijkt als je niet iets moois vindt.
Een andere handige manier is door het palet aan te passen:
Door de waardes aan te passen zie je aan de onderkant de nieuwe hex-codes van je kleur.
Herhaal dit proces tot je de geschikte kleur hebt gevonden voor je primaire kleur.
Mijn primaire kleur wordt: #07332F
Stap 2: vind een secundaire kleur(en)
Naast je primaire kleur heb je ook een of meerdere secundaire kleuren nodig. Dit zijn kleuren die je gebruikt voor de accenten op je website, bijvoorbeeld voor je buttons (Call to Action) en je iconen. Ik weet niet of dit een specifieke naam heeft, maar ik noem het meestal accentkleuren.
Het zal meestal het geval zijn dat je wilt dat mensen een bepaalde handeling verrichten op je website. Het is dan dus belangrijk dat je call to action opvalt tussen je primaire kleur.
Ook dit kan je weer op meerdere manieren doen.
Je kan bijvoorbeeld het Color Wheel van Canva gebruiken.
Je vult je primaire kleur in en kiest een kleur die daar complementair aan is:
Een andere website waarmee je dit kan doen is Paletton.
Je hoeft niet letterlijk deze kleuren over te nemen, maar gebruik het als indicatie van welke kleuren goed bij elkaar passen.
Bij mij kwam er met donkergroen vaak een soort paars of donkerrood uit. Een kleur die ik niet zo mooi vind passen bij mijn website.
Je kan echter ook de inspiratie die je hebt opgedaan bij het bepalen van je primaire kleur gebruiken.
Het viel mij bijvoorbeeld op dat meerdere groene websites een bepaalde zalmkleur gebruikte voor hun headlines.
Ik vind dit erg mooi staan dus ik voer deze in mijn kleurpalet (in Coolors.co) en zoek weer de juiste shade uit zoals in de vorige stap bij manier 3 is uitgelegd.
Ik heb gekozen voor donkere kleur groen dan dit voorbeeld, dus een lichtere accentkleur is in mijn ogen mooier.
Voor de zekerheid kan je gebruik maken van de Color Constrast Checker van Coolors.co om te kijken hoe goed leesbaar je tekst is op een achtergrondkleur.
Het is eenvoudig om nieuwe kleuren toe te voegen aan je kleurpalet door op het plus-teken te klikken die verschijnt als je met je muis over de overgang tussen twee kleuren gaat.
Als je een kleurpalet hebt gevonden met veel kleuren kan het ook handig zijn om een aantal kleuren te verwijderen door op het kruisje te klikken.
In principe is 1 primaire- en 1 secundaire kleur genoeg, maar je kan voor meerdere accentkleuren kiezen.
Mijn persoonlijke voorkeur gaat er naar uit het om het niet te druk te maken en dus niet teveel kleuren te kiezen. Ik kies liever om met een klein kleurpalet te beginnen en eventueel later als dat nodig is voeg ik een of meerdere accentkleuren toe.
Mijn eerste accentkleur wordt: #F2ABA6
Deze ‘melon’ kleur zal ik voornamelijk voor titels gebruiken waar de achtergrondkleur mijn primaire kleur is zoals in de header.
Of deze kleur ook geschikt is voor de buttons betwijfel ik maar daar kom ik vanzelf achter. Eventueel zoek ik dan nog een andere kleur voor de buttons.
Stap 3: kies neutrale kleuren
Tenslotte heb je nog een aantal neutrale kleuren nodig.
Wit is meestal een geschikte achtergrondkleur en een zwart (of donkergrijs) is dan de kleur voor het lettertype.
Als je een donkere website hebt kan dit uiteraard ook andersom.
De neutrale kleuren zijn in mijn ogen erg belangrijk. Donkergroen is wellicht mijn ‘primaire kleur’, maar de neutrale kleuren komen veruit het vaakst voor op mijn website.
Uiteindelijk draait mijn website vooral om de content. En de teksten staan op de achtergrondkleur. Het is daarom erg belangrijk dat de content goed naar voren komt. Voor mij is dat belangrijker dan dat mijn logo eruit springt.
Op het begin had ik het over een voorbeeld van Basic-Fit (met een oranje logo) en Fit for Free (met een rood logo). Als je hun website bekijkt, dan zie je natuurlijk deze kleuren terug komen maar de neutrale kleuren komen het vaakst voor.
Voor mijn website kies ik voor #141414 voor de kleur van tekst en #FFFFFF als achtergrond.
Als je veel tekst hebt en dus veel witte achtergrond kan het mooi zijn om ter afwisseling bijvoorbeeld een lichtgrijze achtergrond te gebruiken. Ik kies voor mijn website voor de kleur #EDEFEE.
Afhankelijk van de kleuren die je gebruikt kan bijvoorbeeld een lichtblauw, lichtroze of beige ook mooi zijn ter afwisseling.
Persoonlijk vind ik het vaak wel mooi om de koppen (H1, H2, H3, etc) een lichtere/donkere variant van de primaire kleur te geven.
Je kan uiteraard gewoon zwart gebruiken, maar ik vind een iets lichtere variant op de donkergroene kleur wel mooi staan.
Ik vul dus mijn primaire kleur in bij mijn kleurpalet op Coolors.co en kies een iets lichtere shade uit.
Ik heb gekozen voor #1C3E36
Mijn kleurpalet bestaat nu dus uit 6 kleuren. 1 primaire kleur, 2 accentkleuren en 3 neutrale kleuren.
Terwijl ik dit artikel schrijf, ben ik daadwerkelijk bezig met het bepalen van de kleuren van deze website. Wellicht heb ik de kleuren toch nog veranderd als je dit artikel later leest.
Dit wat ik nu heb vormt de basis maar als ik tijdens het toepassen van de kleuren er achter kom dat bepaalde kleuren toch niet zo mooi staan, dan kan ik dit altijd nog aanpassen.
In dit artikel wou ik je meerdere manieren laten zien hoe je kleuren kan uitkiezen en hoe ik dat exact voor deze website heb gedaan.
Het is geen exacte wetenschap. Misschien vind ik de buttonkleuren toch niet zo mooi, dan verander ik het alsnog.
Als je eenmaal een kleurpalet hebt gekozen, betekent het niet dat je voor altijd vast zit aan deze kleuren.
Er zijn genoeg hele grote merken die hun branding later hebben veranderd. Dan moet het voor een kleine onderneming ook geen probleem zijn.
Helemaal tijdens het maken van je website kan je nog alle kanten op.
En als je website eenmaal groeit kan je ook nog altijd meer kleuren aan je kleurpalet toevoegen.
Het enige waar je op moet letten is dat de extra kleuren die je later toevoegt goed samen gaan met de kleuren die je al gebruikt.
Voorbeeld van een kleurpalet toepassen
Als je net zoals mij lang twijfelt over de juiste kleuren kan het wat lang duren tot je tot een beslissing bent gekomen.
In dit fictieve voorbeeld kies ik een kleurpalet uit door in de trending pagina van Coolors.co te kijken.
Ik kies voor de onderstaande kleuren als basis:
De zwarte kleur #000814 kan mooi worden gebruikt voor de standaard teksten.
Blauw of geel wordt de primaire kleur. En de ander wordt gebruikt voor de accenten.
Zelf voeg ik nog een wit en eventueel een licht grijs toe aan het kleurpalet.
Hieronder zie je hoe de website er in het begin uit ziet:
En na het toepassen van het kleurpalet ziet het er als volgt uit:
Ik heb voor #003566 als primaire kleur gekozen. Deze kleur gebruik als achtergrondkleur en voor de iconen.
De kleur #FFC300 wordt gebruik voor de buttons.
Ik heb dit kleurpalet letterlijk in 1 minuut uitgekozen.
In de praktijk duurt het natuurlijk wat langer omdat ik nu niet rekening hoefde te houden met wat de website moet uitstralen.
Maar persoonlijk vind ik het wel een mooi geheel geworden en dat met enkel 4 kleuren waaronder twee neutrale kleuren.
Dit kleurpalet heeft nog een vorm van blauw en geel.
Deze kan je prima weglaten maar je kan zo ook gebruiken voor details zoals de koppen.
En zoals ik eerder ook al had laten zien hoe je niet exact de kleuren te gebruiken uit het gekozen kleurpalet.
Je kan eenvoudig de kleuren iets aanpassen als je dat mooier vindt.
Om te laten zien hoe groot de impact van kleuren is gebruik ik dezelfde demo website als hierboven, alleen met een ander kleurpalet.
Ik zoek op Coolors.co naar pastel kleurpaletten.
Precies dezelfde website met een ander kleurpalet geeft gelijk een compleet andere uitstraling.
Het verschil tussen pastelkleuren en donkerblauw/geel is natuurlijk ook groot, maar je ziet wel goed hoe groot de impact van kleuren is.
Samenvatting
Zoals je hebt kunnen zien zijn er meerdere manieren om de kleuren van je website te bepalen. En dit zijn alleen nog maar de manieren die ik zelf gebruik.
Er zijn ongetwijfeld nog allerlei andere manieren waarmee je dit soort keuzes kan maken. In dit artikel heb ik het bewust niet al teveel over de symbolen van kleuren gehad, omdat ik daar zelf niet goed in ben.
Ik hoop alleen dat dit artikel enigszins overzichtelijk is gebleven en het je helpt bij het maken van je keuzes.
Het geeft niet als je twijfelt.
Ik heb daar helaas zelf ook last van.
Ik was bijvoorbeeld helemaal overtuigd van de kleur groen die ik had gekozen.
Maar aan het eind van het artikel begon ik te twijfelen omdat ik de het kleurpalet met blauw en geel dat ik in 1 minuut had uitgekozen ook mooi vond.
Dat er zoveel kleuren zijn en zoveel mooie combinaties zorgt er denk ik voor dat mensen gaan twijfelen.
Hoewel de kleuren een belangrijk onderdeel van je merk zijn, moet het geen obstakel vormen waaraan je teveel tijd kwijt bent en waarover je steeds blijft twijfelen.
Ik raad je het volgende aan als basis:
- Kies 1 primaire kleur
- Kies 1 accent kleur
- Kies 2-3 neutrale kleuren
Dit kan je doen op de manieren die ik heb uitgelegd in dit artikel maar andere manieren werken ook.
Wellicht dat je ook gewoon je gevoel kan volgen.
Ik zelf doe dat niet omdat mijn gevoel niet resulteert in mooie kleurcombinaties, maar misschien ben jij daar wel erg goed in.
Hoe dan ook, als je eenmaal een primaire kleur hebt gekozen, zou ik daar gewoon aan vasthouden.
Het is zo makkelijk om te twijfelen over andere kleuren die ook mooi zijn, maar dan blijf je bezig met veranderen.
Later kan je indien nodig altijd nog meer kleuren toevoegen.
Of als je het helemaal zat bent verander je je hele kleurpalet.
Er zijn genoeg grote merken die in de loop der jaren hun branding hebben aangepast.
Daar is niets mis mee.
Ik raad je alleen aan niet al te vaak grote wijzigingen door te brengen. Dat gaat namelijk ten koste van de herkenbaarheid van je merk.
Ik wens je veel succes met het uitzoeken van mooie kleuren voor jouw merk/website.