Ontwerpen met kleur

Hidde Collee
8 min readNov 29, 2022

--

Kleur is een van de belangrijkste onderdelen van visueel ontwerp. Of je nou een website of flyer ontwerpt. In dit artikel behandelen de basis principles van kleur en hoe je kleur kan gebruiken in jouw ontwerpen.

De basis van kleuren

De moderne kleurentheorie is grotendeels gebaseerd op het kleurenwiel van Isaac Newton, die hij al in 1666 creëerde. Het basiskleurenwiel geeft drie kleurcategorieën weer:

  • Primaire kleuren
    Blauw, rood & geel
  • Secundaire kleuren
    Groen, oranje & paars
  • Tertiaire kleuren
    Geel-oranje, rood-oranje, rood-paars, blauw-paars, blauw-groen en geel-groen

De primaire kleuren meng je met elkaar om secundaire kleuren te krijgen. Tertiaire kleuren krijg je door een primaire kleur te mengen met een secundaire kleur.

Het kleurenwiel, met de primaire, secondaire en tertiaire kleuren.

Nu denk je natuurlijk, er zijn veel meer kleuren dan twaalf. Dat klopt natuurlijk, dit is een vereenvoudigd kleurenwiel. Je kan alle kleuren vinden op een meer geavanceerd kleurenwiel, bijvoorbeeld in de macOS kleurkiezer of Figma.

Je kan het kleurenwiel opsplitsen in twee delen: koele en warme kleuren. De warmte of koelte van een kleur staat bekend als kleurtemperatuur. Je kan warme en koele kleuren gebruiken in je ontwerpen om bepaalde stemmingen te bereiken (Galvan, 2020). Warme kleuren symboliseren bijvoorbeeld opwinding, optimisme en creativiteit, terwijl koele kleuren vrede, kalmte en harmonie symboliseren.

Koele kleuren vs warme kleuren

Het kleurenwiel is niet alleen gebaseerd op primaire, secundaire en tertiaire kleuren, maar ook bijvoorbeeld op tinten en tonen. Laten we iets meer de diepte in duiken:

Variatie op kleuren

Hue, verzadiging & helderheid van een kleur

Hue
De hue is eigenlijk de oorsprong van een kleur, ook wel een zuivere kleur genoemd. De primaire en secundaire kleuren zijn alle zes een hue.

Helderheid (Brightness)
Helderheid verwijst naar de hoeveelheid helderheid of licht in een kleur. Hoe meer naar rechts, hoe ‘lichter’ de kleur is. Bij helderheid valt de waarde tussen de 0 en 100.

Verzadiging (Saturation)
Verzadiging verwijst naar de intensiteit van een kleur. Hoe meer naar rechts, hoe ‘feller’ de kleur is. Bij verzadiging valt de waarde ook tussen de 0 en 100.

Tinten, tonen & schaduwen van een kleur

Tinten (Tints)
Tinten zijn varianten van een zuivere kleur waarbij wit is toegevoegd. Hoe meer naar rechts hoe meer wit is toegevoegd aan de kleur.

Tonen (Tones)
Tonen zijn varianten van een zuivere kleur waarbij grijs (zwart+wit) is toegevoegd. Hoe meer naar rechts hoe meer grijs is toegevoegd aan de kleur.

Schaduwen (Shadows)
Schaduwen zijn varianten van een zuivere kleur waarbij zwart is toegevoegd. Hoe meer naar rechts hoe meer zwart is toegevoegd aan de kleur.

Waar & hoe gebruik je deze varianten?
In Figma en Sketch kan je kiezen voor het HBS kleurmodel. Dat staat voor:

  • H = Hue > de waarde ligt tussen de 0 en 360
  • B = Brightness > de waarde ligt tussen de 0 en 100; hoe lager de waarde, hoe meer zwart
  • S = saturation > de waarde ligt tussen de 0 en 100; hoe lager de waarde, hoe meer wit

Door de waarden van B en S te veranderen kan je tinten, tonen en schaduwen van een hue creëren. Zoals je kan zien in het plaatje van tinten, tonen & schaduwen, kan je door de waarde van B te veranderen, schaduwen van een kleur creëren. Door met de waarde van S te spelen creëer je juist tinten. Bij tonen veranderd zowel de waarde van B als S.

Kleurmodellen

Computers begrijpen binaire taal, of te wel, nullen en enen. Kleuren zijn dat ook in een computer. Maar tijdens het ontwerpen hoef je gelukkig niet met enen en nullen te werken. Hier gebruiken we een kleurmodel voor. HBS is zoals gezegd een kleurmodel, maar er zijn er meer:

