This section of the reference guides provides an overview of how to write color values for the Web, as well as a full list of supported color names. See the “Color theory” section in Chapter 4 for a discussion of color theory.

Color values

On the Web, colors are displayed by mixing red, green, and blue (RGB) light. Values range from 0 to 255 and can be written as such (e.g., rgb(5,233,70)), but they are more commonly written in hexadecimal. Colors written in hex consist of a hash sign (#) followed by six digits. The six digits are made up of pairs, representing the red, green, and blue color values, respectively.

#XXxxxx: Red color value
#xxXXxx: Green color value
#xxxxXX: Blue color value

Hexadecimal notation is a numbering system that has 16, rather than 10, as its base. Digits range from 0 to f, with 0 to 9 representing the same value as ordinary numbers, and the letters a to f representing 10 to 15. The letters can be either uppercase or lowercase. If you set the first two digits to their highest value (ff) and the others to null, you get #ff0000, which is the hex color value for red. If you write #00ff00, you get green, and if you write #0000ff, you get blue. If all are set to full, you get white (#ffffff), and if all are null values, you get black (#000000).

Hexadecimal can also be written in shorthand if the six-digit value is composed of pairs in which both numbers are the same. For instance, #ff6600 (orange) can be written as #f60, and #ffffff (white) can be written as #fff. All three pairs must consist of equal numbers. For instance, you cannot use shorthand for #ffff01. Also, although hexadecimal can be written in shorthand, many designers choose not to do so, because when all color values are written in full, it tends to be easier to scan CSS files for specific values.

Web-safe colors

The 216-color web-safe palette uses hex combinations of the following hex value pairs only: 00, 33, 66, 99, cc, and ff—for example, #cc6699, #33ff66, and #ff0000.

Using these pairs provides you with 216 colors that are said to not dither on Macs and Windows PCs that have 8-bit monitors (256 colors). Because the vast majority of monitors sold since 2000 are able to display thousands or millions of colors, this palette is now rarely used and is generally considered archaic and obsolete.

Color names

Although a significant number of HTML color names are supported by major browsers, the CSS standard only recognizes the following 17.

Although each color name in the preceding table begins with a capital letter (for book style purposes), color names are case insensitive, and lowercase is most commonly used. However, most designers ignore color names entirely, using hex all the time for consistency’s sake—a practice that the W3C recommends.

Opera

Full name: Opera.
Initial year of release: 1996 (first public release).
OS: Windows, Mac OS X, Mac OS, Linux, BeOS, Solaris, and others.
Website: www.opera.com/.
Market share estimate: Under 2%.
Trend: Stable.
Engine: Presto.
Compliance: Excellent. Passes Acid2, making it an excellent alternative to Firefox for a development base.
Comments: Starting life as a research project for a Norwegian telecom company, Opera has grown into a feature-packed, standards-compliant browser. Its innovative features—some of which are of direct benefit to developers—often lead its rivals, although the browser has been hampered over the years by a cluttered and superficially complex interface, and the browser for a long time identifying itself as Internet Explorer. Because of this, market share figures for Opera were—and indeed possibly still are—artificially low. However, in terms of reach, Opera has plenty of potential: there are versions of the browser for a massive range of systems, including for handheld devices. A developer toolbar is available from www.operawiki.info/WebDevToolbar.

Safari

Full name: Safari.
Initial year of release: 2003.
OS: Mac OS X, Windows.
Website: www.apple.com/safari/.
Market share estimate: About 4%.
Trend: Slow growth.
Engine: KHTML.
Compliance: Excellent, with reservations (see comments). Passes Acid2, making it suitable for a development base.
Comments: Most likely developed as a reaction to Microsoft axing Internet Explorer for Mac, Safari rapidly became the primary browser for Mac users. Its clean interface complements the KHTML engine, which is one of the most compliant in existence. (Indeed, Safari was the first browser to pass Acid2.) Although initially available to Mac users only, June 2007 saw the first beta of Safari for Windows, primarily intended as an aid to Windows-based developers creating content for Apple’s iPhone. Safari has some shortcomings regarding JavaScript support, and its method of anti-aliasing text is significantly different to other browsers. Prior to version 3, CSS borders and colors for form fields and buttons were ignored, the Mac OS Aqua equivalents instead being “forced.”

Other browsers

A number of other web browsers exist, although their market share is so minimal as to be considered all but insignificant. A possible exception to this is Linux-based Konqueror, although with its KHTML engine, you should expect similar results to those in Safari. Elsewhere, some browsers are based on Gecko (such as SeaMonkey/Mozilla and Flock), some on Trident (such as AOL Explorer/OpenRide), and one on both (Netscape Browser).