Psychology of Color

1
Psychology of Color

• Valerie DeMartino
• INBS 510
• November 4, 2002

2
Psychology of Color

• Importance of Color on the Internet
• What is color?
• How does color effect emotion?
• Color Preference
• Color Snafus
• Color On the Computer Internet
• Standardizing of Color
• Use of Fonts
• A look at 2 websites
• Suggestions

3
Importance of Color on the Internet

• Color is a powerful tool
• Color is the first thing notice and the last
  thing we forget when visiting a website.
• Color can capture attention or be lost
  instantaneously.
• If used correctly, color can make the difference
  between buying and selling.
• Color can be a trademark (i.e. Coca Cola red or
  John Deer green)
• Color triggers emotion, has symbolism, memories
  or ideas attached to it.
• Color gives a feel for the site before the
  content is even read.
• Color adds impact and clarity to a message and
  highlights important points.

4
What is Color?

• Color technically defined
• Color in the non-computer world is seen as
  reflected light
• On a computer, color is backlit (not reflected)
• Colors on a computer are primary Red, Green and
  Blue (RGB)
• The gamma (color space) is responsible for the
  lightness or darkness of an image

5
How does color effect emotion?

• Color symbolizes, triggers emotion, memories or
  ideas.
• The emotion triggered is dependant on an
  individuals
• Nationality
• White in the west represents purity, in China, it
  represents death
• Gender
• Women prefer bright colors where men prefer cool
  colors
• Past experiences
• Personal Preferences

6
How does color effect emotion?

• Warm colors (i.e. reds)
• Stimulate warmth, hunger, excitement
• Cool colors (i.e. green and blue)
• Enhance calm and content feelings
• Dark Colors vs. Light Colors
• Dark objects seem heavier
• White light colors makes objects seem lighter

7
How does color effect emotion?

• Colors and their connotation
• Red
• Positive Passion, love, danger, heat, power,
  strength
• Negative aggressive, blood, war, violence
• Pink
• Positive youth and femininity
• Negative naivety, weakness

8
How does color effect emotion?

• Yellow
• Positive sunshine, happiness, growth, gold,
  newness
• Negative betrayal, jealousy, deceit, cheap
• Blue
• Positive calm, peaceful, water, sky, harmony,
  therapeutic, trust, confidence (safe color for
  design)
• Negative sadness, depression, cold

9
How does color effect emotion?

• Purple
• Positive royalty, spirituality, passion, love
• Negative cruelty, arrogance, mourning
• Brown
• Positive neutral, earthy, outdoors, warm
• Negative dirty, dull
• Grey
• Positive modern, intelligent, solid, clean
• Negative old age, sadness, dull, boring

10
How does color effect emotion?

• White
• Positive cleanliness, innocence, space, purity,
  chastity, simplicity, peace, winter/snow,
  goodness, marriage/virginal
• Negative death (in eastern culture), sterile
• Black
• Positive associated with power, elegance, magic,
  mystery, night, sophistication, solid, powerful
• Negative death (in western culture), fear, evil,
  anonymity, sadness, remorse, anger

11
Color Preference

• According to the Roper/Pantone Consumer Color
  Preference Study revealed
• Blue is the countrys preferred color
• By 35 of those polled chose blue most suggesting
  the attraction to its calm appeal
• Followed by (in order)
• Green by 15 (fresh and clean)
• Purple (warm) over Red (exciting) by 1

12
Color Snafus

• Something to consider - While color triggers
  emotion, keep in mind that a growing percentage
  of the population
• are color blind
• Some do not even see color (instead view shades
  of gray and black)
• Among those that do see color, there is a
  variance over the contrast of a color

13
Color On the Computer Internet

• The components that create color on your computer
  include
• The hardware on your computer
• Graphic cards or video cards/boards
• Your monitor
• Your web browser

14
Color On the Computer Internet

• The systems that are used to create websites,
  usually have a video card capable of displaying
  thousands (16-bit) or millions (32-bit) colors.
• The average visitor of a website is capable of
  viewing 256 colors (8-bit).

15
Color On the Computer Internet

• There are 216 colors that are common to all
  computer and all web browsers.
• Each browser has 256 colors but only 216 of them
  are common to all.
• Software uses little dots of RGB to create the
  216 colors on the web
• This is referred to as additive color

16
Color On the Computer Internet

• Corresponding HTML values derived from rigid
  mathematical formulas make up the 216 colors that
  are universally recognized.
• The formula consists of a combination of red,
  blue and green values.
• Most people who own a newer computer system that
  has a 16 or 32-bit video card do not know that
  they can change their color settings if they are
  only viewing a 8-bit.

17
Color On the Computer Internet

• Due to the components that create the color you
  view, there is a likelihood that the color you
  view when viewing a purchase item is not the
  accurate color of the item
