Als je je januari nog kunt herinneren, was een van mijn doelen voor 2013 om meer over kleur te leren en iets van wat ik leer met jullie te delen. Ik heb eerder gesproken over hoe ik vind dat mijn vaardigheden in het werken met kleur tekortschieten en ik zei dat ik op een gegeven moment dit jaar een paar boeken over kleur zou pakken in de hoop dat te veranderen.
Een verjaardag, een enigszins gulle broer, en kwaliteitsservice van Amazon later, en een assortiment boeken (waaronder een paar specifiek over kleur) zijn hier wachtend om gelezen te worden. Bedankt David.
Ik ben klaar met het lezen van een van de kleurboeken, Design Elements: Color Fundamentals, en dacht dat ik moest beginnen met delen. Ik wil beginnen met hoe we kleuren beschrijven, deels omdat het het begin is en deels omdat het leidde tot enige duidelijkheid in hoe ik kleur begrijp.
How We Describe Color
Er zijn 3 primaire manieren om een kleur te beschrijven en omdat het boek het heeft toegevoegd, zal ik ook een 4e manier toevoegen om kleur te beschrijven.
- Tint – een ander woord voor kleur
- Verzadiging (chroma) – de intensiteit of zuiverheid van een tint
- Lichtheid (waarde) – de relatieve mate van zwart of wit gemengd met een bepaalde tint
- Temperatuur – de waargenomen warmte of koelte van een kleur
Laten we een beetje dieper ingaan op elk.
Tinten zijn kleuren en welke tint we zien is afhankelijk van de golflengte van het licht dat wordt weerkaatst of geproduceerd. Ik betwijfel of ik u moet vertellen wat een kleur is en aangezien kleur en tint synoniem zijn, zou u ook moeten weten wat een tint is. Ik wil u er wel aan herinneren dat we allemaal kleur anders waarnemen. De tint die u ziet, is misschien niet dezelfde tint die ik zie.
Verzadiging verwijst naar hoe zuiver of intens een bepaalde tint is. 100% verzadiging betekent dat er geen toevoeging van grijs aan de tint is. De kleur is volledig zuiver. Aan het andere uiterste verschijnt een tint met 0% verzadiging als een middengrijs. Hoe meer verzadigd (dichter bij 100%) een kleur is, hoe levendiger of helderder hij lijkt. Desaturated colors, on the other hand, appear duller.
Hoe verzadigd een tint lijkt hangt ook tot op zekere hoogte af van de kleuren waar hij naast staat. Een 50% verzadigde tint naast een 25% verzadigde tint zal levendiger lijken dan wanneer dezelfde tint naast een 75% verzadigde tint wordt geplaatst.
Lichtheid meet de relatieve mate van zwart of wit die met een bepaalde tint is gemengd. Toevoeging van wit maakt de kleur lichter (creëert tinten) en toevoeging van zwart maakt de kleur donkerder (creëert tinten). Het effect van lichtheid of waarde is relatief ten opzichte van andere waarden in de compositie. Je kunt een kleur lichter laten lijken door hem naast een donkerdere kleur te plaatsen.
Hoe groter het verschil in waarde tussen elementen, hoe groter het contrast tussen die elementen. Hierdoor is lichtheid een goede manier om contrast te tonen en hiërarchie tussen elementen aan te geven. Ongeveer 7 stappen van lichtheid is de maximale variatie die het menselijk oog kan onderscheiden. Daarboven wordt het moeilijk om de verschillen te onderscheiden.
Temperatuur is de waargenomen warmte of koelte van een kleur. Warme kleuren zijn rood, oranje en geel, terwijl koele kleuren groen, blauw en violet zijn. Ergens in het groene en violette spectrum verandert de temperatuur tussen warm en koel.
Hoe het oog de kleurtemperatuur herkent kan veranderen op basis van de lichtbron. De werkelijke temperatuur van een computermonitor kan bijvoorbeeld de waargenomen kleurtemperatuur beïnvloeden.
Warme kleuren hebben de neiging naar de voorgrond van een compositie te dringen, terwijl koelere kleuren naar de achtergrond verdwijnen. Net als verzadiging en lichtheid, kan temperatuur relatief zijn. Plaats een warme kleur tegen een warmere kleur en de oorspronkelijke kleur zal koeler lijken dan wanneer hij tegen een koele kleur wordt geplaatst.
Kleurharmonie
In het werken met kleur is ons doel een palet van aangename kleurcombinaties te kiezen (behalve in die gevallen waarin een onaangename combinatie de boodschap beter aanvult). We proberen een soort kleurenharmonie te bereiken.
Kleurenharmonie kan subjectief zijn. Wat voor uw oog werkt, werkt misschien niet voor het mijne. De beginselen van de kleurentheorie zijn erop gericht de subjectiviteit te verminderen door richtlijnen aan te reiken die ons helpen combinaties en groeperingen van kleuren te vinden die meer kans maken om goed te werken.
Een van de belangrijkste beginselen stelt bijvoorbeeld dat het oog altijd op zoek is naar evenwicht en balans in kleur, waardoor het tot neutrale combinaties komt, zoals wanneer een tint wordt gecombineerd met zijn tegenpool of complement. Dit is een van de redenen waarom we vaak nabeelden van een andere kleur zien (maar met dezelfde verzadiging en lichtheid) wanneer we te lang naar een bepaalde kleur staren.
De kleurtheorie leidt niet altijd tot voorspelbare resultaten. Soms gaan theorie en praktijk niet helemaal samen, wat betekent dat we onze ogen voor kleur moeten ontwikkelen en moeten experimenteren met verschillende combinaties van tint, verzadiging en lichtheid.
The Disconnect in Color Theory and Color Practice
Zoals ik hierboven al zei, klikte er iets voor mij bij het lezen van Color Fundamentals. We beschrijven kleur in termen van tint, verzadiging en lichtheid (HSL), maar toch stellen we kleurwaarden op het web meestal in met hex waarden en in mindere mate RGB waarden. Zou het niet logischer zijn om te werken met het systeem dat de kleur beter beschrijft?
Note: HSL is niet hetzelfde als HSB (hue, saturation, brightness) of HSV (hue, saturation, value) die in de meeste kleurentools te vinden zijn.
Hex en RGB zijn eigenlijk twee versies van hetzelfde ding. Elk biedt 256 mogelijke waarden voor hoeveel rood, groen of blauw er in een bepaalde kleur zit. HSL werkt anders. Er is geen gemakkelijke manier om een blik te werpen op iets als rgb(63, 69, 146) of het hex equivalent #3f4592 en gemakkelijk te weten dat het 40% verzadigd is of hsl(236, 40, 41).
Als u de wiskunde wilt zien die betrokken is bij het maken van de conversie, kijk dan eens naar een of meer van de onderstaande links
- Kleuralgoritmen
- RGB naar HSL kleurconversie
- HSL naar RGB kleurconversie
Waarom is dat? Waarom is er een kloof tussen hoe we kleur proberen te begrijpen en hoe we het proberen te gebruiken? HSL is het meer intuïtieve systeem, omdat het de kleuren beschrijft die we zien en past bij de kleurentheorie.
Ik realiseer me dat kleurvaardigheden voortkomen uit het ontwikkelen van een kritisch oog voor kleuren en het stellen van vragen over waarom iets werkt of niet werkt. En het gaat om het beantwoorden van die vragen terwijl je de kleuren om je heen observeert.
Het lijkt gewoon alsof het makkelijker zou zijn als zowel de theorie als de praktijk dezelfde taal zouden spreken. Nu ik tot dit besef ben gekomen, heb ik besloten me ertoe te verplichten zoveel mogelijk HSL-waarden in mijn code te gebruiken. Het struikelblok is IE8 en lager, die hsl() of rgb() niet accepteren. Zij hebben hexadecimale waarden nodig. Maar dat is niet erg, omdat SASS de conversie kan maken. Je kunt hsl() in SASS gebruiken en de html output een hexadecimale waarde laten zijn.
Om mijn toewijding kracht bij te zetten ben ik begonnen met het bouwen van een eenvoudig kleur gereedschap om me te helpen leren en studeren. Het is niet iets dat je in zijn huidige vorm zou willen gebruiken om een kleurenpalet te kiezen, maar het laat je spelen met tint, verzadiging, en lichtheid waarden om te zien hoe elk een bepaalde kleur beïnvloedt en de kleuren er omheen. Ik zal het gereedschap later in de week met jullie delen.
Al geruime tijd vermoedde ik dat de wiskundige relaties tussen kleuren een leidraad konden bieden voor het werken met kleuren en ik heb vaak gezocht naar die relaties in de hex waarden van kleuren. Mijn hoop voor het gebruik van hsl() en het spelen met mijn eenvoudige kleurentool is dat ze me zullen helpen om de theorie te verbinden met de kleuren die ik gebruik in het ontwerp een beetje beter dan ze zijn verbonden voor mij nu.
Houd deze disconnectie in hoe we leren over en beschrijven van kleur en hoe we het gebruiken in gedachten. Dit besef heeft me een beter inzicht gegeven in hoe we kleur beter kunnen bestuderen en daarom wilde ik dit gesprek beginnen met de basis van hoe we kleur beschrijven. Ik zal binnenkort meer berichten over kleur hebben, te beginnen later in de week als ik het heb over het eenvoudige hulpmiddel dat ik heb gemaakt om me te helpen.
Download een gratis voorbeeld uit mijn boek, Design Fundamentals.