Kleur

In de reader vindt u van pagina 26 t/m 35 een vrij goed overzicht van kleuren op websites en hoe u met kleur om kunt gaan. De afbeeldingen uit de reader komen van het bekende blog Smashing Magazine en is een zeer beknopte samenvatting van een serie van drie artikelen. De volledige links zijn:

  1. http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
  2. http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
  3. http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/

Deze site is overigens in het Engels. Dit digitale magazine is overigens een zeer waardevolle bron van allerlei handige en leuke artikelen voor zowel een techneut als een ontwerper. In mijn beleving is een artikel van smashingmagazine.com waardevoller dan een artikel van een onbekende aanbieder!

Als korte samenvatting komt dit magazine met de volgende opsomming:

In Brief…

While the information contained here might seem just a bit overwhelming, color theory is as much about the feeling a particular shade evokes than anything else. But here’s a quick reference guide for the common meanings of the colors discussed above:

  • Red: Passion, Love, Anger
  • Orange: Energy, Happiness, Vitality
  • Yellow: Happiness, Hope, Deceit
  • Green: New Beginnings, Abundance, Nature
  • Blue: Calm, Responsible, Sadness
  • Purple: Creativity, Royalty, Wealth
  • Black: Mystery, Elegance, Evil
  • Gray: Moody, Conservative, Formality
  • White: Purity, Cleanliness, Virtue
  • Brown: Nature, Wholesomeness, Dependability
  • Tan or Beige: Conservative, Piety, Dull
  • Cream or Ivory: Calm, Elegant, Purity

 

De termen hue en saturation worden regelmatig genoemd als u een artikel over kleur leest.

  • Hue = tint = de kleur zelf, op de regenboog als het ware.
  • Brightness = intensiteit = de mate waarin er wit of zwart is toegevoegd.
  • Saturation = verzadiging = de hoeveelheid grijs in een kleur, men spreekt ook wel van flets of vol.

Bron: http://nl.wikipedia.org/wiki/HSV_kleurruimte

 

Op zoek gaan naar kleuren kan bijzonder inspirerend zijn:

  1. Pinterest: als u hier zoekt op ‘colour palettes’ of ‘color palettes’ dan vindt u altijd wat.
  2. Een overzicht van trendy websites met het bijbehorende kleuren palet: http://www.colourlovers.com/web/trends/websites
  3. Adobe Kuler: https://color.adobe.com/ waarbij u middels allerlei handigheden uw eigen kleurenpalet kunt maken en opslaan.
  4. Paletton: http://paletton.com/ is een tegenhanger van Adobe Kuler.

Overigens wordt natuurlijk veelal een logo als uitgangspunt gebruikt. Wit en zwart zullen meestal ook aanwezig zijn alhoewel het wel eens lonend kan zijn om een zeer donkere kleur (bijvoorbeeld diep donkergrijs) in plaats van zwart te gebruiken. Naast een bedrijfskleur zult u voor de website nog twee of drie andere kleuren kiezen.

Tekstkleur vs achtergrondkleur

Wat van groot belang is dat de tekstkleur en de achtergrondkleur een groot contrast hebben. Is dit niet het geval dan zullen mensen de tekst op uw website als vermoeiend ervaren en deze niet lezen. Tevens is het van belang dat de website wel een aantal ankerpunten heeft voor het oog om ‘aan te hangen’. Bekijk dus kritisch wat iemand als eerste moet zien: uw logo, een button of een stuk tekst? De gekozen kleur kan hierin leidend zijn; dit kan dan overigens ook betrekking hebben op de intensiteit van de kleur. Dit zal voor iedere site anders zijn.

In uw CSS stylesheet refereert color:#…..; aan de tekstkleur en de kleur van randen (border). De background-color:#……; refereert aan de achtergrondkleur van een vlak.

 

Tip: van belang is dat u goed begrijpt hoe kleur in een bepaald land ‘leeft’. In Nederlands associeren wij zwart met de dood en wit met reinheid of trouwen. maar in Japan hoort wit bij de dood! Om dan een Japanse website voor bruidskleding te maken en veel wit te gebruiken valt dan misschien niet in goede aarde.

http://www.empower-yourself-with-color-psychology.com/cultural-color.html

Tip 2: mocht u gaan zoeken in het Engels houdt u er dan rekening mee dat u zowel ‘color’ als ‘colour’ kunt typen. ‘color’ is Amerikaans Engels en ‘colour’ is Brits Engels.