Color Table

Note  Before printing this or any of the related pages on a color printer, select "Print background colors and images" from the Advanced tab of the Internet Options dialog box in Windows Internet Explorer.

Colors can be specified in HTML pages by using numbers to denote an RGB color value, or by using a color name. In Windows Internet Explorer 9 and later, you can also define colors by hue, saturation, luminosity (HSL) values and alpha transparency.

This topic contains the following sections.

Standard HTML Colors

Only 16 color "keywords" (names) are defined by the HTML 4.01 standard. These colors can always be rendered properly, regardless of the color resolution of the user's display card.

Sixteen standard HTML colors

The Cascading Style Sheets, Level 2 Revision 1 (CSS2.1) specification includes "orange" (#FFA500) for a total of 17 color keywords.

Additional Color Names

In addition to the colors listed above, Internet Explorer supports a wide variety of named colors. Click the links below to view tables of colors sorted in various ways. The code example sorts the colors dynamically by clicking the column headers. Not all browsers support these additional named colors; therefore, when specifying color values for Web pages targeted to work across different browsers, use the RGB or HSL color values.

Click to view sample.

RGB Notation

An RGB color value normally consists of a '#' immediately followed by a triad of two-digit hexadecimal numbers specifying the intensity of the corresponding color: (R)ed, (G)reen, and (B)lue. For example, the color value #FF0000 is rendered red because the red number is set to its highest value, FF (or 255, in decimal).

Each of the following style rules refer to the same color: namely, red. The three digit short-hand form is converted into the six digit form by replicating digits (#F00 becomes #FF0000). The functional rgb() notation uses a comma-separated list of integer numbers from 0 to 255, or percentage values.

Copy 

em { color: #f00; }              /* #rgb */
em { color: #ff0000; }           /* #rrggbb */
em { color: rgb(255, 0, 0); }    /* integer range 0 - 255 */
em { color: rgb(100%, 0%, 0%); } /* float range 0.0% - 100.0% */ 
em { color: red; }               /* color keyword */

Standards-Compliant Mode

When you use the !DOCTYPE declaration to specify standards-compliant mode, Microsoft Internet Explorer 6 and later versions ignore style sheet declarations that do not comply with Cascading Style Sheets, Level 1 (CSS1). According to CSS1, colors specified with hexadecimal RGB values must have a leading '#' character. Values like "FFFFFF" are ignored, not treated the same as "#FFFFFF" as in previous versions of Internet Explorer. This affects all Cascading Style Sheets (CSS) attributes and properties that accept an RGB color value.

RGBA and HSL Notation

In Internet Explorer 9, the RGB color model also includes an "alpha" value that specify the opacity of a color. The format of an RGBA value in the functional notation is a comma-separated list of three numerical values (either three integer numbers or three percentage values), followed by an decimal value between 0 and 1.

Copy 

em { color: rgb(255, 0, 0) }        /* integer range 0 - 255 */
em { color: rgba(255, 0, 0, 1) }    /* the same, with explicit opacity of 1 */
em { color: rgb(100%, 0%, 0%) }     /* float range 0.0% - 100.0% */
em { color: rgba(100%, 0%, 0%, 1) } /* the same, with explicit opacity of 1 */
Note  Though RGB values support hexadecimal notation, RGBA values do not.

Internet Explorer 9 also supports numerical hue, saturation, luminosity (HSL) colors as a complement to numerical RGB colors. HSL colors are encoding as a triple (hue, saturation, lightness).

  • Hue is represented as an angle of a color circle, where red is both 0° and 360°. The other colors are spread around the circle, as follows:

    DegreeNameColor
    0°redred
    60yellowyellow
    120limelime
    180cyancyan
    240blueblue
    300magentamagenta
    360redred

     

  • Saturation is represented as a percentage, where 100% is full saturation and 0% percent is a shade of gray.
  • Lightness is also represented as a percentage, where 50% percent is normal, 0% is black, and 100% is white.

The hsl() functional notation also has an hsla() alpha counterpart that allows you to specify opacity by using a floating point number between 1 and 0, as demonstrated in the following examples:

Copy 

em { color: hsl(0, 100%, 50%) }   /* red */
em { color: hsl(120, 100%, 50%) } /* lime green */ 
em { color: hsl(120, 100%, 20%) } /* dark green */ 
em { color: hsl(120, 100%, 80%) } /* light green */ 
em { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */ 
p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */

System Colors

Unlike the named colors, system colors have no numeric RGB equivalent because the exact color is not known until the Web page is viewed on the user's system. In this way, system colors are user-defined because users can choose their own system color scheme from the Windows Control Panel. System colors are especially useful for UI components.

Not all of the system colors are appropriate for a background or text color; however, some of them are intended to be used in combination. The following table demonstrates appropriate text and background colors, as they would appear on a Windows Vista system with default colors.

Text and background colors using default colors

Note  The system color names have been deprecated in the Cascading Style Sheets, Level 3 (CSS3) recommendation.

For a complete list of system colors, see User-Defined System Colors.

Related topics

CSS Compatibility in Internet Explorer
CSS Attributes: Color and Background
CSS Attributes: User Interface

 

 

Show: