1. Color Background

2. What is Color? Aspect of vision Physical reaction of the eye and the automatic interpretive response of the brain to wavelength characteristics of light Color is light - different wavelengths are seen as different colors

3. What is Color? Color is what we perceive as a result of different wavelengths of light. E.g., Sounds with long wavelengths = low noise. Light with long wavelength displays different colors than light with short wavelengths. Source: Bennett, J. (2005). Design Fundamentals for New Media. Thomson Delmar Learning: New York. Long Short

4. What is Color? Gamut: refers to the entire spectrum of colors available for use in a specific medium. The entire visual spectrum. White triangle –colors that can be produced by a monitor. Black area – colors that can be produced using the CYMK color system for printing Source: Bennett, J. (2005). Design Fundamentals for New Media. Thomson Delmar Learning: New York. Monitor CYMK - print

5. Computer monitor Monitor made up of Red, Green and Blue dots. See them as homogenous color. RGB Color EXAMPLE: If red and green dots are at 100%, while blue dots not lit, we see yellow color. Dots can have value from 0 to 255. Total number of possible colors is 256*256*256 = 16,777,216.

6. RGB Colors Color represented by three numbers: 0, 0, 255 First number represents red Second represents green Third represents the blue. Pure blue color is 0, 0, 255.

7. Colors | Terms Hue - the edges of the square Saturation – where color is placed between grey middle and the colored edge Value (i.e., brightness or luminance) the intensity of the color and is the third attribute. http://www.colorotate.org/

8. Colors Contrasting colors (complements) are diametrically opposite on the color circle.

9. Color complements Red, Yellow, Blue primary colors Colors opposite primary are complements Green complement Red Purple complement Yellow Orange complement Blue

11. After Image will be Green Brain absorbs color and tries to balance total absorption of Red with its complement, Orange Source: http://poynterextra.org/cp/colorproject/color.html

13. After Image will be Orange

15. After Image will be Purple

16. Need a model that relates subjective sensation of color to measurable phenomena Color & Science

17. Color Models 1. An artist’s color wheel: red, yellow, and blue (RYB) 2. Additive color: red, green, blue (RGB) 3. Subtractive color: cyan, magenta, yellow, and black (CMYK) 4. Hue, saturation, and brightness (HSB)

18. A color wheel

19. Varying saturation, with brightness held constant

20. Varying brightness, with saturation held constant

21. Four Color-Harmony Schemes Monochromatic: colors of same or similar hue, differing in brightness and/or saturation Complementary: colors approximately opposite each other on a color wheel Analogous: colors adjacent to each other, from any segment of a color wheel Triadic: three colors approximately equally spaced around a color wheel http://kuler.adobe.com/#create/fromacolor

22. Monochromatic color harmony: All blue All orange colors of same hue, differing in brightness and/or saturation

23. H16,S92,B38 H16,S84,B100 H16,S18,B100 Monochromatic color harmony:

24. Monochromatic example

25. Complementary Two opposite colors with any brightness or saturation

26. Complementary: various blues, with red-orange highlights http://designwashere.com/complementary-colors-in-web-design/

27. Complementary

28. Analogous Two or more colors with hues close together.

29. Analogous

30. Analogous: red-orange through yellow-green

31. Triadic: Any three colors spaced equally around CW.

32. Triadic: red, yellow, blue

33. 240, 74, 80 55, 42, 100 351, 63, 83 240, 59, 57 55, 91, 91 HSB values

34. Sites | Color http://websitetips.com/colortools/sitepro/ http://colormixers.com/mixers/cmr/ http://colorschemedesigner.com/ http://learn.colorotate.org/learn-more.html http://learn.colorotate.org/learn-more.htm http://www.devwebpro.com/25-popular-color-scheme-and-palette- generators/ http://www.devwebpro.com/25-popular-color-scheme-and-palette- generators/ http://www.allwebdesignresources.com/webdesignblogs/graphics/webd esigncolorcombinationsguide/ http://www.allwebdesignresources.com/webdesignblogs/graphics/webd esigncolorcombinationsguide/

36. Specifying Color Hexadecimal

37. Color Often for Web documents, colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF)

38. Color Hexadecimal value: FF0000 FF 00 00 Red Green Blue

39. 0123456789ABCDEF0123456789ABCDEF Hexadecimal based-16 Red value = 10 Hex value = 0a Red value = 11 Hex value = 0b Blue value = 16 Hex value = 10 Blue value = 26 Hex value = 1a Green value = 31 Hex value = 1f Green value = 32 Hex value = 20 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F - 31 F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE - 254 FF - 255 0 1 2 3 4 5 6 7 8 9 A B C D E F 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F RGB Values: 0 – 255 Hexadecimal: 00 - FF

40. Starts With0 1 2 3 4 5 6 7 8 9 A B C D E F RGB Val HEX HEX RGBRGB 0 00 16 10 32 2020 48 3030 64 404080 5050 96 6060 112 7070 128 8080 144 9090 160 A0A0 176 B0B0 192 C0C0 208 D0D0 224 E0E0 240 F0F0 1 01 17 11 33 2121 49 1 65 1811 97 1 113 1 129 1 145 1 161 1 177 1 193 1 209 1 225 1 241 1 2 02 18 12 342 50 2 66 2822 98 2 114 2 130 2 146 2 162 2 178 2 194 2 210 2 226 2 242 2 3 03 19 13 35 2323 51 3 67 3833 99 3 115 3 131 3 147 3 163 3 179 3 195 3 211 3 227 3 243 3 4 04 20 14 36 2424 52 4 68 4844 100 4 116 4 132 4 148 4 164 4 180 4 196 4 212 4 228 4 244 4 5 05 21 15 37 2525 53 5 69 5855 101 5 117 5 133 5 149 5 165 5 181 5 197 5 213 5 229 5 245 5 6 06 22 16 38 2626 54 6 70 6866 102 6 118 6 134 6 150 6 166 6 182 6 198 6 214 6 230 6 246 6 7 07 23 17 39 2727 55 7 71 7877 103 7 119 7 135 7 151 7 167 7 183 7 199 7 215 7 231 7 247 7 8 08 24 18 40 2828 56 8 72 8888 104 8 120 8 136 8 152 8 168 8 184 8 200 8 216 8 232 8 248 8 9 09 25 19 41 2929 57 9 73 9899 105 9 121 9 137 9 153 9 169 9 185 9 201 9 217 9 233 9 249 9 10 0A0A 26 1A1A 42 2A2A 58 A 74 A90A 106 A 122 A 138 A 154 A 170 A 186 A 202 A 218 A 234 A 250 A 11 0B0B 27 1B1B 43 2B2B 59 B 75 B91B 107 B 123 B 139 B 155 B 171 B 187 B 203 B 219 B 235 B 251 B 12 0C0C 28 1C1C 44 2C2C 60 C 76 C92C 108 C 124 C 140 C 156 C 172 C 188 C 204 C 220 C 236 C 252 C 13 0D0D 29 1D1D 45 2D2D 61 D 77 D93D 109 D 125 D 141 D 157 D 173 D 189 D 205 D 221 D 237 D 253 D 14 0E0E 30 1E1E 46 2E2E 62 E 78 E94E 110 E 126 E 142 E 158 E 174 E 190 E 206 E 222 E 238 E 254 E 15 0F 31 1F 47 2F2F 63 F 79 F95F 111 F 127 F 143 F 159 F 175 F 191 F 207 F 223 F 239 F 255 F

41. Web site http://poynterextra.org/cp/colorproject/color.html