Chapter 3
body {
color: rgb(109,18,18); /* dark red */
background-color: rgb(255,250,210); /* pale yellow */
}
The order is always red, green, blue; easy to remember because the keyword “rgb” is right there to remind
you. You can also specify an RGB color as a set of three percentages from 0% to 100%, also using the
rgb keyword with the values in parentheses, separated by commas:
body {
color: rgb(43%,7%,7%); /* dark red */
background-color: rgb(100%,98%,82%); /* pale yellow */
}
Hexadecimal Notation
Perhaps the most common method to express a color value in CSS is as a six-digit hexadecimal number—
hex, for short—where each pair of digits represents a value of red, green, or blue (in that order). Hex color
values are preceded by an octothorpe (#):
body {
color: #6d1212; /* dark red */
background-color: #fffad2; /* pale yellow */
}
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–15 (with 0, this brings it to 16 bits). Counting to 16 comes up a lot when you deal
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 digit (a
numeral 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. Using six hex digits cubes the number again (256 × 256
× 256) and the palette grows to over 16.7 million unique colors, approaching the 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 scale (literally), the hex number #FFFFFF represents white; each color is
turned up to full blast, saturating the pixels as well as your eyes. As you probably 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 because 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 nice, medium-
dark, greenish-blue color made up of 17% red, 29% green, and 56% blue.
When a hexadecimal color value consists of three matched pairs of digits, you can abbreviate the value to
only three digits in CSS. Thus #000000 becomes #000 and #ff88aa becomes #f8a. The letters in a hex
number can be either upper- or lowercase in CSS; that’s entirely a matter of personal preference.