Bit-Depth page


1-Bit image (781 bytes)	8-Bit image (5,362 bytes)	16-Bit image (11,982 bytes)

Bit depth (from Adobe CS Help)--also called pixel depth or color depth--measures how much color information is available to display or print each pixel in an image. Greater bit depth (more bits of information per pixel) means more available colors and more accurate color representation in the digital image. For example, a pixel with a bit depth of 1 has two possible values: black and white. A pixel with a bit depth of 8 has 2⁸, or 256, possible values. And a pixel with a bit depth of 24 has 2²⁴, or roughly 16 million, possible values. Common values for bit depth range from 1 to 64 bits per pixel.

Pixel depth A. 1-bit (Bitmap B. 8-bit (Grayscale) C. 8-bit (Indexed Color) D. 24-bit (RGB)

In most cases, Lab, RGB, grayscale, and CMYK images contain 8 bits of data per color channel. This translates to a 24-bit Lab bit depth (8 bits x 3 channels), a 24-bit RGB bit depth (8 bits x 3 channels), an 8-bit grayscale bit depth (8 bits x 1 channel), and a 32-bit CMYK bit depth (8 bits x 4 channels). Photoshop can also work with Lab, RGB, CMYK, multichannel, and grayscale images that contain 16 bits of data per color channel.

While 8-bit GIF images support 256 colors, cross platform issues leave a palette of only 216 colors that are completely safe to use on the Web. This group of Web-safe colors is often called the browser-safe palette. Because it is difficult to present this information visually in a black-and-white book, the palette can be viewed online at http://www.htmlref.com/reference/appe/safepalette.htm. Use of other colors beyond this safe set can lead to poor-looking images when viewed under limited color conditions such as 8-bit (256 color) VGA. Selecting a set of colors from the safe color palette and mixing them together in a process called dithering will approximate colors outside the safe range. In short, dithering attempts to imitate colors by placing similar colors near them, but generally creates irregularities that render the image unappealing.

The selection of the 216 safe colors is fairly obvious if you consider the additive nature of RGB color. Consider a color to be made up of varying amounts of red, green or blue that could be set by adjusting an imaginary color dial from the extremes of no color to maximum color saturation. The safe colors suggest six possible intensity settings for each value of red, green or blue. The settings are 0%, 20%, 40%, 60%, 80% and 100%. A value of 0%, 0%, 0% on the imaginary color dial would be equivalent to black. A value of 100%, 100%, 100% would indicate pure white, while a value of 100%, 0%, 0% is pure red, and so on. The safe colors are those that have an RGB value set only at one of the safe intensity settings. The hex conversions for saturation are shown on the Color Intensity Conversion Table below.

Setting a safe color is simply a matter of selecting a combination of safe hex values. In this case, #9966FF is a safe hex color; #9370DB is not. Most Web design tools like Macromedia Dreamweaver or Allaire HomeSite contain safe color pickers; so do imaging tools like Macromedia Fireworks or recent versions of Adobe PhotoShop. Designers looking for color palettes, including improved color pickers and swatches should visit http//visibone.com/colorlab/.