Het creëren van een mooie kleurharmonie en het combineren van kleuren die goed bij elkaar passen, is grotendeels gebaseerd op gevoel, ervaring en smaak. Het vermogen om kleuren op harmonieuze wijze te combineren vereist een zekere intuïtie en artistiek inzicht.
De wetenschap achter kleurcombinaties
Kleuren combineren is niet alleen een creatieve vaardigheid, maar ook een wetenschap op zich. Door gebruik te maken van het kleurenwiel en specifieke kleurregels, kunnen we kleurharmonieën samenstellen die een bepaald gevoel of sfeer oproepen. Het kleurenwiel biedt een visueel hulpmiddel om te begrijpen hoe kleuren met elkaar in verband staan en hoe ze harmonieus kunnen worden gecombineerd.
De impact van kleur in ontwerp
Geen enkel ander visueel element heeft zoveel impact op de kijker als kleur. Kleur trekt de aandacht en brengt een boodschap over. Een kleur staat nooit op zichzelf, maar wordt altijd in relatie tot andere kleuren gezien. Hierdoor kun je kleurencomposities of harmonieën creëren, gebaseerd op de kleuren van verschillende elementen op de pagina.
De kleurencirkel van Itten
Een belangrijk hulpmiddel bij het kiezen van kleurencombinaties is de kleurencirkel. Traditioneel maken schilders, ontwerpers en andere creatieve professionals gebruik van een kleurenwiel gebaseerd op de theorie van Johannes Itten. Deze kleurencirkel bestaat uit twaalf driehoeken die de relatie tussen verschillende kleuren illustreren.
De kleurencirkel volgens Johannes Itten: in het midden staan de primaire kleuren geel, rood en blauw. De driehoeken op de tweede cirkel zijn de secundaire kleuren. Op de buitenste cirkel staan de primaire, secundaire en tertiaire kleuren.
De kleurencirkel van Johannes Itten is gebaseerd op het subtractieve kleursysteem, waarbij kleurpigmenten in verschillende materialen bepaalde kleuren uit het invallende witte licht absorberen en andere reflecteren. Itten beschouwde rood, geel en blauw als de primaire kleuren. Door het mengen van de primaire kleuren ontstaan de secundaire kleuren oranje, groen en violet.
Door het mengen van een primaire en een secundaire kleur ontstaan tertiaire kleuren zoals geel-oranje, rood-oranje, rood-violet, blauw-violet, blauw-groen en geel-groen, resulterend in een totaal van twaalf kleuren.
De kleurencirkel van Itten bestaat uit pure, verzadigde kleuren, zonder toevoeging van wit, zwart of grijs.
Ittens kleurencirkel biedt een rijk palet dat kunstenaars en ontwerpers in staat stelt om diverse en harmonieuze kleurcombinaties te verkennen en te gebruiken in hun creatieve werken.
Primaire kleuren: De basiskleuren rood, geel en blauw. Secundaire kleuren: Deze worden gevormd door het mengen van twee primaire kleuren. Tertiaire kleuren: Deze worden gevormd door het mengen van een primaire kleur met een aangrenzende secundaire kleur.
Pure verzadigde kleuren volgens Itten met schaduwen en tinten
Schaduwen zijn verzadigde kleuren met zwart toegevoegd
De tinten zijn verzadigde kleuren met wit toegevoegd
Wetenschappelijk niet correct
Volgens wetenschappelijke inzichten is Ittens cirkel echter niet correct, omdat de ware primaire kleuren magenta, cyaan en geel zijn. Hier vind je de natuurkundig correcte subtractieve kleurencirkel.
Desondanks wordt Ittens systeem vaak als harmonieuzer beschouwd dan de wetenschappelijk correcte kleurencirkel en wordt het daarom veel gebruikt als uitgangspunt voor het creëren van harmonieuze kleurcombinaties.
Zuivere of verzadigde kleuren, tinten, schaduwen en tonen
Verzadiging (Saturation)
Verzadigde kleuren zijn pure kleuren; dit zijn de primaire, secundaire en tertiaire kleuren zoals die voorkomen op de kleurencirkel van Itten. Verzadiging bepaalt de intensiteit van een kleur. Hoge verzadiging resulteert in levendige kleuren, terwijl lage verzadiging leidt tot meer gedempte, zachte kleuren.
Toepassing: Door de verzadiging aan te passen, kun je de impact van een kleur veranderen zonder de basis te wijzigen. Verminder de verzadiging voor een subtiele, professionele look, of verhoog deze om elementen te laten opvallen.
Gebruik van verzadigde kleuren
Verzadigde, pure kleuren zijn bijzonder effectief voor signalering en waarschuwingen, omdat ze sterk de aandacht trekken. Ze spelen ook een cruciale rol in merkidentiteiten en gebruikersinterfaces, waar ze helpen bij navigatie en interactie door belangrijke elementen zoals knoppen en links te benadrukken.
Belangrijke overwegingen: Hoewel verzadigde kleuren krachtig zijn, vereisen ze zorgvuldig gebruik. Een overvloed aan heldere kleuren kan overweldigend zijn en visuele vermoeidheid veroorzaken. Balans en harmonie met minder verzadigde tinten zijn cruciaal voor het creëren van esthetisch aangename en effectieve ontwerpen.
Tinten (Tints)
Tinten zijn pure kleuren gemengd met wit, wat resulteert in een lichtere variant van de oorspronkelijke kleur. Dit proces maakt de kleur helderder en past het aan voor een subtieler, meer verfijnd uiterlijk. Tinten brengen een gevoel van frisheid en openheid in ontwerp, vaak geassocieerd met zachtheid en kalmte.
Toepassing: Gebruik tinten voor een elegante en uitnodigende uitstraling. Ze zijn bijzonder geschikt voor achtergronden en grote vlakken, waarbij ze visuele rust en helderheid bieden. De lichtere varianten van kleuren kunnen ook helpen bij het creëren van visuele hiërarchie door bepaalde elementen minder prominent te maken zonder ze volledig te verbergen.
Schaduwen (Shades)
Schaduwen ontstaan door het toevoegen van zwart aan pure kleuren, wat resulteert in donkerdere, meer gedempte varianten. Dit proces versterkt de diepte en rijkdom van de kleur, waardoor een gevoel van ernst en gewicht wordt toegevoegd.
Toepassing: Gebruik schaduwen om diepte en contrast te creëren, waardoor elementen zoals tekst en pictogrammen worden benadrukt. Schaduwen kunnen ook bijdragen aan een meer ingetogen en professionele uitstraling, geschikt voor zakelijke en formele omgevingen. Echter, overmatig gebruik kan leiden tot een somber of te zwaar gevoel, dus balans is essentieel.
Tonen (Tones)
Tonen zijn het resultaat van het toevoegen van zowel zwart als wit (grijs) aan pure kleuren, wat leidt tot een vermindering van de intensiteit zonder de kleurtint volledig te veranderen. Dit proces creëert subtiele, gedempte kleuren die complexiteit en verfijning toevoegen aan het ontwerp.
Toepassing: Gebruik tonen om een gevoel van diepte en subtiliteit te creëren, ideaal voor achtergronden en secundaire elementen die een ondersteunende rol spelen in het ontwerp. Ze helpen bij het verminderen van visuele ruis en zorgen voor een rustige, samenhangende uitstraling.
Verzadigde kleur met tinten, schaduwen en tonen
Praktische tips voor kleurgebruik
Hier zijn enkele tips om effectief kleurgebruik toe te passen:
Begrijp de basis van kleurenpsychologie:
Kleuren roepen verschillende emoties en associaties op. Blauw straalt rust en betrouwbaarheid uit, rood staat voor energie en urgentie, geel is vrolijk en optimistisch, en groen wordt vaak geassocieerd met natuur en gezondheid. Kies kleuren die passen bij de boodschap die je wilt overbrengen.
Meer over kleurenpsychologie vind je op deze pagina: Kleurenpsychologie.
Gebruik de kleurencirkel:
De kleurencirkel is een essentieel hulpmiddel voor het vinden van harmonieuze kleurencombinaties. Experimenteer met complementaire (tegenover elkaar op de cirkel), analoge (naast elkaar op de cirkel), triadische (drie kleuren gelijkmatig verdeeld op de cirkel) en andere kleurenschema's om een gebalanceerde visuele uitstraling te creëren.
Beperk het aantal kleuren:
Gebruik een beperkt kleurenpalet om je ontwerp overzichtelijk en professioneel te houden. Te veel kleuren kunnen het ontwerp rommelig en chaotisch maken. Een goed startpunt is om je te houden aan drie hoofdkleuren en variaties daarvan.
Pas de 60%-30%-10% regel toe:
Deze regel helpt bij het creëren van een gebalanceerde compositie. Gebruik je hoofdkleur voor 60% van het ontwerp, een secundaire kleur voor 30%, en een accentkleur voor de resterende 10%. Dit zorgt voor een visueel aantrekkelijke en harmonieuze uitstraling.
Gebruik contrast effectief:
Contrast is belangrijk om elementen te onderscheiden en de leesbaarheid te verbeteren. Zorg ervoor dat er voldoende contrast is tussen tekst en achtergrond. Donkere tekst op een lichte achtergrond is meestal het beste voor leesbaarheid.
Vermijd vibrerende kleurcombinaties:
Wanneer complementaire kleuren zoals rood en groen, blauw en oranje of geel en paars naast elkaar worden gebruikt, kunnen ze een vibrerend effect creëren dat onprettig is voor de ogen en moeilijk te lezen tekst oplevert. Gebruik deze kleuren met mate en zorg voor voldoende scheiding of variatie in verzadiging en helderheid.
Houd rekening met toegankelijkheid:
Ongeveer 8% van de mannen en 0.5% van de vrouwen hebben een vorm van kleurblindheid. Zorg ervoor dat je ontwerpen toegankelijk zijn door kleuren te kiezen die goed contrasteren voor kleurblinde gebruikers. Gebruik ook andere visuele aanwijzingen zoals patronen of tekst om informatie over te brengen.
Kies kleuren die passen bij de merkidentiteit:
Als je voor een merk werkt, zorg dan dat de kleuren consistent zijn met de merkidentiteit. Gebruik de merkstijlrichtlijnen om de juiste kleuren te kiezen en zorg voor consistentie in al je ontwerpen.
Gebruik neutrale kleuren voor balans:
Neutrale kleuren zoals wit, zwart en grijs kunnen helpen om felle kleuren in balans te houden en geven je ontwerp een rustige en professionele uitstraling. Ze zijn ook nuttig als achtergrondkleuren.
Test je kleurenschema’s:
Test verschillende kleurencombinaties om te zien hoe ze eruitzien in verschillende contexten en op verschillende apparaten. Wat er goed uitziet op een computerscherm, ziet er misschien anders uit op een mobiel apparaat of in gedrukte vorm.
Doe inspiratie op:
Kijk om je heen voor kleurinspiratie. Dit kan komen van de natuur, kunstwerken, mode, of andere ontwerpen die je aanspreken. Experimenteer met verschillende combinaties die je ziet om unieke en harmonieuze kleurenschema's te ontdekken.
Gebruik online tools:
Er zijn veel online tools beschikbaar om je te helpen bij het kiezen van kleuren, zoals Adobe Color, Coolors, en Color Hunt. Deze tools kunnen suggesties geven voor kleurenpaletten en helpen bij het visualiseren van je keuzes.
Hieronder is een fictief voorbeeld uitgewerkt van hoe je verschillende kleurharmonieën kunt samenstellen. We beginnen met een foto van een roodharig meisje die we graag willen gebruiken op de cover van een boek.
Kijken, dichter en nog dichter kijken!
Elke foto heeft een natuurlijk kleurenpalet, de eerste stap is om het kleurenpalet te vinden en vervolgens te ordenen.
Op een normale kijkafstand (zie startbeeld) zien we tientallen kleuren, huidtinten, rood haar, bordeaux jurk, groene bomen,... maar zoom in en je ziet miljoenen kleuren.
De eerste stap is om deze kleuren te rangschikken en te beperken tot een aantal dat we kunnen beheersen, 16, 32, 64. Dit doen we in Photoshop.
Startbeeld links, rechts na Photoshopfilter "Mozaïek".
Photoshop
Open de foto die je gekozen hebt in Photoshop.
Dupliceer de achtergrondlaag, zodat het oorspronkelijke beeld bewaard blijft.
Kies in de menubalk Filter > Pixel > Mozaïek.
Een grote celgrootte geeft je weinig kleuren, als je er meer nodig hebt, kies dan een kleinere celgrootte.
Sla het mozaïekbeeld op.
Photoshopfilter "Mozaïek".
InDesign
Plaats het mozaïek beeld in een nieuw InDesign document op A4 formaat.
Selecteer verschillende kleuren met het pipet, zet een wit kader rond de kleuren die je selecteert.
Begin met de meest opvallende kleuren, in het voorbeeld; huid, haarkleur, jurk en bomen.
Vervolgens kies je minder opvallende kleuren, in het voorbeeld; lippen, de lichten in het haar en de zachte schaduwen.
Merk op dat de foto een donkere (schaduwen) en een lichtere zijde heeft, het is niet erg opvallend, maar het is wel belangrijk.
Sorteer de resultaten per kleurtint, verwijder de kleuren die teveel op elkaar lijken.
Sla dit op: "NaamVoornaam_kleurgebruik".
Selectie van de verschillende kleurtinten met het pipet in InDesign.
Een selectie van de resultaten gesorteerd per kleurtint.
Elke kleur uittesten.
Maak een nieuwe pagina aan in jouw bestand en plaats de foto op een staal van elke kleur. Maak ook het onderscheid (warme & koude).
De resultaten zien er goed uit, niet? Het leuke van deze techniek is dat het resultaat er altijd goed en professioneel uitziet, dit komt omdat de gebruikte kleuren reeds aanwezig zijn in de foto.
Dit zijn de warme kleuren, roze en zalm tinten, sepia’s en bruintinten van het roodharige model. Deze kleuren maken haar “look” zachter, vrouwelijker. Deze kleuren geven een warme, zorgzame uitstraling.
Om de warme en de koude kleuren van elkaar te scheiden is er een lijn getrokken door het middelpunt van de kleurencirkel. De warme kleuren zijn geel, oranje, rood. De koele of koude kleuren zijn blauw, groen en violet.
Warme en koude kleuren roepen verschillende emoties op, denk bij warme kleuren aan een mooie zomerdag, zonsondergang, vuur, warmte. Koude kleuren doen eerder denken aan ijs, natuur, water een heldere hemel.
Warme kleuren.
Koele of koude kleuren – vooral blauwtinten – hebben een ernstige, zakelijke uitstraling. Merk op dat naarmate het kleur donkerder wordt, het aangezicht van het meisje helderder wordt. Het lijkt alsof ze loskomt van de pagina. Deze voorbeeld foto bestaat eerder uit warme kleuren, de tint uiterst links, is op de grens tussen koel en warm.
Koude kleuren.
De basiskleur kiezen en meer kleuren toevoegen
De volgende stap is het toevoegen van extra kleuren. Selecteer één van de kleuren, eender welke. (In het voorbeeld bordeaux).
Zoek de geselecteerde kleur op het kleurenwiel. Het kleurenwiel is vrij “basic”, verwacht niet dat je altijd de exacte tint terugvindt.
Deze toon, tint of schaduw noemen we de basiskleur. Vast staat dat deze kleur harmonieert of past bij de foto.
De laatste fase is om kleuren te vinden die passen of harmoniëren met de basiskleur. Houd er rekening mee dat als er tekst en andere grafische elementen op de pagina staan dat je zowel donkere als lichte kleuren nodig hebt om voor het nodige contrast te zorgen.
Het doel van het kleurenwiel is om de relatie van de geselecteerde basiskleur
met de andere kleuren te zoeken. In het vierkantje de plaats van de basiskleur op het kleurenwiel.
Creëren van kleurharmonieën
Met als uitganspunt de basiskleur – in het voorbeeld bordeaux-rood – is het mogelijk om een aantal harmoniërende kleurpaletten te creëren.
Monochromatische harmonie
Een monochromatische harmonie bestaat uit de donkere, medium en lichte tinten van een basiskleur, waarbij de verzadiging en helderheid variëren. Deze tinten bevinden zich binnen dezelfde sectie van de kleurencirkel. Schaduwen worden gevormd door het mengen van een zuivere kleur met zwart, tinten ontstaan door het mengen van een zuivere kleur met wit, en tonen worden gecreëerd door het mengen van een zuivere kleur met grijstinten.
Deze harmonie heeft geen kleurdiepte, maar biedt in plaats daarvan contrast door middel van donkere, medium en lichte tinten, wat essentieel is voor een goed ontwerp. Het realiseren van grote contrasten kan een uitdaging zijn. In de interieurvormgeving wordt soms ook gesproken over "ton sur ton".
Voorbeeld van een monochromatische harmonie.
Monochromatische harmonie.
Analoge of aanverwante harmonie
Aan beide zijden van de basiskleur bevinden zich de verwante kleuren van deze basiskleur. Deze kleuren binnen deze harmonie delen dezelfde ondertonen, zoals oranje en rood in dit voorbeeld. Deze combinaties resulteren in prachtige kleurharmonieën met zachte contrasten. Deze kleurpaletten zijn eenvoudig om mee te werken, omdat ze rust en uniformiteit in een ontwerp creëren.
Voorbeeld van een anologe of aanverwante harmonie.
Anologe of aanverwante harmonie.
Complementaire of aanvullende kleurenharmonie
Tegenover de basiskleur liggen de complementaire of aanvullende kleuren - in dit geval de blauwgroene reeks. Complementaire kleuren zorgen voor contrast en brengen energie, spanning en kracht met zich mee.
Wanneer complementaire kleuren worden gemengd, ontstaat in additieve (licht) menging wit, in subtractieve (pigmenten) menging zwart.
Gewoonlijk wordt de complementaire kleur gebruikt als accentkleur, zoals te zien is in het voorbeeld hiernaast, waar een groen vlak wordt geplaatst op een oranjerood veld. Het is aan te raden om een 80/20 verhouding te hanteren om het schokkende contrast van een 50/50 verhouding te vermijden.
Complementaire kleuren zijn minder geschikt om te gebruiken in combinatie met tekst. Andere voorbeelden van complementaire kleuren zijn blauw en oranje en geel en violet.
Complementaire of aanvullende kleurenharmonie.
Voorbeeld van een complementaire of aanvullende kleurenharmonie.
Complementaire gesplitste kleurenharmonie
Één stap links of rechts van de complementaire kleur bevinden zich de analoge of opeenvolgende kleuren van deze complementaire kleuren. Deze harmonie of kleurenpalet wordt ook wel "gesplitst complementair" genoemd.
De kracht van deze harmonie ligt in het subtiele, zachte contrast van de opeenvolgende kleuren, gecombineerd met het toegevoegde accent van een tegenovergestelde kleur. In het voorbeeld zal de rode kleur waarschijnlijk als accentkleur worden gebruikt.
Complementaire gesplitste kleurenharmonie.
Complementair opeenvolgende kleurharmonie
Dit gemengde kleurenpalet of harmonie is vergelijkbaar met de gesplitst complementaire kleur, maar met meer kleuren. Het uitgebreidere kleurenpalet creëert een koele en ijzige harmonie aan de "koude" zijde van de kleurencirkel, en een subtiel, rijk contrast aan de "warme" zijde van de kleurencirkel.
Een verhouding van 80/20 met de dominante kleur levert het beste resultaat op. Om diepte toe te voegen, kun je een lichtere tint van een van de accentkleuren gebruiken.
Het resultaat is een intense en opwindende combinatie!
Opeenvolgende kleuren van de basiskleur, die naast elkaar op de kleurencirkel liggen, creëren een warme harmonie. Deze harmonie wordt versterkt door een "hot spot" van een complementaire kleur. Opeenvolgende kleuren delen vergelijkbare tinten, wat resulteert in een subtiele en samenhangende uitstraling.
Houd in gedachten dat complementaire kleuren met dezelfde waarde de neiging hebben om met elkaar te "vechten". Ze vullen elkaar echter aan wanneer ze verschillend zijn. Daarom hebben we in InDesign gebruikgemaakt van de pipet om zowel donkere, middelste als lichte tinten van elke kleur te selecteren, wat helpt om evenwicht en diepte te creëren in het ontwerp.
Links, complementair met dezelfde waarde. Rechts, complementair met verschillende waarde.
Opeenvolgende complementaire kleurenharmonie
Drietal of triadic kleurenharmonie
Dit kleurenschema selecteert drie kleuren die op gelijke afstand staan op het kleurenwiel.
Dit kleurenschema creëert een levendige harmonie, vooral in dit voorbeeld met de primaire kleuren. Zelfs met minder verzadigde of donkerdere tinten kun je nog steeds een levendig effect bereiken.
Bij dit kleurenschema is het belangrijk om je kleuren zorgvuldig te kiezen. Laat één kleur domineren en gebruik de andere twee als accentkleuren.
Drietal of triadic kleurenharmonie.
Voorbeeld van een drietal of triadic kleurenharmonie.
Dubbel complementaire kleurenharmonie ook rechthoekig of tetradic genoemd
Dit kleurenschema selecteert vier kleuren die twee complementaire paren vormen.
Dit veelzijdige kleurenschema biedt talloze combinatiemogelijkheden. Het is belangrijk om binnen deze harmonie één kleur dominant te maken.
Let erop dat er een balans is tussen warme en koude kleuren. Zorg ervoor dat de warme en koude kleuren in evenwicht zijn.
Voorbeeld van een dubbel complementaire kleurenharmonie.
Dubbel complementaire kleurenharmonie, Adobe Color breidt het schema uit met een extra opeenvolgende kleur en noemt het "Dubbel complementair splitsen.
Vierkante kleurenharmonie
Dit kleurenschema lijkt sterk op het rechthoekige schema, maar in deze harmonie zijn de kleuren gelijkmatig verdeeld over de kleurencirkel. Het is ook hier belangrijk om één kleur dominant te laten zijn.
Houd er rekening mee dat er een balans moet zijn tussen warme en koude kleuren. Zorg ervoor dat de warme en koude kleuren in harmonie zijn.
Experimenteer ook met dit alternatief gratis kleurenwiel.
Met de gratis app Adobe Capture (inloggen met je Adobe school account) kan je onder andere kleurharmonieën maken van een foto die je neemt met je smartphone. Downloaden in de Apple AppStore of Googleplay.
De opdracht bestaat uit het ontwerpen van de cover voor een kookboek. Als foto gebruik je een beeld van jouw lievelingsgerecht. Het ontwerp moet fris, levendig en persoonlijk zijn. Tekst: "Mijn favoriete gerechten door: "vul hier je naam in". Het formaat van het kookboek en het lettertype mag je vrij kiezen. Kleur is bovendien in alle aspecten aanwezig.
Stap 1.
Zoek online een foto van jouw lievelingsgerecht.
(rechtstaand beeld en voldoende resolutie)
Stap 2.
Doorloop de stappen uit het voorbeeld onder de titel: "Kijken, dichter en nog dichter kijken!"
Stap 3.
Doorloop de stappen uit het voorbeeld onder de titel: "Elke kleur uittesten."
Stap 4.
Doorloop de stappen uit het voorbeeld onder
de titel: "De basiskleur kiezen en meer kleuren toevoegen."
Stap 5.
Maak, zoals onder de titel: "Creëren van kleurenharmonieën." de verschillende kleurenharmonieën van Adobe Color aan op basis van jouw gekozen basiskleur met behulp van het kleurenwiel in color.adobe.com. Schaduwen, samengesteld en aangepast moet je niet maken.
Log in met je Adobe account van de school zodat je de kleurcombinaties die je maakt kan bewaren en kan toevoegen in de stalenpaletten van de verschillende Adobe CC programma's.
Kies de soort kleurenharmonie (linker kant op de website Adobe Color).
Kopieer de hexadecimale kleurcode van je basiskleur en plak die in de eerste kolom.
Maak een screenshot van elke kleurenharmonie en zet deze op een nieuwe pagina in jouw bestand
met de titel erboven. (zie voorbeeld)
Herhaal bovenstaande stappen voor de vijf resterende kleurenharmonieën.
Sla het bestand opnieuw op.
In het voorbeeld is de basiskleur het oranje van de sinaasappelen,
de regel voor de kleurenharmonie is monochromatisch.
