Color Depth or Bit Depth is the number of binary bits that are required to define the color of each pixel in an image. Images that are defined using pixels are called Digital Images.

Color Depth is a factor that determines the quality of a digital image. Bit Depth also determines the number of available colors in a graphic image's Color Palette.

In a black and white graphic, a pixel is either black or white. This information can be stored using one bit of computer memory. A black-and-white graphic has a color depth of either "one bit" or of "two colors. When the human eye looks at a color photo or an outdoor scene, it can differentiate millions of colors.

The first computers to appear had monochrome (1-bit) displays. Not too long after that, they could display 16 colors (4-bit color), then 256 colors (8-bit). "We've come a long way". Today's systems can display either 65 thousand colors (16-bit, also called "High Color") or 16.7 million colors (24-bit called "True Color").

16.7 million is approximately the number of colors that the human eye can discern.

The table below shows how many Bits of storage space are required to store the color information for one Pixel of each color system.

Color Depth	Bits / Pixel	Binary Power	Number of Possible Colors
Black & White (or Monochrome) (A pixel is either on or off)	1	2¹	2
2-bit CGA Color System	2	2²	4
4-bit EGA Color System	4	2⁴	16
Gray Scale (256 shades of gray)	8 (One Byte)	2⁸	256
8-bit VGA Color System	8 (One Byte)	2⁸	256
15-bit High Color	15	2¹⁵	32,768
16-bit High Color	16 (Two Bytes)	2¹⁶	65,536
24-bit True Color (What the human eye sees)	24 (3 Bytes)	2²⁴	16,777,216
32-bit Color (8 bits are used for non-color purposes)	24 (3 Bytes)	2²⁴	16,777,216

A Bit About Bytes

Computers use the Binary Number System at the base of all of their calculations and the Binary System uses Binary Digits to form its numbers.

A Binary Digit is represented by either a "1" or "0" which means it is either "ON" or "OFF". This is the smallest piece of information that a computer works with. The is also the smallest unit of data measurement for computer memory. A Binary Digit is equal to one Bit of information. There are eight consecutive Bits in one Byte of information.

So using Bits (and Bytes), we can represent the different color systems:

In the table, the Black & White color system is a 1-bit system. A single bit can be on or off, representing the color white or black. To arrive at the number of colors in this system, you take 2 to the power of 1 (or 2¹) and this equals 2, so there are two colors in the Black & White color system.
In the 256 Color System, it takes 8 bits (or one Byte) to represent all 256 colors. When you take 2 to the 8th power (or 2⁸) you get 256.
In the True Color System, it requires 3 bytes to describe a color. One byte is used for each of the Red, Green and Blue components. 3 Bytes equals 24 bits, and 2 to the 24th power equals 16.7 million possibilities

Browser Safe Colors for the Web

Before the days of High Color and True Color, older computer monitors (back in the late 1990s) displayed only 256 colors because they only had 8-bit video cards. Even different web browsers had their own unique palette of 256 colors, but they all had some colors in common.

These common colors are called the "Browser Safe Colors" or "Web Palette" or the "216 Palette" and they consist of 216 colors. Back then, if you designed a graphic with colors that were not in the Browser Safe Color Palette, then your monitor would dither those colors in order to display something. Many times, the dithering would result in a dotted pattern that would be quite unsightly. (Of course, how bad it looked, was determined by the eye of the beholder.)

So, in the good ole days, web designers and developers tried to use the Browser Safe Colors in their designs so everyone would see the correct colors without the dithering. Computers and monitors have come a long way in a few short years and these older monitors are now in the minority.

Most monitors today can display one of the following color levels:

16-bits per pixel, called "High Color", which has 65 thousand colors
24-bits per pixel, called "True Color", which has 16.7 million colors
30 and 36-bits per pixel. This is also True Color because there are no additional colors available. The extra bits are used to improve the color in the image as it is processed down to a 24-bit final form.

So there is no longer strong justification for designing for Browser Safe Colors.

If you want to be sure that every single visitor to your site is able to correctly view your colors, no matter what kind of computer monitor they have, then stay with the Browser Safe Colors.

A good compromise to this situation would be to use Browser-Safe colors for flat-color illustrations, logos with flat-color, and areas in an image that have a lot of a single colors (like bullets, buttons, backgrounds and rulers). Simple graphics and flat colors look terrible when dithered, but photographs don't look near as bad.

In the next section on the Browser Safe Colors,, I'll explain what these colors are and why they are used and also talk about representing colors on web pages using HEX values and RGB values.