Web Technical Notes

Web Colors

W3C Standard Colors, "Standard" Palette, and Name/Number Crosswalk

This page is an overview of the issues involved in viewing colors used in web design. It also includes three tables with colors and their standard RGB hex numbers: the standard World Wide Web Consortium (W3C) colors; the Windows/Mac "standard" 6*6*6 palatte; and the 140 named color (actually 138 different colors), unofficial, but which most browsers recognize anyway.

General Color Notes

For colors generally:

There are 16,777,216 uniquely identifiable colors that can be specified in web programming. These colors are identified by their Red/Blue/Green content on a scale of 0 to 255, with 0 being no presence of the color and 255 being complete presence of the color. Mixing these three primary (i.e, electronic primary) colors produces the range of the nearly 17 million colors.

These colors are generally identified their hexadecimal equivalent, 00 to ff hex being 0 to 255 decimal. The hex values are combined into a triplit ordered red/blue/green in the form #rrbbgg. The decimal equivalent of this is rgb(rrr,bbb,ggg). The following are equivalent:

• #00ffff
• rgb(0,255,255)

Which are the named color "aqua."

With so many colors, many systems have been unable to take advantage of the full range of possibilities. If a specified color is not available, systems have various algorithms for generating a near equivalent, which may or may not be nearly equivalent. The so-called standard, browser-safe color palette has been the 216 colors more-or-less certain to display properly on Windows and Mac systems when the system is operating in 8-bit color mode (256 colors on screen), with six available colors per each red/green/blue component (6*6*6=216). That it should no longer be necessary to use the 216 color palette should by now be a safe assumption, as by now it should be that nearly all systems have the capability to display a broader palette (i.e., systems with video capability that is greater than 8-bit, 256 colors); however, any installation that still defaults to a compressed-graphic mode will still deform anything over 216 colors.

Eight bit means data words that have eight bits, that is, eight positions of 0 or 1, which means eight places where a value with one of two options may exist. Mathematically, this is 2 raised to the eight power, which is 2*2*2*2*2*2*2*2, which equals 256; 16 and 32 bit color systems are common. Sixteen bits means 2 to the 16th power, which equals 65,536; 32 bits means 2 to the 32nd power, which equals 4,294,967,296 (but only 16,777,216 of those can be addressed).

Other operating systems, such as Unix, may also have various limitations on the number of available color addresses. Thus a significant number of any site's potential viewers may still be limited to the traditional "safe" palette. More or less current information about color display capabilities is available at Browser News under Statistics/Trends. (Systems that cannot display a color "dither" it, for example they alternate colors they can display: this may occur not only in 8-bit color but also in 16-bit color.)

For Windows and Mac Systems:

• In the 6*6*6 model, all browser-safe colors are in increments of 20 percent, thus all browser-safe colors are combinations of 00, 33, 66, 99, CC, and FF (in hexadecimal, which is 0, 51, 102, 153, 204, and 255 in RGB): this is the 6*6*6 color cube.
• In the 00/33/66/99/cc/ff pattern, 003366 would be considered a "safe" color, but 003060 would not.
• This paradigm is not even standard across PCs & Macs: see, for example, the Web Colors Homepage, Web color information, for more information on this (including the four colors of the 216 that IE sysems do not display properly); see also Death of the Websafe Color Palette? and their test that concluded that only 22 of the 216 colors did not end up being shifted incorrectly in at least one viewing environment.
• Legend has it that the browser-safe palette was first chosen by the developers of the NCSA Mosaic browser and was actually a subset of the Macintosh System palette. Forty colors were reserved for the browser and Windows GUI's, leaving 216 for the browser-safe palette. This was first published as part of the technical notes for Netscape 1.0 (Netscape Technical Note 10117).

For Other Systems:

• Unfortunately, most documentation concerning colors has ignored Unix and other systems, frequently citing the 216-color palette as a universal non-dithering palette when it is in fact non-dithering only for Macs and Windows. For Unix systems, the available colors per component may not be six: it may be five or even as low as four. Thus, the available colors may be 5*5*5 (125) or even 4*4*4 (64).
• A 5*5*5 palatte would be the values 00, 3F, 7F, BF, and FF (in hexadecimal, which is 0, 63, 127, 191, and 255 in RGB)
• A 4*4*4 palatte would be the values 00, 55, AA, and FF (in hexadecimal, which is 0, 85, 170, and 255 in RGB)

For All Systems:

• It should be obvious that the only values common to all three cubes (6*, 5*, and 4*) are 00 and FF, black and white, thus there are no "safe" colors for all platforms.
• The W3C defines 16 standard colors of its own, and they have no relationship to the 6* standard cube.
• Who know's what colors you see on this page?

A Note on Zero-Indexed Counting:

The color values above are based on zero-indexed counting, meaning that the first event is event number zero, the second event is event number one, -- that is, the second event is "offset" from the first event by one -- and so on. In the 6*6*6 schema, 00 to ff hex (0 to 255) is 256 events. The last event is 255 units greater than the first event, and there are five intervals between each available event (color): 255/5=51; 0+51=51 (33 hex), 51+51=102 (66 hex), and so forth. (A lot of things in computers are zero-indexed.)

A Note on Identifying Colors:

All of the examples on these color pages use either named colors (either the html 4.0 named set or the expanded "standard" set) or red/green/blue two-digit hexidecimal (rrggbb). There area actually five means of defining colors:

span.r1 { color: #f00 }              /* #rgb hexidecimal range 0-f */  
span.r2 { color: #ff0000 }           /* #rrggbb hexidecimal range 00-ff */
span.r3 { color: rgb(255,0,0) }      /* decimal integer range 0 - 255 */
span.r4 { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
span.r5 { color: red }               /* html 4.0 named */ 

(Note that #rgb expands to #rrggbb by replicating the value, not be adding a zero: this allows #fff to correctly expand to #ffffff (not #f0f0f0) and produce "white" in both formats).

Color Tables

All of the above notwithstanding,

The first table below is the "official" W3C html 4.0/CSS 2.1 colors, which are defined in "A Standard Default Color Space for the Internet — sRGB." (Orange was not in the original html 4.0 specification, but is in the CSS 2.1 specification.) The standard colors are also now defined in the CSS Color Module Level 3 (i.e., the color standard contained in the CSS level 3 standard). The second table includes the 143 colors in the CSS 3 specification, which were originally the Netscape browser standard colors (quite non-standard at the time by W3C standards but now the W3C standard). Note that these colors were not written to conform to the "standard" palate (80 is 50 percent saturation, ff is 100 percent saturation). Finally, there is an index to the six views of the standard palette, essentially rotating the color cube.

1. [ Table One: W3C Standard Set of Colors ]
2. [ Table Two: Unofficial Color Names, Name/Number Crosswalk ]
   [ Named Colors sorted by color saturation ]
3. The standard palette, seen by rotating the color cube, in six views:
   • Red layers
     [ Blue Rows ] [ Green Rows ]
   • Blue Layers
     [ Green Rows ] [ Blue Rows ]
   • Green Layers
     [ Blue Rows ] [ Red Rows ]
   • 6*6*6 Colors sorted by color saturation

Notes on CSS Validation

Through testing, it appears that any browser that recognizes a color set in a color attribute, e.g.,

     <font color="mediumorchid">mediumorchid</font>

will also recognize the color set in a style attribue, e.g.,

     <span style="color:mediumorchid">mediumorchid</span>

These will also pass html/xhtml validation. However, while the 16 W3C specified names will pass the CSS validation, the unofficial names, which are not in the W3C specification, will not validate as CSS. To validate as CSS the style attribute must use the numeric (i.e.,

     <span style="color:#ba55d3" . . .

Using the names in a color attribute has no effect on CSS validation (as this is not a CSS statement) but requries html 4.01/xhtml 1.0 validation to be to the transitional, not strict, level.

In order to not only use the actual color names to set the colors but also to validate properly, table three (above) uses the deprecated attribute bgcolor= of the <td> element to set the cell colors; thus, "mediumorchid" is the following code:

      <td align="center" bgcolor="mediumorchid">
        <span style="color:white">mediumorchid<br />ba55d3</span>
      </td>

Needless to say, it is best to avoid using the non-standard color names in order to support an ultimate migration to CSS- and strict html- validation through adherence to published standards. (With the exception of that one item of that one table, this page is otherwise xhtml 1.1 [i.e., strict] compliant.)

Changing Page Settings:
Changing Your Browser's Display of Web Page Colors and Text Size

Netscape/Mozilla/Firefox

Colors

1. In Netscape/Mozilla,
   • choose Edit/Preferences
   • In the Category box, expand the Appearance menu and click on Colors.
   In Mozilla Firefox,
   • choose Tools/Options
   • In General, select Fonts & Colors
2. If checked, uncheck the "Use System Colors" box.
3. Selcet the radio button for "Use my chosen colors..."
4. Choose the colors you want to use for Text, Background, and types of Links.
5. Check the Always Use My Colors, Overriding Document box.
6. Choose the OK button.
   The Colors dialog box will close, and the Internet Options dialog box will be on the screen.
7. Choose the OK button.
   The Internet Options dialog box will close.
   All web pages will now appear in colors you chose.

Text Size

• Under View, select Increase or Decrease text size.
  OR
• use <ctrl>+ or <ctrl> - to increase or decrease text size.

Internet Explorer:

Colors

1. Choose the Internet Options command, which will be under either Tools or the View.
2. On the General tab, select Accessibility and check box to "Ignore colors specified on Web Pages": click OK.
   NOTE: Accessibility also appears on the Advanced tab: do not use that selection.
3. On the General tab, select Colors.
4. Choose the colors you want to use for Text, Background, and types of Links.
5. If checked, uncheck the "Use Windows Colors" check box.
6. Choose the OK button.
   The Colors dialog box will close, and the Internet Options dialog box will be on the screen.
7. Choose the OK button.
   The Internet Options dialog box will close.
   All web pages will now appear in the colors you chose.

Text Size

• Under View/Text size, select Largest/Larger/Medium/Smaller/Smallest.

Low vision Recommendation

Try these colors:

• Text: White
• Background: Black
• Links: Yellow, Silver

References

Other Key Links

Contact DocSteve

Copyright © 2014
Steve Sconfienza, Ph.D.
All Rights Reserved