Color Basics

HTML uses hexadecimal codes for colors. Graphics programs often use a palette of colors in the RGB (Red, Green, Blue) system. It is necessary to translate the RGB to hexadecimal for writing HTML code.

Safe Palette

A safe palette is a palette containing 216 RGB colors that are going to remain as stable as possible from one browser to another, between platforms, and at different monitor color capacities and resolutions. You should try to stick to the safe palette when using colors for Web pages. Most computers can display 256 colors. Microsoft graphics programs will allow you to work with the 256 colors.

Hexadecimal Codes

Hexadecimal is the base-16 number system which consists of the numerals 0-15 and the letters A-F used in combination to create a six character code for one color.

If you know the RBG colors (or decimal, ranging from 0 to 255) for the color you want to use, how do you convert it to hex? If you use Windows, you can use the calculator on your computer! Go to Start > Programs > Accessories > Calculator. Select View > Scientific. Type in the decimal for each component (red, green, and blue) and hit the Hex button after typing in each one.

Example

Your main Web page graphic is blue and pink. You would like to set the background color for the page to the same pink as in the graphic. You use the Eye Dropper in your graphics program to find the exact color of pink. It is Red 255, Green 182, and Blue 200. You open the calculator and type 255 and click the Hex button. The calculator displays FF. Click the Dec button and type in 182. Hit Hex and it displays B6. Repeat for 200 and get C8. Open your Web page and View Source. Type in <body bgcolor="#FFB6C8"> and your background is set to pink.

Document the colors you use on your Web site! This will help when you create new graphics for the site. Make a listing similar to this:

Color Hexadecimal Value Decimal (RGB) Value
Green 98A498 R 152

G 164

B 152

Purple 673D60 R 103

G 61

B 96

Helpful Web Sites

The best overall color resource page: http://www.hypersolutions.org/rgb.html

Chart of non-dithering colors -- hex and dec: http://www.lynda.com/hexh.html

Another color codes chart list -- hex and dec: http://www.webmoments.com/colorslist.htm

 

©2003, Kelly Moravec