Color

COM 366

Web Design & Production

RGB color

• Amount of light in each channel 0 - 255

• Closer to 255, whiter color gets

• Every color has value for red, green, blue

• In computers, use hexadecimal system to store color info– 6 characters (numbers/letters), 2 for each color

Web safe colors

• 216 colors that are shared by Windows and Mac systems

• Made up from 3 shades of each of primary colors– 6699FF is web safe– FAD579 is not

Original photo; note the smoothness in the detail.

Original image using the web-safe color palette with no dithering applied. Note the large flat areas and loss of detail.

Original image using the web-safe color palette with dithering. Note that even though the same palette is used, the application of dithering gives a better representation of the original.

• 216 made up from 6 shades of each of primary colors– 6699FF is web safe– FAD579 is not

Image sources

• Scanning

• Digital cameras

• Electronic illustration– Illustrator– PhotoShop

• Want to avoid clip art, stock photos– Look too generic

Anti-aliasing

• With text it creates a slight blurring at edges– So that edges of text look smooth

• Should set all text using anti-aliasing– Except small text (< 10 points)

anti-aliasedaliased

Image resolution

• dpi = dots per inch (printed page)

• ppi = pixels per inch (screen)

• Default for the Web is 72 ppi (or dpi)

Bitmapped files

• Pixel based images

• Also known as raster images

• Differ from vector graphics– Made up of smooth lines,

based on mathematical formulas

– No pixels

gif files

• Graphic Interchange format

• Contain maximum of 8-bit color info– 256 colors

• Have to convert to indexed color from RGB

• Used for line art, graphics, etc.

Interlacing

• Applied to gif files

• Image downloads in a series of passes

• Works well for large graphics, slow Internet connections

Interlaced file displaying every 8th row; this is how the file first loads.

Interlaced file displaying all rows; this how the file appears after the entire graphic has loaded.

jpeg files

• 24-bit color mages– Contain millions of

colors

• Compressed files• “lossy” compression scheme used

– Some detail in image is lost

• Used for photos• Extension needs to be jpg or jpeg

• Progressive– Same as interlaced gifs

• Image quality– 0 - 100% or 1 - 10– Higher number the better the image quality– and larger file sizes– Usually medium, or 50%, is satisfactory

Color terms

• Hue: the color an object is– Identified by the name of the color -- red,

green, blue, etc.

• Saturation (chroma)– Intensity of a color– Less saturated color means less of color is there

Warm/cool colors

• Warm colors (red, yellow, orange)– Stimulating, excitement, etc.– Can be somewhat overpowering

• Cool colors (blue, violet, green)– Calming, relaxing– Tend to recede

The color wheel

Yellow

Green

VioletOrange

Red

Blue

Complementary Colors

• Colors opposite each other on the color wheel are known as complementary colors

• These colors are said to contrast because they don’t share any common color

In Wheatfields with Ravens, Vincent van Gogh used high contrast colors to make the yellow wheat fields stand out against the dark blue sky.

Analogous colors• Analogous colors are

those colors that you'll find fairly close to one another on the color wheel.

• Always going to be harmonious

• Much less intense than complementary colors