Introduction to Interactive Media 07: Color in Interactive Digital Media
Introduction to Interactive Media
07: Color in Interactive Digital Media
Introduction to Interactive Media
How do you make color
• Printer (like paint) = mix pigments
• Computer = mix lightIntroduction to Interactive Media
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
Introduction to Interactive Media
Introduction to Interactive Media
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
Introduction to Interactive Media
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: http://dx.aip.org/advisor/cmyk_color.html
Introduction to Interactive Media
Additive vs. Subtractive Color
Introduction to Interactive Media
Introduction to Interactive Media
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
Introduction to Interactive Media
Out of Gamut Color
Introduction to Interactive Media
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
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
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
Introduction to Interactive Media
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
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
Introduction to Interactive Media
GIF images best suited for
Introduction to Interactive Media
• Cartoon-like images
• Logos
• Images with limited gradation of color
Introduction to Interactive Media
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
Introduction to Interactive Media
Example Hex Colors
Introduction to Interactive Media
Web Safe Colors
• Web Safe colors – recommended when 8 bit monitors were common.
Introduction to Interactive Media
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
Introduction to Interactive Media
Color Resources
• More info about color.
• Take color quiz