Welke kleuren kies je voor je website?

Kleur kan iets maken of breken

Vormgever Monique aan de telefoon

Monique van der Vorm

1 juni 2021, 8 minuten leestijd

Welke kleuren kies je voor je webiste?

Er is veel te doen over kleur. Veel te zeggen ook. Ik richt me in dit artikel te op het kiezen van een kleurenpalet voor je website met kleine uitstapjes naar vormgeving, huisstijlkleuren en de opbouw van kleuren.

Delen

De kracht van kleur

Met kleur kun je sturen. Je kunt dingen op laten vallen of juist niet. Kleur kan een bepaalde sfeer geven aan iets. Je kunt iets dus maken of breken.

Het is goed om je bewust te zijn van de kracht van kleur. Wie ben je? Wat wil je overbrengen? Kleur kan je boodschap dus versterken. Kijk wat het voor jou of jouw product doet. Bedenk welke boodschap de kleur zou kunnen versterken. 

En dan heb je nog persoonlijke voorkeur, de één houdt van ingetogen en de ander van felle bonte kleuren. Het is ook iets wat kan veranderen met de tijd, net zoals jij ook verandert.

Kleur en ouder worden

Zo heb ik ooit eens gehoord dat oudere mensen steeds meer beige gaan dragen. Hoe komt dat? Beige is neutraal dus altijd goed. Je valt in beige niet te veel op. Ze zien anderen met beige en denken: oh, dat is ook goed voor mij. Je ziet het overigens zowel bij vrouwen en mannen. 

Gebruik je veel kleur of juist weinig kleur in je website?

Of je veel of weinig kleur gebruikt heeft uiteraard te maken met je persoonlijke voorkeur. Als je kleur gebruikt om je boodschap te ondersteunen, is het verstandig om te voorkomen dat het geen 'circus' wordt waarin alles moet opvallen. 

Om een ‘circus’ te voorkomen, werk je met een kleurenpalet. Voordat we direct naar het stappenplan voor een kleurenpalet gaan eerst even kort iets over de betekenis van kleuren. Als je helemaal blanco begint, gebruik kleur dan in je voordeel.

Welke betekenis hebben kleuren?

  • Rood: passie, liefde, agressiviteit
  • Oranje: creativiteit, enthousiasme, levenslust
  • Geel: plezier, frisheid, snelheid
  • Groen: kalmte natuur, positiviteit
  • Blauw: stabiliteit, veiligheid, vertrouwen
  • Paars: glamour, luxe, spiritualiteit
  • Magenta: zoet, sensueel, vrouwelijk
  • Zwart: modieus, nachtelijk, moedig
  • Grijs: balans, kwaliteit, respect.

Er zijn al zoveel goed stukken over kleur geschreven. Dus ik zou zeggen Google het even. Bijvoorbeeld: KleurenpsychologieGender and color of De betekenis van kleuren in marketing.

Kies de kleur die bij je past

Kleuren moeten wel bij je passen. Als je hele felle kleuren gebruikt, maar dat is niet wie jij bent. Wat zegt het dan? Van alle kleuren heb je varianten en daarmee maak je het verschil. Kies je dus voor en kleur pas die dan aan jou aan aan de hand van de van drie eigenschappen:

  • Warme en koele kleuren;
  • Heldere of gedempte kleuren;
  • Lichte en diepe kleuren.
Iedereen heeft zijn eigen kleur rood

Van links naar rechts en van boven naar beneden: warm licht naar koel licht, warm donker naar koel donker.

Praktische kleuren: leesbaarheid en contrast

Kleurengebruik gaat verder dan alleen wat jij het mooi vind. Naast wat bij je past heb je ook nog de praktische aspecten zoals leesbaarheid.

Zorg voor genoeg contrast

Zeker als je kleuren gebruikt met onderling lage contrasten moet je oppassen. Niet iedereen kan die kleuren onderscheiden. Daarnaast is het ook nog wel afhankelijk van het scherm waarmee je kijkt.

Maar er zijn natuurlijk ook behoorlijk wat mensen kleurenblind. Er zijn niet zoveel mensen die alleen maar zwart, wit en grijs zien. Dus eigenlijk kleurendoof (in Nederland zo’n 700.000 mensen), dan kun je een aantal kleuren niet goed van elkaar onderscheiden. Bijvoorbeeld het verschil tussen rood en groen, of blauw en geel. 

De meest bekende en voorkomende is de rood-groen kleurenblindheid. Deze mensen zien geen (of niet goed) verschil tussen rood en groen. Dit probleem kun je oplossen door hoge contrasten tussen je kleuren te gebruiken en uiteraard de combinatie rood en groen te vermijden.

ishihara test

Meer uitleg en wat deze plaatjes betekenen vind je op kleurenblindheid.nl

Hou de tekst leesbaar

