De kleuren van je website bepalen met deze 5 handige tools

5 handige tools om de kleuren van je website te bepalen

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.

Kleur rood voor je website

Rood

  • warmte
  • kracht
  • energie
  • passie
  • moed
  • opwinding
  • agressie
  • gevaar
Kleur oranje voor je website

Oranje

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

Voorbeelden: Funda, Barkables

Kleur geel voor je website

Geel

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

Voorbeelden: Beste Cryptocursus, Mailchimp

Kleur groen voor je website

Groen

  • leven
  • natuur
  • rust
  • evenwicht
  • gezondheid
  • vrede
  • verfrissing
  • balans
  • herstel
Kleur blauw voor je website

Blauw

  • spiritualiteit
  • vrijheid
  • geduld
  • toewijding
  • loyaliteit
  • betrouwbaarheid
  • stabiliteit
Kleur paars voor je website

Paars

  • luxe
  • kwaliteit
  • elegantie
  • bewustzijn
  • rijkdom.
Kleur roze voor je website

Roze

  • romantiek
  • vrouwelijkheid
  • liefde
  • rust
  • warmte
Kleur zwart voor je website

Zwart

  • kwaliteit
  • elegant
  • rijkdom
  • stijl
  • macht
  • prestige
Grijs voor je website

Grijs

  • veiligheid
  • volwassenheid
  • betrouwbaarheid
Kleur wit voor je website

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)

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.

Geef je website kleur!

KLEURENGIDS

Geef je website kleur!

Geef je website kleur!

Geef je website kleur!

KLEURENGIDS

Schrijf je in om waardevolle tips & inspiratie te ontvangen. Je krijgt van mij de kleurengids “Geef je website kleur! als cadeautje in je mailbox.

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

Kies je kleuren met deze tools:

Picular

5 handige tools om de kleuren voor je website te kiezen

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

5 handige tools om de kleuren voor je website te kiezen

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

5 handige tools om de kleuren voor je website te kiezen

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

5 handige tools om de kleuren voor je website te kiezen

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 color, material design en flatui design

Encycolorpedia

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.

12 Reacties

  1. Olga

    Informatief artikel, Bedankt!

    Antwoord
    • Monique

      Graag gedaan Olga. Heb even naar je website gekeken, het kleurgebruik ziet er super uit!

      Antwoord
  2. Claire van Ruth

    Wow, super leuk! Ik kende niet alle ‘kleur’sites. Bedankt voor de tip.

    Antwoord
    • Monique

      Zeer zeker ook handig voor grafisch ontwerp. Alleen geven de meeste tools alleen het HEX nummer, behalve Adobe uiteraard 🙂

      Antwoord
  3. Karine

    Super je tips Monique, thx. Al een oplossing gevonden voor één uit de berg vragen die ik heb voor de nieuwe website. Wordt palette/8614 uit de Colorion site

    Antwoord
    • Monique

      Hoi Karine, graag gedaan! Wat goed dat je je kleur hebt kunnen vinden. De kleuren van je website bepalen is zeker niet altijd de makkelijkste keuze. Dus die kan van je lijst af 🙂

      Antwoord
  4. Jaap

    Bedankt, mooi overzicht!
    Moet je voor gebruik op Website nog steeds rekening houden met “web veilige” kleuren?

    Antwoord
    • Monique

      Hallo Jaap, graag gedaan! Kleuren zullen altijd wel een dingetje blijven om die op alle schermen hetzelfde eruit te laten zien. Daar zijn de monitoren en schermen gewoon te verschillend voor. De grootste kans om kleuren er enigszins hetzelfde eruit te laten zien is door inderdaad gebruik te maken van web veilige kleuren. Dit is een selectie van 216 kleuren uit een totaal van ruim 16 miljoen RGB kleuren. Dan nog blijft het een benadering door de kleurtemperatuur van de monitoren.

      Antwoord
  5. An

    Ciao Monique,

    Zeer interessant en zo leuk Adobe ! Ik heb een aantal afbeeldingen ingeladen en inderdaad het programma gaf me de passende kleuren. Echt gebruiksvriendelijk !

    Antwoord
    • Monique

      Ja, goed is die hè? Hebben ze heel goed uitgedacht daar bij Adobe. 🙂

      Antwoord
  6. Jasmijn

    Bedankt voor deze info. Was al een hele tijd naar dergelijke tools opzoek. Vind vooral Material Design erg handig.

    Antwoord
    • Monique

      Graag gedaan! De Material Design is inderdaad heel handig… die gebruik ik vaak.

      Antwoord

