1. 07: Color in Interactive Digital Media

2. Introduction to Interactive Media
How do you make color
Printer (like paint) = mix pigments
Computer = mix light
Introduction to Interactive Media

3. Introduction to Interactive Media
Computer Color = RGB
Comprised of red, green and blue light.
Varying amounts of light produce different colors.
With RGB color you can not represent the entire color spectrum.
Introduction to Interactive Media

4. Print Color = CMYK Color
CYMK
Cyan, magenta, yellow, and black.
Small dots of color combinations can reproduce many different colors.
Also called process color.
Introduction to Interactive Media

5. Additive vs. Subtractive Color
Color images on computer monitor use additive process.
Varying amounts of Red, Green, and Blue light are added together to create the color
Color images on printed surface are formed using subtractive process.
Light is reflected from the printed surface.
Pigments that form image absorb some of the colors.
Remaining colors reach the eye to produce image.
See the difference:
Introduction to Interactive Media

6. Additive vs. Subtractive Color
Introduction to Interactive Media

7. Challenge of Designing for Print
Graphic artists convert from RGB (additive) color models to CMYK model if image is printed.
Out of gamut colors are consideration.
Introduction to Interactive Media

8. Introduction to Interactive Media
Out of Gamut Color
Introduction to Interactive Media

9. Introduction to Interactive Media
RGB Color Depth
How many bits do you need to describe a color?
24-bit (3 bytes) color is most common.
Each light, R, G, B, can be one of 255 levels.
Combination yields 16 million different colors.
Introduction to Interactive Media

10. Introduction to Interactive Media
Color depth example
Introduction to Interactive Media
24 bit color = 16 million colors total
4 bit color = 16 colors total
3 bit color = 8 colors total
2 bit color = 4 colors total

11. Introduction to Interactive Media
RGB Color Depth
Low color resolution may cause color banding.
Quantization leads to breaks in shades of continuous tone images.
Dithering = Combining pixels of different colors to produce another color not available in the indexed palette. (Improves image quality without increasing bit depth).
Introduction to Interactive Media

12. Introduction to Interactive Media
RGB Color Depths
8-bit color creates images limited to 256 colors. (GIF images)
24-bit color yields images that can contain 16.7 million color possibilities.
Default in PhotoShop = 8 bits/channel * 3 channels (RGB) = 24 bit image
48-bit color yields images that can contain up to 281 trillion color possibilities.
Introduction to Interactive Media

13. Introduction to Interactive Media
GIF Image format = 8 bit
A GIF image can not support more than 256 different colors.
This limitation keeps GIF files sizes small.
Color limitation makes GIF most suited for?
Introduction to Interactive Media

14. GIF images best suited for
Cartoon-like images
Logos
Images with limited gradation of color
Introduction to Interactive Media

15. Hexidecimal Color Codes
Each 8 bit color value can be represented as a 2 digit base 16 number. (16 x 16 = 256)
Hexidecimal number means base 16 – each digit is either 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
Each color (comprised of 3 – 8 bit values can be described as a six digit Hex code.
Introduction to Interactive Media

16. Example Hex Colors

17. Web Safe Colors
Web Safe colors – recommended when 8 bit monitors were common.

18. Color Considerations Warm vs. cool colors Color wheel Color contrast
Color meaning
Branding of client
Cultural color associations
Industry color associations
Target audience preference
Color Trends

19. Color Resources
More info about color.
Take color quiz