Het lezen van tekst op een beeldscherm kost nog altijd meer moeite dan iets lezen wat gedrukt is. Ook hier moet je zorgen voor genoeg contrast. Google heeft een mooie kleurentool  die aangeeft welke kleur op welke achtergrond gebruikt kan worden. Hier krijg je ook suggesties voor de kleur van je tekst. In het algemeen geldt, donkere tekst op een lichte achtergrond leest het prettigst.

Wat is verschil tussen RGB en CMYK?

Kleuren kun je indelen in twee soorten: drukkleuren en beeldschermkleuren.

Drukkleuren: opgebouwd uit pigment

Alles wat gedrukt wordt, is opgebouwd uit CMYK-kleuren (cyaan, magenta, geel en zwart). Omdat drukkers op allerlei manieren verschillende kleuren uit hun perssen kunnen krijgen, zijn er ook kleursystemen. Met kleursystemen zoals Pantone of Ral wordt gegarandeerd dat een kleur overal ter wereld exact gelijk is. Dit is bijvoorbeeld belangrijk voor bedrijfswagens en huisstijlen. 

Beeldschermkleuren: opgebouwd uit licht

Licht is opgebouwd uit rood, groen en blauw (RGB). RGB-kleuren worden toegepast op alle schermen met licht zoals: televisie, computerscherm, telefoons en tablets.

Voor de RGB-kleuren in je website (HTML) wordt het hexadecimale stelsel gebruikt. Kleuren krijgen een hex code bestaand uit letters of cijfers. Zo is #FFFFFF de waarde voor wit en #000000 voor zwart.

Dit is een fijne tool voor het vinden van jouw kleurcodes.

Alleen huisstijlkleuren of ook afwijkende kleuren?

Afhankelijk van wat je doet heb je een aantal opties. Misschien heb je tot nu toe alleen maar in je huisstijlkleuren gecommuniceerd. Alles valt of staat dan ook met hoeveel kleuren zitten er in je huisstijl?

Ik hou van huisstijlen en kleurpaletten waar dat allemaal niet zo vast staat. Zodat je een beetje mee kunt bewegen met de tijd. Dat neemt niet weg dat het geen circus hoeft te worden. Een goed kleurenpalet geeft je een speelruimte.

Wat zijn goede kleurcombinaties?

Stel je hebt een kleur voor je logo en je wil een kleurenpalet maken, hoe kom je dan aan de andere kleuren? Met de color calculator kan je heel makkelijk een tegenoverliggende kleur vinden of juist meerdere kleuren bepalen. Zorg ervoor dat je niet te veel kleuren gaat gebruiken. Het wordt namelijk al snel een circus en dan zie je door de bomen het bos niet meer.

Stappenplan: maak je je eigen kleurenpalet

  1. Kies je basiskleur, de belangrijkste, prominente kleur in bijv je logo
  2. Voeg een bijpassende tweede kleur toe, anders wordt het eentonig
  3. Maak een lichtere en een donkere versie van deze kleuren
  4. Voeg een neutrale lichte kleur toe
  5. Voeg een donkere grijstint toe, dit staat chiquer dan zwart.

Laat je call-to-action opvallen

Let er op dat de call-to-action knoppen op je website opvallend anders zijn dan de rest van je kleurenpalet. Je kunt er bijvoorbeeld voor een tegenovergestelde kleur kiezen. Je kunt deze kleur ook kiezen bij stap 2.

Misschien als je dit gezien hebt dat je denkt oh zo simpel. Maar dan heb ik ook meerdere kleuren. Ja, dat kan heel goed. Kies die kleuren bewust en laat ze op meerdere plekken terugkomen. Zodat het een eenheid wordt. Dat geld natuurlijk niet alleen voor je website 

Hoe maak je je kleurenpalet flexibel?

Door je logo in basis niet zo gek veel kleur te geven. Met een logo wat zwart of wit is kun je alle kanten op.

  • Op neutrale (lichte) achtergronden gebruik je het zwarte logo.
  • Op een gekleurde achtergond kun je als de foto of kleur het toelaat het logo zwart gebruiken, als dat niet kies je voor wit/diapositief.
  • Je kunt het logo ook ineens in kleur geven of er een foto in plaatsen.

Van sommige merken zijn we al gewend dat ze regelmatig van kleur veranderen denk bijvoorbeeld aan Pantone met elk jaar de kleur van het jaar. Anderen hebben soms bij gelegenheden een andere uitstraling denk bijvoorbeeld aan Google.

Het is natuurlijk een beetje kort door de bocht om te denken dat je alleen een neutraal logo hebt als je zwart gebruikt. Je kunt natuurlijk als je goed nadenkt ook neutrale kleuren kiezen zoals bruin, groen en blauw. Vaak zijn deze kleuren in ieder geval wat donkerder. 

Hoe zorg je voor een professionele uitstraling?

Met alleen kleuren ben je er nog niet. Je hebt misschien vast weleens van het woord huisstijl gehoord, maar wat is dat nou eigenlijk?

