3. Vormgeving - Kleurentheorie en Toepassing

• Marketing
• MBO
• Studiejaar 1

Vormgeving

Kleurentheorie en Toepassing

Waar gaat de module over?

Les 1 - Introductie tot online vormgeving

Les 2 - Basisprincipes en compositie

Les 3 - Kleurentheorie en toepassing

Les 4 - Typografie en Leesbaarheid

Les 5 - Interactiviteit en Respotiviteit

Les 6 - Doelgroep en Branding

Les 7 - Werken met verschillende formaten

Les 8 - Eindopdracht

Hoe haal je deze module?

Tijdens de lessen werk je aan verschillende opdrachten. Om deze module te behalen moet je alle opdrachten gemaakt hebben en tijdens de toetsweek een eindopdracht inleveren.

Je bent geslaagd als je een 5.5 behaald. 

Aan het einde van de les...

... weet je wat primaire, secundaire en complementaire kleuren zijn 

... ken je de verschillen tussen RYB, RGB en CMYK

... weet je waarom wij RGB-kleuren gebruiken en vaak hexadecimaal noteren

... weet je wat er bedoelt wordt met kleurtoon, tint en contrast

... ken je de betekenis van kleuren en het effect op het brein

... heb je een kleurenpallet gemaakt

... kan je kleur strategisch toepassen in ontwerpen

Het kleurenwiel

Het kleurenwiel vertegenwoordigt alle zichtbare kleuren. Het is het hulpmiddel om kleurencombinaties te bekijken en te begrijpen.

Primaire kleuren

Je kent het vast nog wel, door:

• rood,
• geel,
• blauw

te mengen kun je alle kleuren maken. Deze kleuren noem je daarom de primaire kleuren of basiskleuren. Ook wel RYB genoemd (red, yellow, blue). 

Digitaal gebruiken we: RGB, waarom?

Waarom RGB?

Omdat schermen op basis van licht werken. De primaire kleuren van licht zijn rood, groen en blauw: 

Red, Green, Blue oftewel RGB.

Secundaire kleuren

Secundaire kleuren krijg je door primaire kleuren in dezelfde hoeveelheid te mengen. Dus 50% rood + 50% blauw maakt paars.

Paars is dus een secundaire kleur.

Geel en cyaan ook (denk eraan: licht)

Hoe noem je het als je een primaire kleur met secundaire kleur mengt?

Tertiaire kleuren

Tertiaire kleuren of tussenkleuren.

Op het kleurenwiel bevinden de tertiaire kleuren zich tussen de primaire en secundaire kleuren.

Hoe krijg je wit?

Hoe krijg je zwart?

CMYK 

Als je iets ontwerpt voor drukwerk dan gebruik je CMYK als primaire kleur. Cyaan, Magenta, Geel (yellow) en key (zwart).

Wit krijg je door niets te drukken (wit papier)

RGB

Zwart krijg je door geen licht uit te stralen, geen licht, geen kleur.

RGB waardes

In de digitale wereld worden RGB-kleuren weergegeven in een waarde van 0 tot 255. Dit is vanwege de manier waarop computers binaire gegevens (enen en nullen) opslaan en verwerken.

Elke kleur (rood, groen, blauw) wordt opgeslagen als een 8-bit waarde. Met 8 bits kun je 2⁸ = 256 verschillende waarden representeren, namelijk van 0 tot 255.

Met 256 mogelijke waarden per kleurkanaal (R, G en B) krijg je een totaal van:

256 × 256 × 256 = 16.777.216 kleuren, oftewel 16,7 miljoen kleuren, wat voldoende is voor de meeste beeldschermen.

Bij het maken van de primaire, secundaire en tertiaire kleuren meng je dus de hoeveelheid rood, groen en blauw licht. 

R = 255

G = 0

B = 0

R = 0

G = 255

B = 0

R = 255

G = 255

B = 0

R = 180

G = 90

B = 0

Vraag:
Wat is de RGB code van wit?

R = 0

G = 0

B = 0

Hexadecimale waardes

Hexadecimale kleurcodes zijn een andere manier om RGB-kleuren weer te geven, maar in hexadecimaal (base 16) in plaats van decimaal (base 10). Hexadecimaal wordt veel gebruikt door computers omdat het op een natuurlijke wijze aansluit bij binaire getallen.

De reeks ziet er zo uit:

Waarbij A = 10, B = 11 (...)  F = 15

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Hoe werkt een hex-kleurcode?

Een hex-kleurcode bestaat uit zes tekens, bijvoorbeeld:

🔵 #FF5733

Deze code bestaat uit drie paren:

• FF (rood)
• 57 (groen)
• 33 (blauw)

Elk paar stelt de intensiteit van een kleurkanaal voor, net als in RGB (0-255), maar dan in hexadecimale vorm.  Hex is een compactere notatie die handig is voor webontwikkeling.

Complementaire kleuren

Complementaire kleuren zijn kleurcombinaties die tegenover elkaar liggen op het kleurenwiel, dit zorgt voor veel contrast.

Gebruik je juist kleuren die naast elkaar liggen, krijg je een harmonieus effect.

De kracht van kleur

Onderzoek toont aan dat mensen binnen 90 seconden na de eerste indruk een onbewust oordeel vellen over een ander of een merk en product.

Tussen 62% en 90% van die beoordeling is alleen op kleur gebaseerd.

Opdracht 1/2:
Wat doen kleuren met je?

1. Maak groepjes van 3
2. Elk groepje krijgt een kleur (of twee)
3. Bespreek met elkaar én schrijf op in je portfolio:

• Welke kleur(en) hebben jullie?
• Wat voor gevoel krijg je van de kleur?
• Zijn er opvallende verschillen in mening?
• Aan welke merken doet de kleur je denken?

Let op: Hierna meer sheets en een opdracht

Zie voor input de sheets na opdracht 2

Koele en warme kleuren

Voordat je iets maakt, moet je nadenken over het soort emoties dat je wilt overbrengen. Koele en warme kleuren hebben unieke eigenschappen die een afbeelding op allerlei manieren kunnen veranderen.

Koele kleuren geven een kalm, rustgevend gevoel, terwijl warme kleuren stimulerend en vrolijk zijn. Warme kleuren brengen het onderwerp ook dichter bij de kijker, terwijl koele kleuren de indruk geven dat dingen ver weg zijn.

Koel: Blauw spectrum

Warm: Rood spectrum

Toon en tint

Als je de primaire, secundaire en tertiaire kleuren gebruikt en mengt, noem je dat kleurtoon.

Meng je de kleuren met zwart of wit, dan noem je dat kleurtint. 

• pastel:  een kleur gemengd met wit
• schaduwkleur: vaak een menging met zwart

Toegankelijkheid

Weet je nog "vorm volgt functie"?

Kleur kan mooi en sfeervol zijn, maar zorg er altijd voor dat wat je maakt functioneel blijft. Tekst en achtergrond moet voldoende kleurcontrast bieden zodat de tekst leesbaar blijft. Complementaire kleuren hebben de hoogste contrast, maar zorgen niet altijd voor de beste leesbaarheid.

Doe de check:

https://webaim.org/resources/contrastchecker/

Opdracht 2/2:
Kleuren toepassen in een advertentie

• Beschrijf kort de doelgroep van een fictief merk
  (bijvoorbeeld ouders met pasgeboren baby)
• Experimenteer met kleurenpaletten in Adobe Color of Canva.
• Analyseer kort: Welke emoties roept dit palet op? Past het bij het merk of doelgroep?
• Kies 1 hoofdkleur en voeg 2-3 kleuren uit het pallet toe
• Maak een concept voor een online advertentie, let ook op compositie
  Gebruik je afbeeldingen? Zorg er dan voor dat deze bij het pallet passen.
• Voeg alles toe aan je portfolio

https://color.adobe.com/nl/create/color-wheel

Rood

Rood is de kleur van opvallen. Het trekt snel je aandacht en is daarmee een ideale kleur voor bijvoorbeeld verkeerslichten en waarschuwingsborden.

Positief

• Warmte
  
• Opwinding
  
• Enthousiasme
  
• Kracht

Ongunstig

• Agressief
  
• Dominant
  
• Ongeduldig
  
• Provoceren

Coca-Cola

Virgin Group

Levi’s

YouTube

Roze

Roze is de kleur van zorgzaamheid of medeleven. Het wordt vaak in verband gebracht met vrouwelijkheid.

De intensiteit van de kleur roze bepaalt grotendeels het gevoel dat er wordt opgeroepen. Bij een zachtere vorm, bijvoorbeeld babyroze, kan het een kalmerend effect teweeg brengen.

