HEY

Neem deel aan de volgende Webflow uitdaging

Kleurtheorie in webdesign

Kleur in webdesign is erg belangrijk. Hoe kiest u de te gebruiken paletten (titels, knoppen, enz.)? Hier is de theorie van de kleuren.

Bijgewerkt op

11/9/2020

kleur in webdesign

Hoe kiest u de kleuren die u op uw website wilt toepassen (titels, knoppen, enz.)? Ik vraag u, want eigenlijk is de keuze tussen de 16,8 miljoen kleuren die er zijn, nog steeds vrij moeilijk! Dus ik denk dat het belangrijk is dat elke ontwerper de beroemde kleurentheorie onder de knie krijgt.

Maar voordat we verder gaan, denk ik dat het beter is om terug te keren naar de basis.

Begrijp het kleurenjargon

Pulsox, tonen, temperatuur... Al die woorden die we vaak horen als we het over beelden of kleuren hebben. Wat bedoelen ze precies?

1. Primaire kleuren: wat zijn dat?

Ze vormen de basis voor alle andere tinten. Inderdaad, onze ogen nemen alleen dit soort kleuren waar. Het zijn er 3 in totaal:

  • magenta
  • cyaan
  • geel

Hoe zit het met de anderen: roze, paars, oranje...? Dit zijn slechts de combinaties van deze 3 primaire kleuren. De resultaten verschillen naar gelang de hoeveelheid, de helderheid en de tinten.

In feite worden deze 3 kleuren in het begin respectievelijk: rood, blauw en geel genoemd. Maar verschillende studies hebben aangetoond dat ze de kleuren niet goed genoeg beschrijven. Vandaar hun nieuwe namen: cyaan, magenta, geel.

2. RGB & Hex: Waar gaat het om?

Aan de webkant is de meest gebruikte taal RGB&Hex (Red Green Blue en Hexagonaal). Met name voor het RGB zijn alle kleuren gedefinieerd als een combinatie van 3 verschillende waarden: rode, groene en blauwe tinten. Hier is hun notatie:

  • rgb(59, 89, 145): blauw als de kleur van Facebook
  • rgb(0, 0, 0): zwart
  • rgb (255, 255, 255): wit

Het hexadecimale kleurensysteem zet elke kleur om in hexadecimale notatie, die als volgt is:

  • #3b599b: Facebook blauw
  • #0000: zwart
  • #ffffffff: wit

Facebook blauw heeft bijvoorbeeld een rode tint van waarde 3b, groen 59 en blauw 9b.

3. Een koude vs. warme kleur

Er zijn ook twee categorieën van kleuren:

  • warme kleuren: ze zijn samengesteld uit een grotere hoeveelheid rood en geel. Dit laatste roept over het algemeen een gevoel van warmte en passie op. Ze zijn ook agressief en gedurfd, vandaar dat ze gebruikt worden in foutmeldingen.
  • koude kleuren: ze zijn meer samengesteld uit blauw en brengen iets naar voren als: klimaat, ijs, winter, water, nacht... Ze zijn ook minder agressief en meer rustgevend.

4. Kleurtemperatuur

We horen vaak over de temperatuur in foto's. Zo verhoog ik soms de temperatuur van een beeld. In meer algemeen taalgebruik verhoog ik daarom het niveau van oranje in de betreffende media.

Omgekeerd, wanneer een klant me vraagt om de temperatuur van een beeld te verlagen, verminder ik de helderheid om een koude indruk te geven.

5. Tinten en schakeringen

We spreken van tint als we wit aan een kleur toevoegen, terwijl we zeggen nuancering als de toegevoegde kleur zwart is. Dus waar zijn de tinten voor? Zij zijn degenen die je in staat stellen om monochroom te creëren.

Als uw basiskleur bijvoorbeeld #8dbdd8 (een lichtblauw) is, kunt u een monochrome kleur creëren door vier andere tinten te kiezen (twee helderdere blauwen en twee donkerdere blauwen).

6. Verzadiging en helderheid in webdesign

