Using color in HTML pages

Description

<Related pages>
Answer How can I change the color of a link?
Answer If you have a version 4 or higher browser you can use Color Picker 2.0, a tool to select colors right from your browser.

There are several HTML elements with attributes to specify a color. There are two ways to do this :

Specify a color using a hexadecimal value.
Specify the color using the syntax color="#RRGGBB" where RRGGBB is a hexadecimal value for the amount of red (RR), green (GG) and blue (BB) in the desired color.

The range for the specified value for RR, GG and BB is 00 thru FF where 00 means no color and FF the maximum amount. This range corresponds with the decimal range 0 - 255.
So, the color FF0000 means bright red and 808080 is a medium gray.

Specify a color using a color name.
To simplify the use of colors, colornames were defined. This makes it easier to use colors, because you don't have to know the RRGGBB values, just the names. For example color="black". Downside is that there's not a name for every possible color. Also the official specification only includes the sixteen standard colors, so using any of the other colornames will not be valid HTML 4.0.
I have a list of all colornames included.
So, depending on which colors you want to use, you have to choose between using colornames and hexadecimal values. If you only use to the colors which have colornames for them defined, you could stick to the colornames. If you need full control over the colors you have to use the hexadecimal method.

Used colors versus graphics mode

If the graphics mode of a users computer supports 256 colors then not every color that can be specified will be shown exactly as defined in the page. The colors used in the page, not only for text but also in images, will be dithered by the browser to a fixed palette of 216 colors. This means that the browser replaces the colors that are not in the fixed palette by the closest matching color in this palette.
If you want to avoid this dithering you should use only colors that are in the Netscape palette.

Examples

Source
<TABLE border width="25%">
<TR><TD bgcolor="#700000" align="center"><FONT color="#FF9F00">The upper cell</FONT></TD></TR>
<TR><TD bgcolor="#007000" align="center"><FONT color="#00FF9F">The lower cell</FONT></TD></TR>
</TABLE>
 
Result
The upper cell
The lower cell
 
Source
<TABLE border width="25%">
<TR><TD bgcolor="maroon" align="center"><FONT color="red" >The upper cell</FONT></TD></TR>
<TR><TD bgcolor="green" align="center"><FONT color="lime">The lower cell</FONT></TD></TR>
</TABLE>
 
Result
The upper cell
The lower cell
Statistics

  Copyright © 1996 - 2000 Rob Schlüter,   schluter@knoware.nl   (last updated 1998/12/14)