Color tutorial
Home page
Paint colors
Visible light
HSB: hue, saturation, brightness
Greyscale
RGB: red, green, blue
Web safe colors
CMYK: cyan, magenta, yello, black
Spot color
 

Web safe colors

If every image contained 24 bits of RGB color information for each pixel, file sizes would be unmanageable even in these days of CD-ROMs, multi-gigabyte hard drives, and fast connections. We can build an index of some smaller number of colors (out of 16M), and use just those colors in a specific image. This index is usually called a palette, and it frequently consists of 256 colors (which can be indexed in one byte). Older video cards often used a 256-color palette, to limit the size of video RAM.

The Web standardized years ago on a pre-defined palette of 216 colors, which are always supposed to display correctly in any browser. You can select from these “Web safe” colors for use in HTML tags or (preferably) style sheets. The pre-defined colors are those in which R, G, and B values are equal to 00, 33, 66, 99, CC, or FF hex (0, 51, 102, 153, 204, or 255 decimal; 0, 20, 40, 60, 80, or 100 percent). For example, the light tan bar at the top of this page is #FFCC99 or RGB(255,204,153); the darker brown bar at the left is #996633 or RGB(153,102,51). All current graphics software for Web development will allow you to choose Web safe colors.

If a display card cannot handle all of the colors it is given, then intermediate colors may be displayed by mixing pixels of the two nearest possible colors. This effect is known as dithering, which usually produces an unpleasant appearance. Web-safe colors will always avoid dithering, so they are best used for large areas of color (like the bars at the top and left of this page). In practice, very few browers today will have problems even with colors that don’t conform to the standard.

Trivia question: You’ve heard that graphics cards use 32-bit color, but we’ve only talked about 24 bits. What happened to the other 8 bits? Answer: they are called the “alpha channel,” and carry information about transparency. Your graphics software takes care of this—you don’t have to specify or worry about it.

 
     

Copyright © 1997, 2002, Tom Jewett, <jewett@cecs.csulb.edu>
Department of Computer Engineering and Computer Science
California State University, Long Beach