Een reactie versturen

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

Verder lezen?

Maak een plan voor je website, dan ga je zeker goed van start!

Voordat je begint met het maken of laten maken van een website is het belangrijk dat je een goed plan hebt, een goede fundering waarop je website gebouwd kan worden. Als je al een website hebt en deze nog niet zo succesvol is als je gehoopt had, is het aan te raden om...

Back-up en herstel (of verhuis) je website met All-in-one WP Migration

Je bent even wat veranderingen aan het doen op je website of aan het updaten en het gaat mis. Er ontstaat ergens een conflict en de voorkant van je website ziet er ineens uit of er een storm over heen geraasd is. Of je ziet allemaal gekke dingen die er eerst niet...

Welke bestandsformaten voor afbeeldingen zijn er, en hoe gebruik je ze op je website?

Zie je ze weleens voorbij komen? JPG, PDF, PNG, GIF, EPS, AI, TIFF, PSD? Allemaal verschillende bestandsformaten voor afbeeldingen. Wat de verschillen zijn en hoe je ze gebruikt lees je hieronder. (Er zijn ook nog andere bestandstypen, maar dit zijn de meest...

De veranderingen van Mailchimp en de gevolgen voor je gratis account

Mailchimp heeft besloten om per 15 mei 2019 veranderingen aan te brengen in de abonnementen. Dit heeft voornamelijk voor de gratis versie best wel wat consequenties. Toen ik startte met mijn bedrijf heb ik voor het opbouwen van mijn e-maillijst en het versturen van...

Wat is WordPress en wat zijn de voordelen?

Wat is dat nou, WordPress? Content management Systeem (CMS)Heel kort gezegd; WordPress is een Content Management Systeem (CMS). Dat wil zeggen, een systeem om de content van je website te managen. Uhh.. en nu in Nederlands graag! WordPress is een pakket software, een...

7 typen websites die niet garant staan voor succes

Er bestaan verschillende typen websites die weer onderverdeeld kunnen worden in succesvolle en niet succesvolle. Als je als ondernemer een website hebt, wil je natuurlijk ook dat die een succes wordt. Een website die bezoekers aantrekt en ervoor zorgt dat die...

Goede foto’s zijn belangrijk; ze maken je website

Foto's zijn enorm belangrijk voor je website, ze bepalen voor een heel groot deel de sfeer en de uitstraling. Het design en je teksten kunnen nog zo goed in elkaar zitten, als je foto's niet sprekend en van slechte kwaliteit zijn, dan heeft dat consequenties voor de...

Bepaal het doel van je website met deze 5 voorbeelden

Veel ondernemers zien hun website als een doel op zich en hebben niet in de gaten dat een website juist een middel is om andere doelen te behalen. Als je exact weet wat het doel van je website moet zijn, kun je veel beter bepalen wat er op je website aanwezig moet...

Hoe krijg je een goede voorvertoning van een link op Facebook?

Als je de link van je nieuwe blogpost of van webpagina deelt op Facebook, dan wil je natuurlijk dat het er netjes en aantrekkelijk uitziet. De bedoeling van het plaatsen van je Facebookbericht, is uiteraard dat er mensen op je link klikken en je website...

Maak zelf de mooiste social media uitingen met Canva

Je hebt iets te vertellen en dat wil je delen met de wereld. Je weet inmiddels dat een afbeelding vaak meer zegt dan alleen maar woorden en daar wil je gebruik van maken in je social media uitingen. Je hebt weinig tot geen design ervaring en ook geen Photoshop ter...
7 stappen voor een goede voorbereiding van je website

Een goede website begint bij een goede voorbereiding

Ga jij je eigen website maken? Of ben je op zoek naar een webdesigner die dat voor je doet? Allereerst is het dan belangrijk om goed voor ogen te hebben waar je met je website naartoe wilt. Dit maakt het uiteindelijk designproces veel soepeler en sneller.

Schrijf je in om waardevolle tips & inspiratie te ontvangen en je krijgt van mij de 7 stappen voor een goede voorbereiding cadeau!