De verzadiging beschrijft de intensiteit van een kleur. Als u deze waarde verhoogt, wordt het beeld rijker, maar ook donkerder. Het verminderen van de verzadiging van een beeld maakt het lichter en onscherper. In termen van helderheid hebben we het over de perceptie van helderheid in verhouding tot zuiver wit.

Nu je een algemene notie van kleuren hebt, zijn hier enkele tips voor het kiezen van kleurenpaletten.

kleur in webdesign

Gebruikt het kleurenwiel

Alle kleuren zijn gerelateerd en je kunt het zien door het kleurenwiel.

U kunt alle 12 hoofdkleuren op dit wiel zien.

Kijk uit! Als sommige kleuren zijn gemaakt om samen te zijn, gaan andere kleuren helemaal niet samen. Hoe kunt u er zeker van zijn dat u de juiste keuze maakt? Ik gebruik deze 4 kleurenschema's.

1. Monochroom

Ik heb het er al eerder over gehad. Monochroom wordt verkregen uit één enkele basiskleur. Dus het creëert harmonie. Hier is een klein minpuntje: deze methode dreigt een eentonig palet te geven.

Hier is een voorbeeld gebaseerd op paars:

kleur in webdesign

2. Aanvullende

Het is gebaseerd op twee volledig tegenovergestelde kleuren (op het kleurenwiel), en dus zeer verschillend. Met deze techniek heeft u meer kans om een impact te creëren voor de bezoekers van uw site, vooral voor oproepen tot actie.

Laten we zeggen dat de achtergrond van je pagina groen is, de CTA-knop kan roze zijn. Als je het zo stelt, klinkt het raar. Maar ik verzeker u, ze zijn letterlijk complementair. Kijk zelf maar:

kleur in webdesign

3. Analoog

Analoge diagrammen bevatten drie kleuren die naast elkaar liggen op het kleurenwiel. De aangenomen tonen zijn vrijwel gelijk, waardoor een harmonieus geheel, een gevoel van samenhang en eenheid ontstaat.

kleur in webdesign

4. Triadisch

Om een driehoekig kleurenschema te maken, moet je een gelijkzijdige driehoek (met drie zijden van gelijke lengte) op het kleurenwiel tekenen. Selecteer vervolgens de drie kleuren aan de drie uiteinden. Zo krijg je een even gevarieerd als evenwichtig patroon.

Hoe gebruik je kleuren in webdesign?

Rood

Ik hoef je niet meer te leren dat rood geassocieerd wordt met warmte, energie, passie en liefde. Er wordt ook gezegd dat we rood zien als we boos zijn, en misschien wordt het daarom ook wel de kleur van het bloed, de macht, het gevaar genoemd.

Dit alles om u te vertellen dat rood onmiskenbaar is. Het creëert een belangrijk effect op de doelstellingen van een merk. Laten we het voorbeeld van McDonald's nemen; hij gebruikt rood (en geel) als kleur van zijn merk. Er is ook Netflix. Voor zijn CTA-knoppen ontneemt hij zichzelf niet. Dan komt Coca-Cola. Het lijkt erop dat hij op het idee kwam om de kerstman de kleur rood te geven.

Hoe kan rood dan gebruikt worden in webdesign? Stel, je werkt voor een stoer en/of mannelijk merk. Ik raad u ten zeerste aan om rood te gebruiken, want het stelt het goed voor. Afhankelijk van de producten die het merk aanbiedt, kan rood ook interessant zijn: cafeïnehoudende dranken, sportwagens, enz.

Aan de andere kant bent u niet verplicht om rood toe te passen op de hele site, het product... Het kan worden toegepast op bepaalde elementen in het bijzonder, CTA onder andere.

Foto door Siora Fotografie op Unsplash

Oranje

Deze kleur is minder agressief dan rood, maar dat neemt niet weg dat het opvallend is. In de meeste gevallen is het te vinden op het gebied van bouw en veiligheid (o.a. kegels op de weg). Wat roept het precies op in het oranje?