• Color tends to appear darker on some computers
• This effects a global audience

18
Standardizing of Color

• There are steps being taken for a cross platform
  of color where extra chunks of information is
  stored about the image.
• ColorSync by Apple computer a filter is used in
  Photoshop to embed color profiles prior to
  converting the graphics to a gif or jpeg file for
  the web
• PNG images created in Photoshop can be saved as
  PNG

19
Standardizing of Color

• Then the web browser reads the file for viewing
  the file transforms the information of RGB and
  gamma values into one that will appear to the
  viewer the same way it was created on the
  original system
• Who can use these filters?
• ColorSync
• Currently, only Microsoft Explorer for Macintosh
  systems can read color profiles in gif and jpeg
  files through the ColorSync filter.
• Soon to follow are Netscape Navigator for Mac and
  PCs and MSIE for PCs
• PNG
• Currently, Netscape Navigator 4.04 can use the
  filter
• Soon to follow are Macintosh and Microsoft
  Explorer

20
Use of Fonts

• Font is another tool to differentiate your
  website from others
• There are many tools to allow you to find a
  unique font through the internet
• Key to using font is to keep the font size
  consistent on the site as it is more appealing to
  the eye

21
Use of Fonts

• Types of Font
• Serif have finishing stokes with flared or
  tapered ends
• Latin Fonts Times New Roman, Bodoni, Garamond,
  Minion Web, ITC Stone Serif, MS Georgia,
  Bitstream Cyberbit
• sans-serif has stroke endings that are plain
• Greek Fonts Attika, Typiko New Era, MS Tahoma,
  Monotype Gill Sans 571, Helvetica Greek

22
Use of Fonts

• Cursive generally have joining strokes
• Latin fonts Caflisch Script, Adobe Poetica,
  Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
  
• Fantasydecorative
• Latin fonts Courier, MS Courier New, Prestige,
  Everson Mono
• Greek Fonts MS Courier New, Everson Mono
• Monospace all glyphs have the same fixed width,
  has the effect of a manual typewriter
• Latin fonts Alpha Geometrique, Critter,
  Cottonwood, FB Reactor, Studz

23
A look at 2 Websites

• Coca-Cola (www.cocacola.com)
• Uses a strong Red
• Symbol of power and energy
• It captures your attention
• Their color is a trademark
• Chase (www.chase.com)
• Uses a white background and blue banner
• Professional
• Clean
• Warm and inviting (with use of blue)

24
Suggestions

• If you are going to design a website, keep the
  following suggestions in mind
• Color speaks volumes!
• Use appropriate color for the message you are
  trying to communicate.
• Use color to illustrate or highlight an
  important point.
• You want to use a color that will capture
  attention so a visitor will stay on your site and
  read the content.
• Keep main content on a white background it
  implies professionalism and is easier to the eye.
• To attract a younger customer or imply youth, use
  primary colors.
• Your color choices may become your trademark.

25
References

• Cater, Mary (2000). Coloring Outside the Lines.
  http//www.efuse.com/Design/colorful1.html
• Color Matters Computers (2002). Computer Color
  Matters. http//www.colormatters.com/comput.html
• The Font Finder. http//www.font-finder.com/fonts.
  html
• Font Families. http//www.w3.org/TR/REC-CSS2/fonts
  .htmlgeneric-font-families
• Jesset.com (2002). Choosing Color.
  http//www.jessett.com/web_sites/design/color.shtm
  l
• Morton, Jill (1999). Color Matters Computers.
  Color, the Chameleon of the Web.
  http//www.colormatters.com/chameleon.html
• Khouw, Natalia The Meaning of Color for Gender.
  http//www.colormatters.com/khouw.html
• Psychology of Color in Web Design, Understanding
  Color Emotion Triggers, Part 1a (2002).
  http//www.basictemplates.com/tools/colorpsych1a-f
  ull.shtml
• Web Design Wisdom, Web Design Color Concepts
  (2002). http//www.webdesignwisdom.com/webdesign/c
  olor.shtml
• Renovato, Pam (2002). The Informant, The
  Psychology of Color and Internet Marketing.
  http//phh.virtualave.net/web_design_and_maintenan
  ce/009.shtml
• Renovato, Pam (2002). The Psychology of Color
  and Internet Marketing How to Choose web site
  colors. http//www.free-webmaster-tools.com/choos
  ing-web-site-colors.htm
• Results from the Roper/Pantone Consumer Color
  Preference Study (1995). http//www.pantone.com/p
  roducts/products.asp?idArticle123idArea16
• Weinman, Lynda (2000) Lynda on Color Web Color
  Basics, Understanding Browser-Safe Color.
  http//www.efuse.com/Design/web_color_basics.html
• Will on the Web Radio(2001). http//www.will-harr
  is.com/radio/color_web.html