Positief

• Warmte
  
• Opwinding
  
• Enthousiasme
  
• Kracht

Ongunstig

• Agressief
  
• Dominant
  
• Ongeduldig
  
• Provoceren

Victoria Secret, Bakker Bart, T-Mobile en Cosmopolitan

Geel

Geel is de kleur van de zon, de kleur die emoties oproept. Denk maar eens na hoe jij je voelt als de zon sinds lange tijd weer schijnt.

Gebruik je echter een verkeerde tint geel, dan kan dit ook ongunstige effecten oproepen.

Positief

• Levenslust
  
• Plezier
  
• Geluk
  
• Zelfvertrouwen

Ongunstig

• Irritatie
  
• Angst
  
• Overprikkeling
  
• Nervositeit

Zwitsal, IKEA, McDonald’s en DHL die het gevoel van positiviteit, plezier en energie willen geven.

Blauw

Blauw is de kleur van de zee en lucht. Alles wat om ons heen is, als het ware. Voor velen ook betiteld als een lievelingskleur.

Wordt de kleur blauw in een verkeerde context gebruikt, dan krijgt je brein direct een signaal van pas op. Denk maar eens aan blauwe kleuren op een product dat je eet.

Positief

• Intelligentie
• Vertrouwen
  
• Stabiliteit
  
• Loyaal

Ongunstig

• Conservatief
• Kil
• Afstandelijk
• Zakelijk

Vaak IT en communicatie bedrijven: Facebook, Skype, LinkedIn, PayPal, maar ook Ford en Unilever. De oproep voor vertrouwen is hoofdzakelijk de achterliggende gedachte.

Groen

Groen is de kleur van ontwikkeling en staat voor leven, balans en harmonie.

Betreed je een ruimte waar groen hoofdzakelijk de kleur bepaalt, krijg je direct een gevoel van rust, alsof je je buiten in de natuur waant.

Positief

• Genezing
  
• Vruchtbaarheid
  
• Vernieuwing
  
• Levendig

Ongunstig

• Verveling
  
• Jaloezie
  
• Bederf
  
• Verval

Starbucks, Heineken, Spotify, Greenpeace

Bruin

Bruin is de kleur van hout of aarde. Ook wel een donkere variant van oranje. Net zoals in een bruine kroeg geeft de kleur je het gevoel van warmte en gezelligheid.

Waar roze als vrouwelijk wordt gezien, is bruin een kleur die meer aan mannen wordt toegewezen.

Positief

• Veiligheid
• Betrouwbaar
• Behoudend
• Warmte en gezelligheid

Ongunstig

• Saai
  
• Oubollig
  
• Levenloos
  
• Koppig

UPS, Ugg en Nespresso

Zwart

Zwart is als kleur ontoegankelijk en kil. De donkerste kleur die er is en een kleur met veel verschillende eigenschappen.

Zwart kan een intimiderende associatie hebben die zowel positief als negatief ingezet kan worden afhankelijk van het gewenste effect.

Positief

• Glamour
  
• Elegant
  
• Autoriteit
  
• Degelijk

Ongunstig

• Bedreiging
• Angst
• Verstikking
• Duisternis

Uber, Under Armour, Juventus, Adidas en Schwarzkopf

Grijs

Grijs is de kleur van zwart en wit. Een kleur met weinig tot geen positieve eigenschappen. Negatieve associaties komen bij deze kleur sneller aan het licht dan andere kleuren.

Een aanpassing in de tint kan voor een andere wending zorgen. Antraciet zie je namelijk veel vaker en is in combinatie met een andere kleur krachtig als er contrast is.

Positief

• Tijdloos
• Organisatie
• Strak
• Neutraal

Ongunstig

• Verborgen
• Saai
• Onverschillig
• Neutraal

Wikipedia, Mercedes-Benz en Nintendo Wii

Wit

Wit is de kleur van zuiverheid en perfectie. Er zijn zoveel omschrijvingen van de kleur wit te bedenken en dat terwijl wit eigenlijk de afwezigheid van kleur vertegenwoordigt. Een neutrale kleur.

Positief

• Vrede
  
• Rust
  
• Helderheid
  
• Perfectie

Ongunstig

• Koud
  
• Onverschillig
  
• Steriel
  
• Maagdelijkheid

Apple, Calvin Klein en Zara

Zijn er nog vragen?