2. Color and Color for the Web First, discuss idea of color (some overlap with lecture on HVS) First, discuss idea of color (some overlap with lecture on HVS) Second, discuss color in web pages Second, discuss color in web pages 1

3. 2 Color can be a powerful tool to convey information and emotion improve user interfaces but its inappropriate use can severely reduce the performance of the systems we build Why Study Color?

4. 3 Visible Spectrum

5. 4 Color Perception via Cones in Eye “Photopigments” used to sense color “Photopigments” used to sense color 3 types: blue, green, “red” (really yellow) 3 types: blue, green, “red” (really yellow) each sensitive to different band of spectrumeach sensitive to different band of spectrum ratio of neural activity of the 3  colorratio of neural activity of the 3  color other colors are perceived by combining stimulation other colors are perceived by combining stimulation

6. 5 Color: how it gets to our eyes Color: how it gets to our eyes It is determined by light source, surface properties (what light is absorbed & reflected) and the sensor. It is determined by light source, surface properties (what light is absorbed & reflected) and the sensor.

7. Color Components How we describe / measure color How we describe / measure color There is not just one way There is not just one way Three Main ways Three Main ways 1.Red Green Blue – used in displays, computers, TVs, phones, electronics (this is closest to how we see) 2.Cyan(blue-green) Magenta(red-blue) Yellow – used in print / paintings 3.Hue, Saturation, Intensity – used by artists, theoretical 6

8. 7 RGB Model Based on human visual system cones. Based on human visual system cones. Additive model. Additive model. An image consists of 3 BANDS: Red (R), Green (G), Blue (B) An image consists of 3 BANDS: Red (R), Green (G), Blue (B) White = full Red + full Green + full Blue White = full Red + full Green + full Blue Black = no Red + no Green + no Blue Black = no Red + no Green + no Blue

9. 8 CMY Model Cyan-Magenta-Yellow is a subtractive model which is good to model absorption of colors. Cyan-Magenta-Yellow is a subtractive model which is good to model absorption of colors. Appropriate for paper printing. Subtractive model Appropriate for paper printing. Subtractive model Black = full Cyan + full Magenta + full Yellow Black = full Cyan + full Magenta + full Yellow White = no Cyan + no Magenta + no Yellow White = no Cyan + no Magenta + no Yellow

10. 9 RGB Is Additive CMY Is Subtractive Typically used for projected/ emitted light like TV / computers Typically used for reflected light like in printers

11. 10 Color Components – HLS (or HIS/HIS) theory Hue Hue property of the wavelengths of light (i.e., “color”)property of the wavelengths of light (i.e., “color”) Lightness (or value) Lightness (or value) how much light appears to be reflected from a surfacehow much light appears to be reflected from a surface some hues are inherently lighter or darkersome hues are inherently lighter or darker Saturation Saturation purity of the huepurity of the hue e.g., red is more saturated than pink e.g., red is more saturated than pink color is mixture of pure hue & achromatic colorcolor is mixture of pure hue & achromatic color portion of pure hue is the degree of saturation portion of pure hue is the degree of saturation

12. 11 Color Components (cont.) Lightness Lightness Saturation Saturation from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.

13. 12 Color Components (cont.) Hue, Saturation, Value model (HSV) Hue, Saturation, Value model (HSV) from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.

14. 13 Color Guidelines for Ease of Use Avoid simultaneous display of highly saturated, spectrally extreme colors Avoid simultaneous display of highly saturated, spectrally extreme colors e.g., no cyans/blues at the same time as reds, why?e.g., no cyans/blues at the same time as reds, why? refocusing! refocusing! desaturated combinations are better  pastelsdesaturated combinations are better  pastels Opponent colors go well together Opponent colors go well together (red & green) or (yellow & blue)(red & green) or (yellow & blue)

15. Color Guidelines for functional design Beauty is in eye of beholder – so for art you decide. Beauty is in eye of beholder – so for art you decide. For function and usability – constraining how you use color can make or break an interface For function and usability – constraining how you use color can make or break an interface 14