RGB vs CMYK
  • RGB (red, green, blue · alle van 0 tot 255)
    Dit kleurmodel gebruikt additieve kleurmenging, oftewel lichtmenging. Hoe meer kleuren, hoe meer licht. Het midden van het beeld is daarom het meest helder en wit. Additief betekent dan ook optellen. Bij het mengen van licht gelden rood, groen en blauw als de primaire kleuren. Andere kleuren ontstaan door het mengen van rood, groen en blauw in verschillende verhoudingen (Natuurkunde.nl — Kleurmengen, 2020). RGB is het kleurmodel voor digitale producten.
  • CMYK ( cyan, magenta, yellow, key)
    Subtractieve kleurmenging is eigenlijk het tegenovergestelde van additieve kleurmenging, subtractie betekend dan ook aftrekken. Je kan bij subtractieve kleurmenging denken aan verfmenging, waarbij geldt: Hoe meer kleuren, hoe minder licht. Het midden van het beeld is daarom het meest donker. Bij de kleurmenging van de drie kleuren wordt de kleur in principe zwart. In de praktijk blijkt echter dat dit eerder een bruinachtige kleur is. Om mooi zwart te krijgen wordt zwart, ook wel de ‘Key-plate’ oftewel de belangrijkste drukplaat, apart afgedrukt. De ‘K’ in ‘CMYK’ staan dan ook voor Key. Het is dan ook een vierkleurendruk (Gearside Design, 20 maart 2012). Het CMYK-kleursysteem wordt gebruikt voor printwerk.

Maar waarom dan het HBS model gebruiken? Dat is een model wat zoals verteld enorm eenvoudig is om verschillende tinten, tonen en schaduwen te creëren op basis van dezelfde hue. Dit is bij RGB & CMYK lastiger, en daarnaast is CMYK gebaseerd op printwerk.

Kleurenharmonieën

Op basis van deze harmonieën kan je gebalanceerde ontwerpen maken. Vaak worden deze kleurencombinaties al onbewust gebruikt, maar door hier meer over te leren, kan je betere combinaties maken en misschien nog wel belangrijker, goed onderbouwen! Laten we iets dieper ingaan op de zes verschillende harmonieën.

Monochromatische kleurenharmonie
“Mono” betekent vanzelfsprekend één kleur (Kaushik, 2022). Voor dit kleurenschema begin je met één zuivere kleur (bijvoorbeeld rood) en gebruik je vervolgens tinten, tonen en schaduwen om verschillende varianten van kleuren te maken om een harmonieuze kleurencombinatie te creëren. Monochromatische kleurenpaletten kunnen er erg goed uitzien, maar vergeet niet om op contrast te letten. Als een hele website of app een monochroom kleurenschema gebruikt, kan het voor de gebruiker moeilijk zijn om te vinden wat diegene zoekt.

Monochromatische kleurenharmonie

Je kan door de B (brightness) en/of S (saturation) waarden te wijzigen van de oorspronkelijke kleur, verschillende varianten te maken van een kleur. Die kan je dan gebruiken voor jouw monochrome ontwerp.

Aanverwante kleurenharmonie
Dit zijn kleuren die naast elkaar op het kleurenwiel zitten. De ‘hue’ verschilt daardoor niet enorm en kunnen zeker in combinatie met wit en zwart erg mooie resultaten opleveren.

Aanverwante kleurenharmonie

Je kan door de H (Hue) waarde te wijzigen van de oorspronkelijke kleur, aanverwante varianten maken van een kleur. Die kan je dan gebruiken voor jouw aanverwante kleurenharmonie.

Complementaire kleurenharmonie
Deze harmonie bevat twee kleuren die tegenover elkaar staan in het kleurenwiel. Voorbeelden van complementaire combinaties zijn geel en paars, blauw en oranje, rood en groen. Vanwege het hoge contrast kunnen complementaire kleuren plezier en opwinding toevoegen aan websites.

Complementaire kleurenharmonie

Je kan door de H (Hue) waarde van de oorspronkelijke kleur te verhogen/verlagen met 180, de complementaire kleuren vinden van een kleur. Die kan je dan gebruiken voor jouw complementaire kleurenharmonie.

Complementaire gesplitste kleurenharmonie
Deze harmonie is nog een stap verder dan de complementaire harmonie. In plaats van slechts één kleur als compliment te gebruiken, gebruik je twee kleuren naast elkaar op het wiel om je hoofdkleur te complimenteren.

Complementaire gesplitste kleurenharmonie