Bij een huisstijl denk je misschien aan hele stoffige dingen uit een grijs verleden. Een huisstijl is niets anders dan de visuele presentatie van een bedrijf of merk. Je kunt er de hipste namen aan geven. Iedereen heeft dus een huisstijl. Misschien ben je je er alleen niet van bewust. Alles wat je communiceert als jouw bedrijf of merk is in een stijl.

Een professionele uitstraling bereik je dus door al die uitingen op elkaar af te stemmen. Het maakt niet uit waar je jouw bedrijf tegenkomt het geeft altijd dezelfde sfeer weer. Draag het uit in tekst, beeld, sfeer en lay-out

Dat houdt dus in dat je moet denken aan:

  • De juiste kleuren;
  • Bijpassend logo;
  • Consistent gebruik van lettertypes;
  • De juiste sfeer in fotografie;
  • Afgestemde iconen;
  • Kenmerkende vormen of patronen.

Deze dingen kun je laten vastleggen in een brandboard. Om nog maar eens een mooie term te gebruiken. Je komt in grote organisaties van die uitgebreide huisstijlhandboeken tegen, maar één A4 met duidelijk deze punten maakt al een enorm verschil en het geeft je genoeg ruimte om aan een mooie consistente uitstraling te werken. Maar met alleen een professionele uitstraling kom je er niet.

Kies je voor mooi of inhoudelijke goed?

Even terug naar je website. Als je video’s van mij hebt gekeken dan weet je wat ik altijd zeg: “Ik ben Monique en ik help ondernemers met het maken van heldere ontwerpen en websites met sterke inhoud want alleen met een mooi plaatje kom je niet zo ver.”

En waarom zeg ik dat? Stel we maken een prachtige website die helemaal voldoet aan het droombeeld wat je in je hoofd hebt. Alles er op en eraan. Al je verhalen, mooie foto’s, prachtige animaties. Maar de website is mobiel veel te traag. Op mobiel komt het ontwerp niet tot zijn recht. Er staat eigenlijk niet op wat de bezoeker nodig heeft. Het geeft niet de juiste antwoorden.

Een website is functioneel. En dat gaat boven alles. Dit geldt natuurlijk niet alleen voor websites. Dus beter een website die goed functioneert dan één die er prachtig uitziet, maar niet doet wat die moet doen. En daarom werkt het dus andersom. De eerste vraag moet zijn wat komt er op die website? Voor wie is die website? En wat willen zij weten?

  • Eerst bepaal je het doel voor je website
  • Dan ga je uitzoeken wie jouw ideale bezoeker is
  • Daar ga je de juiste (relevante) inhoud voor maken
  • Kies dan het juiste systeem voor je website, wat moet jouw website allemaal kunnen?
  • Maak een duidelijke structuur voor je website
  • Bepaal de kleuren en uitstraling van je website en zorg dat het beeld daarop aansluit.
  • Zorg dat het er verzorgd en professioneel uitziet.

Als een bezoeker kan kiezen tussen twee websites dan kies je op gevoel degene waar je het meest mee hebt. Als de één er professioneel uitziet en de ander niet. Wat denk jij dan wat er gebeurd? Dat alles bij elkaar maakt dat je een website krijgt die je ook klanten oplevert

Vormgeving zit hem niet alleen in hoe het plaatje er uitziet. Vormgeving versterkt de inhoud. Daarnaast kan vormgeving ook sturend zijn. Je kunt de aandacht op de juiste plek leggen waardoor mensen wel op een knop klikken. En dat kan uiteraard ook andersom door verkeerde vormgeving raak je afgeleid.

Oh en denk je nu: hoe moet het nu met mijn website? Wees gerust een website is nooit af. Sorry, ik wil je niet bang maken, maar er is altijd ruimte voor verbetering. 

20 tips om meer uit je website te halen

Wil jij meer uit je website halen?

Je kunt pas het beste uit je website halen als je dit hierboven allemaal hebt gedaan en je cijfers gaat analyseren. Wat wordt bekeken en wat niet? Klopt dit met wat je doel is? Wordt je wel gevonden?

Hoi, ik ben Monique al ruim 15 jaar grafisch vormgever & webdesigner

Ik help ondernemers met het maken van heldere ontwerpen en websites met sterke inhoud. Dit doe ik voornamelijk met het maken van websites die altijd up-to-date en veilig zijn.

Anderen bekeken ook

Vormenbrouwer (Monique) is grafisch vormgever én webdesigner die, met oog voor detail, heldere ontwerpen maakt met sterke inhoud. 

Heb je een logo, huisstijl, nieuwe website of infographic nodig? Ik brainstorm samen met jou en geef een persoonlijk advies.

Vormenbrouwer

Villapark 27, 7631 BG Ootmarsum
06 - 42 49 14 49 
monique@vormenbrouwer.nl

KvK nr: 73604569
BTW nr: NL001630905B65
Privacyverklaring
Algemene Voorwaarden

Deze website maakt gebruik van functionele en analytische cookies. Bekijk de privacyverklaring.

Sluiten