Introduction to Interactive Media 07: Color in Interactive Digital Media.

Introduction to Interactive Media

07: Color in Interactive Digital Media


How do you make color

• Printer (like paint) = mix pigments

• Computer = mix lightIntroduction 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.




Print Color = CMYK Color

• CYMK– Cyan, magenta, yellow, and black.– Small dots of color combinations

can reproduce many different colors.

• Also called process color.



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


Additive vs. Subtractive Color



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.



Out of Gamut Color



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.



Color depth example


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


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).




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.


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?



GIF images best suited for


• Cartoon-like images

• Logos

• Images with limited gradation of color


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.



Example Hex Colors


Web Safe Colors

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


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


Color Resources

• More info about color.

• Take color quiz

Introduction to Interactive Media 07: Color in Interactive Digital Media.

Documents

Transcript of Introduction to Interactive Media 07: Color in Interactive Digital Media.