Het eerste wat we zien is kleur

Met kleur kan je …

• stemming/emoties oproepen
• associaties oproepen
• aandacht vestigen op iets
• complexe gegevens duidelijk structureren
• kleine verschillen aangeven

Het resultaat van het goed gebruik van kleur is:

• Opnemen van info versnellen
• Onthouden met 50 % tot 75 % verlengen
• Herkenbaarheid met 75 % verhogen
• 80 % sneller tot actie overgaan

Kleurmenging

We kunnen op twee manieren kleuren mengen.

Additieve kleurmenging

Het mengen van de kleuren gebeurd op basis van licht. Wit wordt bereikt als alle primaire kleuren (RGB) worden gemengd. Dit is ook de manier waarop schermen kleuren gaan mengen.

Subtractieve kleurmenging

Hierbij worden pigment kleuren (bijv. verf) samengevoegd om een nieuwe kleur te bereiken. We gebruiken daarbij de secundaire kleuren (CMY). Als je alle kleuren samenvoegt krijg je (normaal) zwart. Dit is dus van toepassing bij het drukken en printen.

Schermkleuren

Schermen maken dus gebruik van additieve kleurmenging. Hierbij zijn er 256 mogelijkheden per primaire kleur.

Aantal kleuren

• RGB heeft miljoen kleuren.
  
• Menselijk oog kan ongeveer miljoen kleuren onderscheiden.

Opmerking

We kunnen hieruit afleiden dat alle afbeeldingen voor web in RGB kleuren dienen te staan.

Kleurcirkel

Als we gaan ontwerpen (voor het web) dan zullen we meerdere kleuren nodig hebben. De juiste kleuren kiezen is niet altijd eenvoudig. Er zijn een aantal tips om een goede kleurcombinatie te kiezen.

Bij deze tips gaan we uit van het feit dat alle kleuren in een cirkel staan.

In css kan je via hsl(«hue», «saturation», «lightness») gebruik maken van de kleurencirkel.

• Hue
  Dit is het aantal graden op de kleurcirkel.
  • 0 (of 360) is rood,
  • 120 is groen,
  • 240 is blauw.
• Saturation
  Dit is de hoeveelheid kleur er mag doorkomen.
  • 100% wil zeggen dat het kleur volledig mag doorkomen.
  • 0% komt het kleur niets door en zal dit dus een grijswaarde zijn.
• Lightness
  Hoeveel licht komt er door.
  • 100% komt alle licht door en zal het kleur dus wit zijn.
  • 0% komt er geen light door en zal het kleur dus zwart zijn.

:root {
  --my_red  : hsl(0, 100%, 50%); 
  --my_green: hsl(120, 100%, 50%); 
  --my_blue : hsl(120, 100%, 50%); 
  --my_pink : hsl(0, 100%, 85%); 
  --my_gray : hsl(0, 0%, 50%); 
  --my_black: hsl(0, 22%, 0%); 
  --my_white: hsl(0, 44%, 100%); 
}

Opgelet

Bij HSL heb je met ongeveer miljoen kleuren minder kleurmogelijkheden.

Bij HSL hebben we dus aanzienlijk veel minder kleuren dan de:

• miljoen kleuren bij RGB;
• miljoen kleuren die het menselijk oog kan onderscheiden.

Kleurcombinaties

Monochromatic

Kleuren binnen dezelfde kleur maar lichtere of donkere variant

Analogous

Kleuren die naast elkaar liggen in de kleurcirkel

Complementary

Tegenovergestelde kleuren

Triadic

3 kleuren die 120° van elkaar zijn verwijderd.

Natuur

Of laat je inspireren door de natuur…

Tip

Je kan gebruik maken van Adobe color (opens new window) of Coolors (opens new window) om op zoek te gaan naar een goede kleurcombinatie.

Kleur en emotie

Kleuren zijn van:

• Regio / Cultuur: Oranje ↔ Nederland
• Politiek: Rood ↔ Socialisme
• Natuur: Groen ↔ lente of giftig?
• Psychologisch (persoonlijke associaties)

Zie ook

• Color Combinations 2022 (opens new window)
• Color trends web design 2020 (opens new window)
• 50 Best Website Color Schemes of 2019 (opens new window)

Gradient

Sinds enkele jaren zijn gradients een trend in webdesign. Het heeft als voordeel dat je kan experimenteren met kleurmenging. En dat je een groter doelpubliek kan aanspreken. Door de grandients heeft de bezoeker minder associaties met andere zaken.

Tip

• CSS gradient generator (opens new window)

You need more colors than you think

In webdesign hebben we heel wat verschillende kleuren nodig, meer dan we soms zelf denken. Lees de tips verder in jullie handboek.

Belangrijk

Lees verder het hoofdstuk ‘Working with Color’ in Refactoring UI.

Kleurenblindheid

Gehele of gedeeltelijke kleurenblindheid of daltonisme is het niet volledig normaal waarnemen van kleuren.

Ongeveer 1 op de 12 mannen heeft een vorm van kleurenblindheid, tegenover slechts 1 op de 250 vrouwen.

Adobe XD Plugin

In Adobe XD kan je plugins installeren. Met de plugin ‘Colorblind Simulation’ van Stark kan je verschillende types van kleurenblindheid te simuleren.

Figma Plugin

In Figma kan je plugins installeren. Met de plugin ‘Adee Comprehensive Accessibility Tool’ kan je verschillende types van kleurenblindheid te simuleren.