# Class 37: Color Palettes

This outline is also available in PDF.

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:

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.

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

Disclaimer: I usually create these pages on the fly, which means that I rarely proofread them and they may contain bad grammar and incorrect details. It also means that I tend to update them regularly (see the history for more details). Feel free to contact me with any suggestions for changes.

This document was generated by Siteweaver on Tue Apr 15 23:11:42 2008.
The source to the document was last modified on Thu Jan 17 16:44:17 2008.
This document may be found at `http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2008S/Outlines/outline.37.html`.

You may wish to validate this document's HTML ; ;

Samuel A. Rebelsky, rebelsky@grinnell.edu

Copyright © 2007-8 Janet Davis, Matthew Kluber, and Samuel A. Rebelsky. (Selected materials copyright by John David Stone and Henry Walker and used by permission.) This material is based upon work partially supported by the National Science Foundation under Grant No. CCLI-0633090. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation. This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. To view a copy of this license, visit `http://creativecommons.org/licenses/by-nc/2.5/` or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.