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
What is Color? Long 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. Short Source: Bennett, J. (2005). Design Fundamentals for New Media. Thomson Delmar Learning: New York.
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 Monitor CYMK - print Source: Bennett, J. (2005). Design Fundamentals for New Media. Thomson Delmar Learning: New York.
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.
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.
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/
Colors • Contrasting colors (complements) are diametrically opposite on the color circle.
Color complements • Red, Yellow, Blue primary colors • Colors opposite primary are complements • Green complement Red • Purple complement Yellow • Orange complement Blue
Brain absorbs color and tries to balance total absorption of Red with its complement, Orange Source: http://poynterextra.org/cp/colorproject/color.html After Image will be Green
Color & Science • Need a model that relates subjective sensation of color to measurable phenomena
Color Models • An artist’s color wheel: red, yellow, and blue (RYB) • Additive color: red, green, blue (RGB) • Subtractive color: cyan, magenta, yellow, and black (CMYK) • Hue, saturation, and brightness (HSB)
http://kuler.adobe.com/#create/fromacolor 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
Monochromatic color harmony: colors of same hue, differing in brightness and/or saturation All orange All blue
Monochromatic color harmony: H16,S92,B38 H16,S18,B100 H16,S84,B100
Complementary Two opposite colors with any brightness or saturation
Complementary: various blues, with red-orange highlights http://designwashere.com/complementary-colors-in-web-design/
Analogous Two or more colors with hues close together.
Triadic: Any three colors spaced equally around CW.
Triadic: red, yellow, blue HSB values 240, 74, 80 55, 42, 100 351, 63, 83 240, 59, 57 55, 91, 91
Sites | Color • http://websitetips.com/colortools/sitepro/ • http://colormixers.com/mixers/cmr/ • http://colorschemedesigner.com/ • http://learn.colorotate.org/learn-more.html • http://www.devwebpro.com/25-popular-color-scheme-and-palette-generators/ • http://www.allwebdesignresources.com/webdesignblogs/graphics/webdesigncolorcombinationsguide/
Specifying Color Hexadecimal
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)
Color Hexadecimal value: FF0000 FF 00 00 Red Blue Green
Hexadecimal based-16 0 1 2 3 4 5 6 7 8 9 A B C D E F 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 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 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 RGB Values: 0 – 255 Hexadecimal: 00 - FF
Web site • http://poynterextra.org/cp/colorproject/color.html