Beginning HTML with CSS and XHTML

Modern Guide and Reference

by David Schultz and Craig Cook

With a foreword by Simon Collison

Technical review by Gez Lemon

Specifying Colors in CSS

Color televisions and computer screens create color by projecting different intensities of red, green, and blue light. These are the primary colors of light that are visible to the human eye, and various combinations of those same three colors produce every color you can see.

There are two ways to specify a color in CSS: either by designating a mixture of red, green, and blue values (in that order), or by selecting from a limited number of predetermined color names such as “orange” or “purple.” The palette of named colors is fairly limited, and not all browsers recognize the full range of color names. For more complex colors, you’ll need to specify them as a mixture of red, green, and blue (RGB).

With that said, there are three different ways to designate RGB color values in CSS.

  1. The intensity of each of the three primary colors can be represented by a number ranging from 0 (no color) to 255 (full intensity). The rgb keyword indicates that this value is a color, and the actual color values are contained in parentheses: 
    selector {
  color: rgb(109,18,18); /* dark red */
  background-color: rgb(255,250,210); /* pale yellow */
}
  2. Similarly, you can specify a color as a set of three percentages from 0% to 100%, also using the rgb keyword and the values in parentheses: 
    selector {
  color: rgb(43%,7%,7%); /* dark red */
  background-color: rgb(100%,98%,82%); /* pale yellow */
}
  3. The most common and reliable method to express a color value in CSS is as a six-digit hexadecimal (hex, for short) number, with each pair of digits representing a value of red, green, or blue. Hex color values are preceded by an octothorpe (#): 
    selector {
  color: #6d1212; /* dark red */
  background-color: #fffad2; /* pale yellow */
}

Hexadecimal Notation

Hexadecimal notation is simply a way of counting up to 16 in the space of one character, with letters representing numbers higher than 9. You can count from 0–9 normally, then use the letters A, B, C, D, E, and F to represent 10–16. Counting to 16 comes up a lot when dealing with computers because all digital data is based on multiples of 8; 1 byte comprises 8 bits.

With hexadecimal notation, it’s possible to specify up to 16 values of a single color with one number or letter. Three hex digits — each representing a value of red, green, or blue — multiplies 16 by 16 by 16 to arrive at a palette of 256 possible colors. Six digits cubes the number again (256 × 256 × 256) and the palette grows to over 16.7 million unique colors, approaching the very limits of human vision. And a tiny, 6-digit number can represent any one of them.

As an example, the hex number 000000 represents black because it has no color value at all; it’s nothing but zeros. At the other end of the spectrum (literally), the number FFFFFF represents white; each color is turned up to full blast, saturating the pixels and thus your eyes. As you learned in science class, pure white light is made up of all three primary colors.

Specifying different intensities of the primary colors results in a mixed color. For example, FF0000 represents the reddest red possible, since that color is projected at full intensity and isn’t muddied by any blue or green wavelengths. For a more complex color, the hex number 2C498F is a rather soothing, medium blue color made up of 17% red, 29% green, and 56% blue. It looks something like this: A swatch showing the color 2C498F.

But don’t be afraid: you’ll never have to memorize the hexadecimal encoded values of all 16,777,216 unique colors. There are abundant free utilities and online color-pickers that allow you to visually mix or choose a color and find its hex value to use in your CSS. Any image editing software (such as Photoshop) will also provide hex values in their built-in color-pickers.

When a hexadecimal color value comprises three matched pairs of digits, you can abbreviate the value to only three digits in CSS. For example, #000000 becomes #000 and #ff88aa becomes #f8a. The letters in a hex number can be either upper- or lowercase in CSS; it’s entirely a matter of personal preference.

Further Reading

Order from Amazon

Apress