De warmte die het uitstraalt, herinnert ons aan creativiteit, energie, jeugd en enthousiasme. Het feit dat Nickelodeon gebruikt het om zijn handelsmerk te vertegenwoordigen bewijst het. Ook voor Fanta brengt de sinaasappel perfect zijn leuke kant naar voren.

In Webdesign raad ik u daarom aan deze kleur te gebruiken voor sites die zich vooral richten op jongeren of op degenen die over creativiteit praten (en alles wat daarbij in de buurt komt). Omdat het warm is, geeft het bezoekers het gevoel dat ze actie willen ondernemen, vooral als het wordt toegepast op de knoppen of tekst van CTA.

Geel

De zon, de zomer, de zonnebloem, de hitte... Als ik deze 3 elementen noem, denk je automatisch aan geel, nietwaar? Het maakt je gelukkig, hoopvol en positief. In andere contexten kan geel echter irritant worden.

Ik heb je al eerder over McDonald's verteld. Nou, ook hier gebruik ik het voorbeeld, want geel is ook een van de hoofdkleuren die het merk gebruikt. Het is duidelijk gelukt, want gecombineerd, zijn rood en geel beide aantrekkelijk. Zelfs als je maar een paar meter verwijderd bent van hun logo, is het moeilijk om het te missen! Er is ook Best Buy, weet je? Het label van het logo is ook geel, zodat de kleine prijzen die het aanbiedt aantrekkelijk zijn.

Wanneer u een website maakt, vergeet dan niet de kracht van geel. Het springt in het oog, en kan dus worden gebruikt om een specifiek element van het ontwerp te benadrukken (in de praktijk zal het precies zo zijn als het prijskaartje van Best Buy). Je moet nog steeds op de tonen letten. Terwijl sommige de natuur en welzijn oproepen (warm of lichtgeel), geven andere een kunstmatige aanblik (neongeel).

Foto door Andrew Buchanan op Unsplash

Blauw

Blauw staat bekend als rustig, sereen en vooral: professioneel. Het roept inderdaad verantwoordelijkheid en intelligentie op. Het wordt vaak geassocieerd met water, waardoor het een verfrissende kleur heeft. Ook het niveau van de tonen kan het verschil maken. Donkerder, het wordt triest. Vandaar de uitdrukking "de blues".

Kortom, blauw gaat hand in hand met grijs, zoals je waarschijnlijk hebt gemerkt bij veel bedrijven zoals: Intel, PayPal, General Motors en vele andere. Daarnaast houden sociale netwerken van blauw (vooral Facebook). De reden is eenvoudig: deze kleur wekt vertrouwen, vooral omdat de persoonsgegevens van meerdere personen door deze netwerken worden verwerkt.

Dus, als uw site het vertrouwen in de bezoekers moet wekken, weet u wat u moet doen. Speel met het blauw en zijn tinten!

Zeker, blauw is een rustige en rustgevende kleur, precies aangepast aan bepaalde activiteiten zoals therapie, meditatie... Maar het is ook de kleur die het meest gewaardeerd wordt door een groot aantal mensen (vrouwen en mannen, kinderen en volwassenen), u moet de kans grijpen om het te gebruiken als u zich richt op een groot publiek voor uw site.

Groen

Groei, gezondheid, natuur, lente... dit alles is te vinden in het groen. Rijkdom en financiën hebben ook een plaats in deze kleur, in de Verenigde Staten. U kunt dus kiezen voor deze kleuren om bedrijven te vertegenwoordigen die betrokken zijn bij het milieu, de natuur, de financiën, enz.

Soms wordt ook groen gebruikt als je een kleurbalans wilt creëren. Dit is wat Microsoft en Google bijvoorbeeld deden; ze wilden groen toevoegen aan de hoofdkleuren van hun logo. Het resultaat was een puur succes.

Foto door Scott Webb op Unsplash

Bruin

