Grafisch ontwerp Geplaatst op: 27 oktober 2020, aangepast op: 7 oktober 2023
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.
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.
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.
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 (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 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.
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 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.
| Kleur | Hexadecimale kleurcodering | 8-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 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 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.
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.
