| Home » Web Pages » Handbook » Color |
Color - RGB, Color Palettes, and Dithering
This document contains information on RGB (Red, Green, Blue), Color Palettes and Dithering. It explains how color works with browsers and how to get it on your Web page. Listed below are the areas covered:
- Why 216 safe colors are so important
- How color works with your browser
- How to specify colors in a document
- Color Table
- Simple Conversion Chart
216 safe colors. Why They are Important
The major browsers, Netscape and Internet Explorer, use the same palette-management process to pull colors from the system palettes. So, if you specify colors by randomly choosing a color, those colors will be forced by the browsers to display the incorrect color from the system palette. This will cause dithering and others will see colors you don't intend to be seen. This is why it is so important to use the 216 safe colors.
To alleviate that problem you should always specify colors for HTML pages using the 216 safe colors. These colors are generated by using 6 of the 256 possible values for each of the red, green and blue components. When using the Hexadecimal coding for colors, your safe colors will have the following values:
00, 33, 66, 99, CC or FF
How Colors Work With Your Browser
Browsers use a 256-color palette to be compatible with the many 8-bit displays still in use, with colors specified by their RGB code. In browsers, the RGB code is given as a triplet of the following hexadecimal digit pairs, where rr, gg and bb denote the red, green, and blue components of the color.
rr, gg, bb
Each component ranges from 00 to FF in hexadecimal (corresponding from 0 to 255 in decimal). Windows has reserved 20 of the 256 colors for the title bars, menu bars etc. so that their colors stay the same for different applications. These colors are usually not changed by the application. 16 of the colors (shown below) consist of full-intensity (light) and half-intensity (dark) versions of the primary colors and their combinations, plus two shades of gray, white, and black.
|
Black
000000 |
Gray
808080 |
Maroon
80000 |
Green
008000 |
Navy
000080 |
Purple
800080 |
Olive
808000 |
Teal
008080 |
| White
FFFFFF |
Silver
C0C0C0 |
Red
FF0000 |
Lime
00FF00 |
Blue
0000FF |
Magenta
FF00FF |
Yellow
FFFF00 |
Cyan
00FFFF |
These colors may be specified by their hexadecimal RGB codes. If compatibility between the 256-color palettes of major browsers is desired, the palette should consist of the colors having RGB codes with the R,G, and B component values restricted to the six hexadecimal values 00, 33, 66, 99, CC or FF. This combination of colors yields 256 colors (6x6x6), usually called the color cube. In addition to the reserved windows colors (eight of which also appear in the color cube), the remaining colors in the 256-color palette may differ between browsers and should not be used if potential dithering is to be avoided.
How To Specify Colors In A Document
Global default color settings for various browser features are typically found in the Options or Appearance/Preference section of the browser so they can be changed by the user.
The global default colors set in the browser may be overridden locally for the following features of a document. The color is the hexadecimal RGB code entered in the form "#rrggbb" where the quotes are required.
- Background of pages or frames: Use the attribute BGCOLOR=color of the BODY tag to set the background color of the page or frame. Example:
Example: for a background color of white you would use the attribute
<BODY BGCOLOR="#FFFFFF"> - Background of tables and table cells: Use the attribute BGCOLOR=color of the TABLE, TR, TH or TD table tags to set the background color of the entire table, table rows, or the table cells.
Example: for a background of a table or cell with the color of blue and a font color of white you would use the attribute:
<TD BGCOLOR="#0000FF"><FONT COLOR="#FFFFFF">blue<BR>"#0000FF"</Font></TD>
- Text: Use the attribute TEXT=color of the BODY tag to specify text color for the entire document; to override this specification selectively use the attribute COLOR=color of the FONT tag. Example:
Example: For a text color or RED you would use the attribute
<FONT COLOR="#FF0000"> - Links: Use the following attributes of the BODY tag:
LINK=color to set the color of unvisited links
VLINK=color to set the color of visited links
ALINK=color to set the color of active links (visible only when the link is first selected)
216 Safe Color Table
| FFFFFF | FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | |||||||||||||
| CCFFFF | CCFFCC | CCFF99 | CCFF66 | CCFF33 | CCFF00 | |||||||||||||
| 99FFFF | 99FFCC | 99FF99 | 99FF66 | 99FF33 | 99FF00 | |||||||||||||
| 66FFFF | 66FFCC | 66FF99 | 66FF66 | 66FF33 | 66FF00 | |||||||||||||
| 33FFFF | 33FFCC | 33FF99 | 33FF66 | 33FF33 | 33FF00 | |||||||||||||
| 00FFFF | 00FFCC | 00FF99 | 00FF66 | 00FF33 | 00FF00 | |||||||||||||
| FFCCFF | FFCCCC | FFCC99 | FFCC66 | FFCC33 | FFCC00 | |||||||||||||
| CCCCFF | CCCCCC | CCCC99 | CCCC66 | CCCC33 | CCCC00 | |||||||||||||
| 99CCFF | 99CCCC | 99CC99 | 99CC66 | 99CC33 | 99CC00 | |||||||||||||
| 66CCFF | 66CCCC | 66CC99 | 66CC66 | 66CC33 | 66CC00 | |||||||||||||
| 33CCFF | 33CCCC | 33CC99 | 33CC66 | 33CC33 | 33CC00 | |||||||||||||
| 00CCFF | 00CCCC | 00CC99 | 00CC66 | 00CC33 | 00CC00 | |||||||||||||
| FF99FF | FF99CC | FF9999 | FF9966 | FF9933 | FF9900 | |||||||||||||
| CC99FF | CC99CC | CC9999 | CC9966 | CC9933 | CC9900 | |||||||||||||
| 9999FF | 9999CC | 999999 | 999966 | 999933 | 999900 | |||||||||||||
| 6699FF | 6699CC | 669999 | 669966 | 669933 | 669900 | |||||||||||||
| 3399FF | 3399CC | 339999 | 339966 | 339933 | 339900 | |||||||||||||
| 0099FF | 0099CC | 009999 | 009966 | 009933 | 009900 | |||||||||||||
| FF66FF | FF66CC | FF6699 | FF6666 | FF6633 | FF6600 | |||||||||||||
| CC66FF | CC66CC | CC6699 | CC6666 | CC6633 | CC6600 | |||||||||||||
| 9966FF | 9966CC | 996699 | 996666 | 996633 | 996600 | |||||||||||||
| 6666FF | 6666CC | 666699 | 666666 | 666633 | 666600 | |||||||||||||
| 3366FF | 3366CC | 336699 | 336666 | 336633 | 336600 | |||||||||||||
| 0066FF | 0066CC | 006699 | 006666 | 006633 | 006600 | |||||||||||||
| FF33FF | FF33CC | FF3399 | FF3366 | FF3333 | FF3300 | |||||||||||||
| CC33FF | CC33CC | CC3399 | CC3366 | CC3333 | CC3300 | |||||||||||||
| 9933FF | 9933CC | 993399 | 993366 | 993333 | 993300 | |||||||||||||
| 6633FF | 6633CC | 663399 | 663366 | 663333 | 663300 | |||||||||||||
| 3333FF | 3333CC | 333399 | 333366 | 333333 | 333300 | |||||||||||||
| 0033FF | 0033CC | 003399 | 003366 | 003333 | 003300 | |||||||||||||
| FF00FF | FF00CC | FF0099 | FF0066 | FF0033 | FF0000 | |||||||||||||
| CC00FF | CC00CC | CC0099 | CC0066 | CC0033 | CC0000 | |||||||||||||
| 9900FF | 9900CC | 990099 | 990066 | 990033 | 990000 | |||||||||||||
| 6600FF | 6600CC | 660099 | 660066 | 660033 | 660000 | |||||||||||||
| 3300FF | 3300CC | 330099 | 330066 | 330033 | 330000 | |||||||||||||
| 0000FF | 0000CC | 000099 | 000066 | 000033 | 000000 | |||||||||||||
Use the chart below to convert Hex to RGB
| HEX Value | 00 | 33 | 66 | 99 | CC | FF |
| RGB Value | 0 | 51 | 102 | 153 | 204 | 255 |
For example, if the HEX code of the color that you want is #FFCC99, the RGB Value would be 255,204,153. The RGB value is what you should use for the pwp counter.
For additional information on using color on your Web page, see the pages below:
- Project Cool HTML Basics: Choosing a Color
- Color Charts for the Color Blind
- Webmonkey's Death of the Web safe Color Palette?
Need Additional Help?
If you can't find the answers you need, please try:
- The help file for the application you are using.
- Our FAQs.
- The AT&T Worldnet Help Newsgroups.