1. Color Huamin Qu Hong Kong University of Science and Technology

2. Outline Color and Color Space Color for information visualization Color harmonization

3. Visible Light Visible Spectrum of Light Wavelength

4. Human Vision – Human Cone Response to Color three cone types (S,I,L) correspond to B,G,R 400460530650600700500 Wavelength (nm) Relative response BlueCyanGreenRed 490 ILS Slide Courtesy of Chester F. Carlson Center for Imaging Science

5. Color Matching Process From “Foundations of Vision” by B. Wandell

6. The Tristimulus Theory Any perceived color could be generated by some combination of three primary colors RGB Curve Negative Intensity Figure courtesy of D. Forsyth

7. CIE XYZ CIE (Commission Internationale d’Éclairage) CIE tristimulus values XYZ Y is luminance All positive curves Figure courtesy of D. Forsyth

8. Color Spaces Use color matching functions to define a coordinate system for color. Each color can be assigned a triple of coordinates with respect to some color space (e.g. RGB). Devices (monitors, printers, projectors) and computers can communicate colors precisely.

9. CIE XY Chromaticity Diagram

10. RGB Color Space

11. Some Colors Cannot Be Displayed

12. CIE LUV Color Space A uniform color space used to illustrate or quantify relative color differences. The Euclidean distance between two points is a measure of the difference between the colors.

13. 1976 CIE u'v' Chromaticity Diagram

14. HSV Color Space HSV: Hue Saturation Value - Hue: the color type - Saturation: the “ vibrancy ” of the color - Value: the brightness of the color From Wikipedia http://en.wikipedia.org/wiki/HSV_color_space

15. Color Wheel

16. Combining Colors Additive (RGB) Shining colored lights on a white ball Subtractive (CMYK) Mixing paint colors and illuminating with white light

17. Usage of Color for Visualization To label To quantify

18. http://colorbrewer2.org/ Nature of your data -Sequential -Diverging -Qualitative

19. Qualitative

20. Rules for Qualitative Color Scheme The maximum number of colors which can be used is usually between 6 to 12 The 12 recommended colors 1.Red 2. Green 3. Yellow 4. Blue 5. Black 6. White 7. Pink 8. Cyan 9. Gray 10 Orange 11. Brown 12. Purple

22. Color Family

23. Color for Sequential Data

25. Use a sequence that varies monotonically on at least one of the opponent color channels Examples are – red to green – yellow to blue – dark to light – low saturation to high saturation

29. Divergent Color Scheme

33. Color Harmonization https://www.youtube.com/watch?v=fH8qhDt 3Z6Q https://www.youtube.com/watch?v=fH8qhDt 3Z6Q

34. Color Harmonization

35. Monochromatic

36. Analogous

37. Complementary

38. Triadic

39. Tetradic

40. Color Used in Tableau

44. Color from DataWatch

45. Bad Color: Red + Blue

49. Colorblind

50. Logo color

51. Red = Adventure. Energy. (Coca Cola) Pink = Compassion. Nurturing. (Breast Cancer Research Foundation; Barbie) Orange = Cheerful. Warm. Optimistic. (Amazon) Yellow = Happy. Bright. Sunny. (McDonalds) Green = Health and Healing. Environment. Organic. (Whole Foods Market; Starbucks) Blue = Honesty. Trust. Dependability. (Facebook; Pfizer) …

52. Using Color for Visualization Coding qualitative vs. quantitative data - use differing hues for qualitative data - use continuous variation for quantitative data Use familiar color coding - “ red ” for hot, dangers, cautions, & warnings >> watch for culture conflicts (e.g., red in Asian cultures)

53. Coding Information with Colors Limit color numbers - (5- 10) Don ’ t have blue and red together Be careful with blue (small blue objects, blue objects on dark background). Our eyes are not sensitive to blue Red-Green are good color combinations. For people with red-green color blindness, Yellow- blue are usually OK.