Working with hex

The CSS specifications support just 17 color names: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. All other colors
must be written in another format, such as RGB numbers or percentages—
rgb(255.0.0) or rgb(100%,0%,0%)—or hexadecimal format, which tends to be most
popular in online design. Note that to keep things consistent, it actually makes sense to
write all colors—even the 17 with supported names—in hex. Colors written in hexcomprise a hash sign followed by six digits. The six digits are comprised of pairs, representing
the red, green, and blue color values, respectively:
#XXxxxx: Red color value
#xxXXxx: Green color value
#xxxxXX: Blue color value
Because the hexadecimal system is used, the digits can range in value from 0 to f, with 0
being the lowest value (nothing) and f being the highest. Therefore, if we set the first two
digits to full (ff) and the others to 0, we get #ff0000, which is the hex color value for red.
Likewise, #00ff00 is green and #0000ff is blue.
Of course, there are plenty of potential combinations—16.7 million of them, in fact.
Luckily, any half-decent graphics application will do the calculations for you, so you won’t
have to work out for yourself that black is #000000 and white is #ffffff—just use an
application’s color picker/eyedropper tool, and it should provide you with the relevant hex
value.
Web-safe colors
Modern PCs and Macs come with some reasonable graphics clout, but this wasn’t always
the case. In fact, many computers still in common use cannot display millions of colors.
Back in the 1990s, palette restrictions were even more ferocious, with many computers
limited to a paltry 256 colors (8-bit). Microsoft and Apple couldn’t agree on which colors
to use, hence the creation of the web-safe palette, which comprises just 216 colors that
are supposed to work accurately on both platforms without dithering. (For more information
about dithering, see the “GIF” section later in this chapter.) Applications such as
Photoshop have built-in web-safe palettes, and variations on the palette can be seen at
www.visibone.com.
Colors in the web-safe palette are made up of combinations of RGB in 20% increments,
and as you might expect, the palette is limited. Also discouraging, in the article “Death of
the Websafe Color Palette?” on Webmonkey (www.webmonkey.com/00/37/index2a.html;
posted September 6, 2000), David Lehn and Hadley Stern reported that all but 22 of these
colors were incorrectly shifted in some way when tested on a variety of platforms and
color displays—in other words, only 22 of the web-safe colors are actually totally
web-safe.
While the rise of PDAs means that the web-safe palette may make a comeback in specialist
circles (although PDAs and even cell phones are increasingly powerful when it comes to
graphics), most designers these days ignore it. The majority of people using the Web have
displays capable of millions of colors, and almost everyone else can view at least
When a hex value is made up of three pairs, the values can be abbreviated. For example,
the value #ffaa77 can be written #fa7. Some designers swear by this abbreviated
form. I tend to use the full six-figure hex value because it keeps things consistent.