07: Color in Interactive Digital Media

Introduction to Interactive Media How do you make color Printer (like paint) = mix pigments Computer = mix light Introduction 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

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

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

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

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

GIF images best suited for 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

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