Als ik je over bruin vertel, wat komt er dan in je op? Voor veel mensen denken ze aan de aarde, waardoor bruin een natuurlijke kleur wordt. Het is dan ook duidelijk dat het zeer aanwezig is in sites die gewijd zijn aan landbouw, buitenactiviteiten...

Bovendien is bruin verbonden met iets ouds. Daarom is het zo dat wanneer een logo deze kleur aanneemt, dit het traditionele aspect ervan onderstreept. Hier is een voorbeeld van een bedrijf dat het gebruikt in zijn logo: ultrastjarna.

Violet

Het wordt beschreven als de kleur van de royalty's, een prestigieuze en luxueuze kleur. In het verleden waren de pigmenten die het mogelijk maakten om deze kleur te verkrijgen zeer duur. Alleen koningen en koninginnen konden ze krijgen, en zich dus in deze kleur kleden. Het was zelfs verboden voor iedereen die geen lid was van de koninklijke familie om het te dragen.

Voor sites die luxe willen uitstralen, kan paars alleen maar de beste keuze zijn. Neem bijvoorbeeld Asprey, een Brits bedrijf dat bekend is in de productie van luxegoederen.

Echter, afhankelijk van de kleur waarmee u het associeert, zal het effect anders zijn. Met goud bijvoorbeeld is het gewenste koninklijke effect op zijn hoogtepunt. Met roze zal het vrouwelijker zijn. En nog veel meer.

Wit

Sites die zich richten op bruiloften, wetenschap en spiritualiteit gebruiken veel witte ruimte. Ze roepen een gevoel van reinheid en frisheid op. Wit maakt ook een minimalistische vormgeving mogelijk, want het is eenvoudig, sober en modern tegelijk: Apple is het beste in staat om dit te illustreren.

Wit wordt vooral gebruikt als achtergrondkleur. Zo kan het andere kleuren of elementen accentueren. Maar ook de tekstuele inhoud is op deze manier beter leesbaar. Als het als secundaire kleur binnen een palet wordt gebruikt, roept het verschillende dingen op afhankelijk van de bijbehorende kleuren: met pastel wordt het vrouwelijker, terwijl het met zwart bijdraagt aan een minimalistisch, design- en klassiek ensemble.

Foto door Drew Beamer op Unsplash

Zwart

Ik bedoel, de zwarte. Het impliceert kracht, luxe, kwaad, dood en het onbekende. Het is ook neutraal, vandaar de keuze van Channel en Dior in de kleuren van hun logo (zwart en wit). De hele zaak lijkt intimiderend, ontoegankelijk...

Het geeft je waarschijnlijk een idee van hoe je het gaat gebruiken op de sites die je maakt. Of het nu gaat om de luxe van een site of een product, om het creëren van een koninklijk effect (door het te associëren met andere kleuren), of voor gewoon gebruik (tekstkleuren).

Conclusie

Kortom, hoe zou je reageren als iemand je de auto van je dromen aanbiedt, maar die is geschilderd in een kleur die niet erg voor de hand ligt (misschien is het een kleur die je haat, of misschien is het gewoon ouderwets)? Je zult minder enthousiast zijn, hè? Dit alles is om u te vertellen dat kleuren zinvol zijn. Ze creëren emotie, dus hun keuze vraagt om echte aandacht.

Kom terug naar deze pagina wanneer je maar wilt. Heb je nog ideeën bedacht die ik misschien vergeten ben? Zo ja, wat zijn dat dan? Laat hieronder een reactie achter of stuur een e-mail naar hello@happydesk.be.
Kevin Palombo, manager van Happydesk.

VRIJE TRAINING

Begin met het volgen van de Gratis Training, u ontdekt de basisprincipes van Webflow en een voorproefje van wat u te wachten staat in de Webflow Expert en Creative Business training.

Begin gratis

Koffiepauze

4 items die je misschien leuk vindt

VRIJE TRAINING

Registreer hier voor toegang tot
de gratis training

Begin met het volgen van de Gratis Training, u ontdekt de basisprincipes van Webflow en een voorproefje van wat u te wachten staat in de Webflow Expert en Creative Business training.

Start de gratis training