Class 37: Color Palettes

Held: Tuesday, 8 April 2008

Summary: We consider ways to represent images more concisely by approximating those images. We consider both Web-safe colors and, more generally, color palettes, a technique for representing images more concisely.

Related Pages:

• EBoard.
• Lab: Color Palettes.
• Reading: Color Palettes.

Notes:

• Normal start-of-class time for discussion of campus issues.
• EC for attending Wednesday evening Con Brio concert (approx 9:30 in the pub).
• EC for attending Thursday noon applied studio recital in Sebring-Lewis.
• EC for attending Thursday 4:15 talk on Calculus for Dogs.
• Given the slew of email I received last night, I expect that we should talk about Assignment 8.
• Reading for tomorrow: Vectors.

Overview:

• Saving space by approximating colors.
• One strategy: Web-safe colors.
• Another strategy: Color palettes.
• Choosing palette colors.
• Using different palettes.

Some Context

• We are in the process of considering ways to write images to files (so that we can read them back again).
• We have looked at two approaches to making files smaller:
  • Write less per color (labs)
  • Write fewer colors (homework 8)
• In terms of writing less per color, we've gone from
• between one and a dozen characters per color (RGB integers)
• between six and a dozen characters per color (RGB components)
• exactly three characters per color (RGB components as characters
• Today we see how we can get down to one character per color.
• This strategy requires a compromise: We often end up approximating the image we are writing.

The Web-Safe Encoding

• One way to approximate colors is to set up a regular grid of colors and move each color to the closest approximation in the grid.
• If there are three degrees of freedom (the three components) and we allow k values per component, we have k³ colors in the grid.
• If we limit the total number of colors to 256, we can have at most six values per component, which we'll call the levels of each component. (Component levels vary from 0 to 5.)
• How do we take the three level values and convert to an integer between 0 and 255? In effect, we treat the three level values as digits in a base-6 number.
  • We multiply the red level by 36
  • We multiply the green level by 6
• We keep the blue level as is
  • We add them all together
• Given a number so constructed, how do we convert it back into a color?
  • We find each level and multiply it by 255/5 (to represent the 6 levels)
  • We find the red level by dividing by 36
  • We find the green level by removing the red levels (mod by 36) and then divding by 6
  • We find the blue level by removing the red and green levels (mod by 6)

Fun with Images: Changing Palettes

• Note that palettes permit some very simple, but very strange transformations to images. In particular, we can use one palette to save an image and another palette to restore the image.