Door de H (Hue) waarde van de oorspronkelijke kleur eerst te verhogen met 150, en daarna te verlagen met 150 creëer je drie verschillende waarden. Die drie waarden vormen samen een complementaire gesplitste kleurenharmonie.

Driehoekige kleurenharmonie
Bij deze kleurenharmonie vormt er een driehoekige vorm in de kleurencirkel. Hierbij worden drie kleuren gebruikt met gelijke afstand van elkaar. Het is belangrijk om ervoor te zorgen dat de kleuren in balans zijn. Laat één kleur het ontwerp domineren terwijl de twee andere kleuren worden gebruikt voor accenten.

Driehoekige kleurenharmonie

Door de H (Hue) waarde van de oorspronkelijke kleur eerst te verhogen met 120, en daarna te verlagen met 120 creëer je drie verschillende waarden. Die drie waarden vormen samen een driehoekige kleurenharmonie.

Vierkante kleurenharmonie
Bij deze kleurenharmonie vormt er een rechthoekige vorm in de kleurencirkel. Hierbij worden vier kleuren gebruikt met gelijke afstand van elkaar. Omdat je veel verschillende kleuren gebruikt is het belangrijk om ook hier goed te kijken naar de balans van de kleuren.

Vierkante kleurenharmonie

Welke kleurharmonie moet ik gebruiken?

Onderzoek jouw doelgroep
Percepties van kleuren kunnen afhangen van meerdere factoren zoals geslacht, culturele verschillen en leeftijd. Voordat je begint met het kiezen van een kleurenpalet, moet je vaststellen wie jouw doelgroep is. Wat zijn hun gemeenschappelijke eigenschappen, en wat zijn hun verwachtingen? Welke merken zijn populair bij jouw doelgroep? Door hier goed onderzoek naar te doen kan je beter die keuze maken en ook onderbouwen.

kleurenpsychologie
Volgens kleurenpsychologie reageert en interpreteert de menselijke geest onbewust kleuren op een manier die onze acties beïnvloedt. Als je een kleurenpalet wilt maken die bij jouw doelgroep en merkverhaal hoort, is het een goed idee om te kijken naar de basis daarvan(Kleurenpsychologie — Betekenis Van Kleuren, n.d.).

  • Oranje is energiek en warm. Enkele veel voorkomende associaties met oranje zijn creativiteit, enthousiasme, luchtigheid en betaalbaarheid.
  • Rood is de kleur van bloed, dus het wordt vaak geassocieerd met energie, oorlog, gevaar en macht, maar ook met passie, verlangen en liefde.
  • Geel roept positiviteit, jeugd, vreugde, speelsheid, zonneschijn en warmte op.
  • Roze roept gevoelens van onschuld en delicatesse, dankbaarheid, romantiek, zachtheid en waardering op.
  • Blauw wordt gezien als gezaghebbend, betrouwbaar en betrouwbaar. Het symboliseert kalmte, vertrouwen, waardigheid en veiligheid.
  • Groen is de kleur van de natuur. Het symboliseert groei, frisheid, geld, gezondheid en genezing.
  • Zwart staat voor macht, elegantie en autoriteit. Veel voorkomende associaties met zwart omvatten ook klasse, formaliteit, mysterie, geheimhouding en ernst.
60%, 30%, 10% regel

60%, 30%, 10% regel
Daarnaast is het belangrijk dat je de juiste balans vind tussen verschillende kleuren. Deze populaire ontwerp truc is een goede manier om je ontwerp in balans te houden. Deze formule schrijft voor dat 60% van je ontwerp uit de dominante tint moet bestaan, 30% van de secundaire kleur en de resterende 10% uit de accentkleur. Door je aan deze formule te houden, communiceert jouw ontwerp duidelijk welke onderdelen de prioriteit hebben.

Contrast
Tot slot is het ook erg belangrijk om te kijken naar contrast. Teksten moeten leesbaar zijn. Ook moeten belangrijke onderdelen, bijvoorbeeld een CTA knop opvallen. Je kan het contrast in jouw ontwerpen testen op deze website.

Tools

Tools

  • Adobe Color
    Maak kleurenpaletten met het kleurenwiel of een afbeelding en blader door kleurencombinaties.
  • Color Styleguide
    Een Figma plugin die automatisch de vastgelegde kleuren in het bestand omzet naar een styleguide.
  • Pastel
    Bewaar, blader en gebruik kleurenpalleten in een native app voor macOS.

Dit was mijn artikel! Hopelijk heb je er wat aan :)

--

--