Color Basics

RGB Colors
Web Safe Colors
Predefined Colors
Working With Color

RGB Colors

To use colors appropriately on a web page requires that you know a little bit about RGB colors and how they are represented in a web page.

In the physical world colors are made up of a mixture of the three primary colors red, yellow, and blue. However computer monitors have to use the primary colors red, green, and blue instead. This limitation is due to the colors that can be generated by electron guns and the phosphors used on cathode ray tubes in the typical computer monitor. An RGB color therefore has a red component, a green component, and a blue component. Each component can have 256 shades and is represented by a number from 0 - 255. The color black (representing the absence of color) has an RGB value of 0, 0, 0. The color white (representing all colors) has an RGB value of 255, 255, 255. Using this system 16,777,216 different shades of color can be represented using RGB.

On a web page, RGB colors are represented using the hexadecimal numbering system rather than the decimal numbering system. The hex numbering system uses 16 digits instead of 10 digits. Those digits are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. A complete RGB value consists of 6 hex digits. Two digits for the red component, two digits for the green component, and two digits for the blue component. The color black would be 000000 in hex and the color white would be FFFFFF in hex. In HTML code, color values are preceded by the # symbol. As an example, the HTML color value #FF0000 would be a bright red color.

Top of page

Web Safe Colors

When web browsers with a graphical user interface (GUI) first came out most computer systems only had the capability of displaying 256 colors. Browsers were designed to display a so-called "browser safe" or "web safe" palette consisting of 216 colors. In order for your web page to display your color scheme correctly you had to stick to the "web safe" colors. If you specified an RGB color that was not "web safe" the browser would replace the color specified with the nearest "web safe" color.

"Web safe" colors always used the following pairs of hex values for the red, green, and blue components:

00
33
66
99
CC
FF

A combination of any of the pairs above for the RGB components is a "web safe" color. As an example, #3399CC is a "web safe" color, but #3399C9 is not. The following table displays the "web safe" palette more or less by hue.

These days most computer systems can easily display the full range of RGB colors and we don't need to stick strictly to the "web safe" colors. If however, your web site needs to target users who could be using older systems or AOL users limited to 256 colors then you should design your site with only "web safe" colors. For this course feel free to use the full RGB range of colors for your work.

Top of page

Predefined Colors

The W3C has defined a set of predefined named colors that can be used instead of hexadecimal numbers for color values in HTML code. These predefined names make the HTML code more readable. You should be aware that predefined named colors should, but are not guaranteed to render the same as the hex equivalent values. Look at the first two columns of this table in your browser. The colors should be the same in both columns. How does your browser stack up? You should also note that not all predefined colors are "web safe."

Top of page

Working With Color

When designing a web site you will need to decide on a common color scheme that will be used throughout the site. There are some tools available on the web to help you in choosing a color scheme. These work by letting you pick a primary color and the tool suggesting colors that will work well with the primary color. Try Color Schemer Studio at www.colorschemer.com. This tool has both a Mac and a PC version. A free PHP color schemer is available at www.hypergurl.com/colormatch.php.

When choosing color schemes you should keep in mind that colors can have an effect on people's moods and emotions. The following table lists some common colors and their associations.

Top of page