GDT 150 Design for the Internet

Handout: Colors for the web

Color is presented on the web in two ways:

Either way, colors are described in six digits with hexadecimal notation (base-16). (For those of you who have worked with Photoshop, this will look very familiar) Each digit represents one of 16 numbers (0-15), instead of the normal 10. The extra numbers (10-15) are represented by the letters A-F. So, 0 is the lowest number and F is the highest.

A hex code for a color looks like this: #FFCC99 (a light orange) It denotes colors as follows: #RRGGBB. The first 2 digits represent the red channel, the second two, the green channel, and the third two, blue. The greater the amount of the color, the higher the number. Remember that monitors display using additive color, meaning that you add the three primary components to get white. So, white is designated as #FFFFFF. Red, Green and Blue are all present full-strength, which add up to make white. Black is #000000; there is no red, no green, and no blue.

Each channel has 256 different levels available, or 8 bits. Each digit ranges from 0-F (representing 0-15), 16 options, so 16 x 16 = 256. 3 channels, each with 256 options, so 256 x 256 x 256 = 16,777,216 available colors (24-bit color).

Unfortunately, not every system is capable of displaying 16,777,216 colors (24-bit color). Some monitors commonly used today can display only 256 colors (8-bit display), or can display only 65,536 colors (16-bit display). Each bit-depth has its own problems and solutions.

To cope with 256 color monitors, the web safe color palette was devised. It is made up of 216 colors that will not dither on 256 color displays. Why 216? 256 available colors minus colors used by the system, which varies based on platform. Then take the next number that divides evenly into the available number of colors, 216.

The hex codes of web safe colors happen to be easy to recognize. They are always made up of three sets of the same digit repeated twice and the digits are limited to six different ones. The possible sets of digits are 00 33 66 99 CC FF. Any combination of those six means that the color is web safe.

Web safe

Non-web safe

The way that non-web safe colors are displayed on 256 color monitors varies based on the platform and the browser. Sometimes, all the colors will be shifted to the nearest displayable color. Sometimes, the HTML colors will shift to the nearest displayable color and some or all of the graphics will dither. Sometimes all the non-web safe colors will dither.

When colors are displayed on 16-bit monitors (thousands of colors, or high color) on some systems, the graphics and HTML colors, even though they should be the same, are displayed differently. Webmonkey has a detailed explanation about the problem. One simple solution to the problem is to make the background color of your gifs transparent, so that the graphic color and the HTML color never but up against each other.