Kleurenleer voor designers: alles wat je moet weten over kleur

Kleurenleer voor designers: alles wat je moet weten over kleur

27 oktober 2020

Kleuren zijn ontzettend belangrijk voor je ontwerp. In dit artikel over kleurentheorie leer je hoe je effectief werkt met kleuren en hoe ze samenwerken.

In ons vorige artikel vertelden we je al wat de betekenis is van kleuren op je website. In dit artikel gaan we aan de slag met kleurenleer; hoe kleuren in elkaar zitten en hoe je deze het beste kunt opslaan. Deze kleurentheorie komt van pas bij het combineren van kleuren en het samenstellen van kleurenpaletten.

Kleurencirkel van Itten

Kleurenwiel van Itten

De kleurencirkel van Johannes Itten is een manier om kleuren visueel te laten zien en hoe deze gerelateerd zijn aan elkaar. De kleurencirkel is onderdeel van zijn kleurenleer.

Primaire en secundaire kleuren

In het midden zijn de drie primaire kleuren te zien; geel, rood en blauw. Door deze te mengen ontstaan drie secundaire kleuren: oranje, paars en groen. Door de primaire met de secundaire kleuren te mengen ontstaan uiteindelijk de tertiaire kleuren.

Ook zijn de kleurencirkel van Itten de koude en warme kleuren bij elkaar gezet. Net uit het midden loopt een denkbeeldige lijn met links daarvan de koude kleuren en rechts daarvan de warme kleuren.

Warme en koude kleuren

In ons eerdere artikel hebben het al over warme en koude kleuren gehad. Warme kleuren hebben (een deel) geel in zich, koude kleuren zijn een menging van blauw. Gevoelsmatig komt blauw koel over (denk maar eens aan ijs of water). Warme kleuren geven een warmer gevoel (zoals de gele zon of oranje vlammen).

In de kleurenwiel van Itten zie je dat de warme kleuren rechts zijn geplaatst en de koude kleuren staan links. Neutrale kleuren (zoals groen en paars) staan hier tussenin. Ook wit en zwart (wat eigenlijk geen kleuren zijn) zijn neutraal.

Tint, verzadiging en intensiteit

Kleurenleer; tint, verzadiging en intensiteit

Tint (of hue in het Engels), verzadiging (in het Engels saturation) en intensiteit (luminosity) zijn de drie eigenschappen waaruit een kleur bestaat. De tint is de daadwerkelijke kleur (bijvoorbeeld blauw of rood). Met de verzadiging wordt de intensiteit van de kleur bepaald. Dit wordt bereikt door de kleur met minder of meer grijs te mengen. De kleur wordt feller als er geen grijs wordt gebruikt, en fletser naarmate er meer grijs wordt gemengd. Ten slotte maakt de intensiteit een kleur lichter of donkerder door zwart of wit toe te voegen.

Kleurenruimtes

Kleurenruimtes zijn systemen waarmee kleuren kunnen worden aangeduid. Omdat namen die aan kleuren gegeven worden (bijvoorbeeld marineblauw) niet precies genoeg zijn, zijn er verschillende manieren bedacht om kleuren vast te leggen. Deze kunnen vervolgens door middel van een kleurcode worden gecommuniceerd. Om de kleuren visueel te maken zijn verschillende grafieken en diagrammen gemaakt. Hieronder lees je meer over de belangrijkste kleurenruimtes. Als je weleens met Photoshop of HTML hebt gewerkt, komt dit je vast bekend voor.

HSL

Kleurenruimte HSL

Met de elementen tint, verzadiging en intensiteit kunnen vrijwel alle kleuren op je scherm getoverd worden, en dit zijn dan ook gelijk de naamgevers van de kleurruimte HSL. HSL staat voor hue, saturation en luminosity. Soms wordt in plaats van de laatste ook wel eens intensity gebruikt, waardoor de afkorting HSI ontstaat.

Deze drie kleureigenschappen worden visueel ook wel in een kleurkegel geplaatst. Door verder naar buiten te gaan op een schijf raakt een kleur meer verzadigd, terwijl verticaal de intensiteit van de kleur wordt geïllustreerd.

RGB

RGB is een kleurensysteem waarin kleuren worden opgebouwd door de kleuren rood, groen en blauw, en hier komt ook direct de naam vandaan. De kleurcodes kunnen in twee manieren worden opgeschreven, waarbij het hexadecimale stelsel het vaakst wordt gebruikt. Negen tekens (voor elke kleur drie) gescheiden door een komma laat zo de precieze kleur zien. Ook kunnen de kleuren eenvoudig worden omgezet naar een 8-bits getal.

RGB-kleuren

KleurHexadecimale kleurcodering8-bits notatie
Wit 255, 255, 255 #FFFFFF
Rood 255, 0, 0 #FF0000
Blauw 0, 0, 255 #0000FF
Groen 0, 255, 0 #00FF00
Geel 255, 255, 0 #FFFF00
Zwart 0, 0, 0 #000000

De primaire kleuren geel, rood en blauw zijn makkelijk te onthouden, doordat RGB hier helemaal vol of op nul staan. De kleuren hier tussenin (zoals oranje) hebben halve waardes. RGB-kleuren worden vooral gebruikt in HTML, CSS en digitale ontwerpen.

CMYK

Kleurenruimte CMYK

CMYK staat voor cyan (cyaan), magenta, yellow (geel) en key (zwart). Met deze basiskleuren kunnen veel kleuren samengesteld worden, bedoeld voor drukwerk. Deze kleuren worden gemaakt door verschillende kleuren inkt met elkaar te mengen. De key wordt toegevoegd om diepzwart te krijgen. Bij het mengen van cyaan, magenta en geel ontstaat namelijk een soort donkerbruin. Omdat het CMYK-systeem andere kleuren gebruikt dan het RGB-systeem is het moeilijk om deze direct over te zetten. Ook is het bereik van CMYK kleiner, waardoor er minder kleuren mogelijk zijn.

Pantone (PMS)

Pantone kleuren (PMS)

Pantone kleuren zijn kleuren die in het PMS (Pantone Matching System) zijn ingedeeld. Het doel van deze kleuren is ervoor te zorgen dat de kleuren er hetzelfde uitzien, onafhankelijk van het gebruikte materiaal en afwerking. Oorspronkelijk alleen bedoeld voor drukwerk, maar later zijn er ook kleuren voor beeldschermen ontwikkeld. Deze kleuren worden simpelweg met een getal uitgedrukt, bijvoorbeeld Pantone 16-1546. Soms wordt nog een letter toegevoegd als er een speciale afwerking of ondergrond vereist is.

Kleurentheorie

Je weet nu hoe kleuren ingedeeld worden in warme of koude kleuren, hoe je kleuren kunt opslaan en wat kleurcodes zijn. In ons volgende artikel leer je hoe je kleuren kan combineren en hoe je je eigen kleurenpaletten maakt.