16. 15 Color Guidelines (cont.) Size of detectable changes in color varies Size of detectable changes in color varies hard to detect changes in reds, purples, & greenshard to detect changes in reds, purples, & greens easier to detect changes in yellows & blue-greenseasier to detect changes in yellows & blue-greens Older users need higher brightness levels to distinguish colors Older users need higher brightness levels to distinguish colors Hard to focus on edges created by color alone ? Hard to focus on edges created by color alone ? use both brightness & color differencesuse both brightness & color differences

17. 16 Color Guidelines (cont.) Avoid red & green in the periphery - why? Avoid red & green in the periphery - why? lack of RG cones there -- yellows & blues work in peripherylack of RG cones there -- yellows & blues work in periphery Avoid pure blue for text, lines, & small shapes Avoid pure blue for text, lines, & small shapes blue makes a fine background colorblue makes a fine background color avoid adjacent colors that differ only in blueavoid adjacent colors that differ only in blue Avoid single-color distinctions Avoid single-color distinctions mixtures of colors should differ in 2 or 3 colorsmixtures of colors should differ in 2 or 3 colors e.g., 2 colors shouldn’t differ only by amount of red e.g., 2 colors shouldn’t differ only by amount of red helps color-deficient observershelps color-deficient observers

18. Color in Web Pages 17

19. Using Color on Web Pages Computer monitors display color as intensities of red, green, and blue light Computer monitors display color as intensities of red, green, and blue light RGB Color RGB Color The values of red, green, and blue vary from 0 to 255. The values of red, green, and blue vary from 0 to 255. Hexadecimal numbers (base 16) represent these color values. Hexadecimal numbers (base 16) represent these color values. 18

20. Hexadecimal Color Values # is used to indicate a hexadecimal value # is used to indicate a hexadecimal value Hex value pairs range from 00 to FF Hex value pairs range from 00 to FF Three hex value pairs describe an RGB color Three hex value pairs describe an RGB color #000000 black#FFFFFF white #FF0000 red#00FF00 green #0000FF blue#CCCCCC grey 19

21. Web Color Palette A collection of 216 colors A collection of 216 colors Display the most similar on the Mac and PC platforms Display the most similar on the Mac and PC platforms Hex values: 00, 33, 66, 99, CC, FF Hex values: 00, 33, 66, 99, CC, FF Color Chart http://webdevfoundations.net/color Color Chart http://webdevfoundations.net/color http://webdevfoundations.net/color 20

22. Making Color Choices How to choose a color scheme? How to choose a color scheme? MonochromaticMonochromatic http://meyerweb.com/eric/tools/color-blend http://meyerweb.com/eric/tools/color-blend http://meyerweb.com/eric/tools/color-blend Choose from a photograph or other imageChoose from a photograph or other image http://www.colr.org http://www.colr.org http://www.colr.org Begin with a favorite colorBegin with a favorite color Use one of the sites below to choose other colors Use one of the sites below to choose other colors http://colorsontheweb.com/colorwizard.asphttp://colorsontheweb.com/colorwizard.asphttp://colorsontheweb.com/colorwizard.asp http://kuler.Adobe.comhttp://kuler.Adobe.comhttp://kuler.Adobe.com http://colorschemedesigner.com/http://colorschemedesigner.com/http://colorschemedesigner.com/

23. Accessibility & Color Everyone is not able to see or distinguish between colors Everyone is not able to see or distinguish between colors Information must be conveyed even if color cannot be viewed Information must be conveyed even if color cannot be viewed According to Vischeck http://www.vischeck.com/vischeck According to Vischeck http://www.vischeck.com/vischeck http://www.vischeck.com/vischeck 1 out of 20 people experience some type of color deficiency1 out of 20 people experience some type of color deficiency Color choice can be crucialColor choice can be crucial Avoid using red, green, brown, gray, or purple next to each otherAvoid using red, green, brown, gray, or purple next to each other White, black, and shades of blue and yellow are easier to differentiate.White, black, and shades of blue and yellow are easier to differentiate. Simulation: http://www.vischeck.com/vischeck/vischeckURL.php Simulation: http://www.vischeck.com/vischeck/vischeckURL.php http://www.vischeck.com/vischeck/vischeckURL.php

24. Color in (X)HTML In attributes of tags In attributes of tags i.e. bgcolor of tag i.e. bgcolor of tag Others – use in CSS for styling many elements text, areas, etc. We will go over these as we learn them. 23