Voortgezet onderwijs  
ThinkQuest Jr Webplek
Hoe maak je een... Kleurencombinatie

Gepubliceerd op 8 maart 2006

webplektq_kleurendiagram Toepassing:
Een geschikte kleurencombinatie geeft je website meer sfeer, draagt bij aan de gebruiksvriendelijkheid en bespaart de bezoeker hoofdpijn! Een combinatie van drie of vier kleuren volstaat meestal voor een website – teveel verschillende kleuren kan het te druk maken, te weinig kleuren te saai en hard.

webplektq_soortenkleuren In dit artikel onderscheiden we vier soorten kleuren, afhankelijk van hun functie en opvallendheid:
Grondkleur – dit is de kleur die het meeste voorkomt en wordt meestal toegepast in de achtergrond van de pagina en is erg sfeerbepalend.
Papierkleur – Dit is kleur van de achtergrond van de tekst ofwel het ‘papier’ en is ook erg sfeerbepalend
Tekstkleur – In deze kleur wordt de tekst geschreven en is erg belangrijk voor de leesbaarheid
Accentkleur(en) - Deze kleuren worden gebruikt om accenten aan te brengen, bijvoorbeeld bij belangrijke koppen of navigatieknoppen

webplektq_basiskleuren Onderstaande werkwijze is een manier om tot een geschikte kleurencombinatie te komen:

1. Kies je grondkleur
De grondkleur bepaal je vooral door te kiezen voor een bepaalde ‘sfeer’. De afbeelding hiernaast benoemt enkele ‘sferen’ of emoties die bij verschillende kleuren horen. Zo zorgt rood als grondkleur voor een energieke, levendige en wellicht wat agressieve sfeer.

2. Papierkleur
De kleur van de pagina dient als ondergrond voor de tekst. Meestal is het daarom beter om een lichte kleur te nemen (bijvoorbeeld het veelgebruikte wit), maar je kunt ook een donkere kleur nemen (bij lichte letters). Om de ‘sfeer’ van grondkleur door te zetten zou je kunnen kiezen voor een lichtere of donkerdere versie van die kleur of voor een kleine toevoeging van een andere kleur. Pas op met teveel contrast tussen deze kleuren.

3. Tekstkleur
De tekstkleur is vooral afhankelijk van je gekozen papierkleur. Je dient het verschil tussen deze kleuren in balans te houden. Bij te weinig contrast wordt de tekst onleesbaar, bij teveel doet het lezen pijn aan de ogen. Algemeen kun je uitgaan van een redelijk groot verschil in licht en donker (maar niet helemaal zwart-wit) en weinig verschil in kleur.




Onderstaande afbeelding toont dat het kiezen van een papierkleur en tekstkleur de grondkleur (rood) richting geven. Het licht-rode is vrolijk en licht, terwijl het donkerrode in deze combinatie zwaar en mysterieus aandoet.

webplektq_combinaties

4. Accentkleur(en)
Bij onderdelen die moeten opvallen als tekstkoppen of navigatie-elementen kun je kleur speciaal toepassen. Fellere kleuren kunnen hier best, net zoals wat grotere contrasten tussen licht en donker of kleurcontrasten, mits spaarzaam toegepast. Je kunt bijvoorbeeld tekst onderstrepen met een fellere kleur of kleuren inverteren.

webplektq_opvallen

Tips en aandachtspunten:
  • Zichtbare harmonie – Een kleurencombinatie maken is geen exacte wetenschap, het vereist wat gevoel, maar vooral veel proberen en kijken. Er zijn op het Internet veel applicaties om kleurcombinaties te testen.

  • Ruimtelijke werking – Kleuren kunnen gebruikt worden om de illusie te wekken dat de webpagina diepte heeft. Dit wordt bereikt door met langzame kleurovergangen (‘gradienten’) de indruk van schaduw te wekken of met een contrast tussen warme (~ dichtbij) en koude (~ veraf) kleuren.


  • webplektq_ruimtelijkinzicht

    Meer informatie en kleurencombinaties vind je op:

    http://www.colormatch.dk/
    - applicatie – Deze applicatie helpt je om kleurencombinaties te maken

    http://www.worqx.com/color/combinations.htm
    - engels - Goede informatie over kleurenleer