CSS: The Definitive Guide, 3rd Edition (12 page)

Figure 4-1. Naming colors

There are two color value types that use
functional RGB notation
as opposed to
hexadecimal notation. The generic syntax for this type of color value is
rgb(color)
, where
color
is expressed using a triplet of either percentages or integers.
The percentage values can be in the range
0%
–
100%
, and the integers can be
in the range
0
–
255
.

Thus, to specify white and black, respectively, using
percentage notation, the values would
be:

rgb(100%,100%,100%)
rgb(0%,0%,0%)

Using
the integer-triplet notation, the same colors would be represented
as:

rgb(255,255,255)
rgb(0,0,0)

Assume
you want your
h1
elements to be a shade of red
that lies between the values for red and maroon.
red
is equivalent to
rgb(100%,0%,0%)
, whereas
maroon
is
equal to
(50%,0%,0%)
. To get a color between
those two, you might try
this:

h1 {color: rgb(75%,0%,0%);}

This
makes the red component of the color lighter than
maroon
, but darker than
red
. If, on
the other hand, you want to create a pale red color, you would raise the green and
blue
levels:

h1 {color: rgb(75%,50%,50%);}

The
closest equivalent color using integer-triplet notation
is:

h1 {color: rgb(191,127,127);}

The
easiest way to visualize how these values correspond to color is to create a table
of gray values. Besides, grayscale printing is all we can afford for this book, so
that's what we'll do in
Figure
4-2
:

p.one {color: rgb(0%,0%,0%);}
p.two {color: rgb(20%,20%,20%);}
p.three {color: rgb(40%,40%,40%);}
p.four {color: rgb(60%,60%,60%);}
p.five {color: rgb(80%,80%,80%);}
p.six {color: rgb(0,0,0);}
p.seven {color: rgb(51,51,51);}
p.eight {color: rgb(102,102,102);}
p.nine {color: rgb(153,153,153);}
p.ten {color: rgb(204,204,204);}

Figure 4-2. Text set in shades of gray

Of course, since we're dealing in shades of gray, all three RGB values
are the same in each statement. If any one of them were different from the others,
then a color would start to emerge. If, for example,
rgb(50%,50%,50%)
were modified to be
rgb(50%,50%,60%)
, the result would be a medium-dark color with just
a hint of blue.

It is possible to use fractional numbers in percentage
notation. You might, for some reason, want to specify that a color be exactly 25.5
percent red, 40 percent green, and 98.6 percent
blue:

h2 {color: rgb(25.5%,40%,98.6%);}

A
user agent that ignores the decimal points (and some do) should round the value to
the nearest integer, resulting in a declared value of
rgb(26%,40%,99%)
. In integer triplets, of course, you are limited to
integers.

Values that fall outside the allowed range for each notation
are "clipped" to the nearest range edge, meaning that a value that is greater than
100%
or less than
0%
will default to those allowed extremes. Thus, the following
declarations would be treated as if they were the values indicated in the
comments:

P.one {color: rgb(300%,4200%,110%);}   /*  100%,100%,100%  */
P.two {color: rgb(0%,-40%,-5000%);}   /*  0%,0%,0%  */
p.three {color: rgb(42,444,-13);}    /* 42,255,0  */

Conversion
between percentages and integers may seem arbitrary, but there's no need to guess
at the integer you want—there's a simple formula for calculating them. If you know
the percentages for each of the RGB levels you want, then you need only apply them
to the number 255 to get the resulting values. Let's say you have a color of 25
percent red, 37.5 percent green, and 60 percent blue. Multiply each of these
percentages by 255, and you get 63.75, 95.625, and 153. Round these values to the
nearest integers, and
voilà
:
rgb(64,96,153)
.

Of course, if you already know the
percentage values, there isn't much point in converting them into integers.
Integer notation is more useful for people who use programs such as Photoshop,
which can display integer values in the "Info" dialog, or for those who are so
familiar with the technical details of color generation that they normally think
in values of 0–255. Then again, such people are probably more familiar with
thinking in hexadecimal notation, which is our next topic.

CSS allows you to define a color using the same
hexadecimal color notation
so familiar to HTML web authors:

h1 {color: #FF0000;}   /* set H1s to red */
h2 {color: #903BC0;}   /* set H2s to a dusky purple */
h3 {color: #000000;}   /* set H3s to black */
h4 {color: #808080;}   /* set H4s to medium gray */

Computers have been using "hex notation" for quite some time now, and
programmers are typically either trained in its use or pick it up through
experience. Their familiarity with hexadecimal notation likely led to its use in
setting colors in old-school HTML. The practice was simply carried over to CSS.

Here's how it works: by stringing together three hexadecimal numbers in the
range
00
through
FF
, you can set a color. The generic syntax for this notation is
#RRGGBB
. Note that there are no spaces,
commas, or other separators between the three numbers.

Hexadecimal notation is mathematically equivalent to the integer-pair notation
discussed in the previous section. For example,
rgb(255,255,255)
is precisely equivalent to
#FFFFFF
, and
rgb(51,102,128)
is
the same as
#336680
. Feel free to use whichever
notation you prefer—it will be rendered identically by most user agents. If you
have a calculator that converts between decimal and hexadecimal, making the jump
from one to the other should be pretty simple.

For hexadecimal numbers that are composed of three matched pairs of digits, CSS
permits a shortened notation. The generic syntax of this notation is
#RGB
:

h1 {color: #000;}   /* set H1s to black */
h2 {color: #666;}   /* set H2s to dark gray */
h3 {color: #FFF;}   /* set H3s to white */

As you can see from the markup, there are only three digits in each color
value. However, since hexadecimal numbers between
00
and
FF
need two digits each, and
you have only three total digits, how does this method work?

The answer is that the browser takes each digit and replicates it. Therefore,
#F00
is equivalent to
#FF0000
,
#6FA
would be the same as
#66FFAA
, and
#FFF
would come out
#FFFFFF
, which is the same as
white
.
Obviously, not every color can be represented in this manner. Medium gray, for
example, would be written in standard hexadecimal notation
as
#808080
. This cannot be expressed in shorthand; the closest equivalent
would be
#888
, which is the same as
#888888
.

Table 4-1
presents an overview of
some of the colors we've discussed. These color keywords might not be recognized
by browsers and, therefore, they should be defined with either RGB or hex-pair
values (just to be safe). In addition, there are some shortened hexadecimal values
that do not appear at all. In these cases, the longer (six-digit) values cannot be
shortened because they do not replicate. For example, the value
#880
expands to
#888800
, not
#808000
(otherwise
known as
olive
). Therefore, there is no
shortened version of
#808000
, and the
appropriate entry in the table is blank.