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 Snafu’s • 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 individual’s • 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 Information from Jessett.com

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 Information from Jessett.com

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 Information from Jessett.com

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 Information from Jessett.com

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

12. Color Snafu’s 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 • Fantasy:decorative • 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.html#generic-font-families Jesset.com (2002). Choosing Color.http://www.jessett.com/web_sites/design/color.shtml 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-full.shtml Web Design Wisdom, Web Design: Color Concepts (2002). http://www.webdesignwisdom.com/webdesign/color.shtml Renovato, Pam (2002). The Informant, The Psychology of Color and Internet Marketing. http://phh.virtualave.net/web_design_and_maintenance/009.shtml Renovato, Pam (2002). The Psychology of Color and Internet Marketing How to Choose web site colors. http://www.free-webmaster-tools.com/choosing-web-site-colors.htm Results from the Roper/Pantone Consumer Color Preference Study (1995). http://www.pantone.com/products/products.asp?idArticle=123&idArea=16 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-harris.com/radio/color_web.html