If you’ve ever mixed colors in anything from finger
paints to a watercolor set, you have a sense of what happens when you
mix colors. For computer screens, red, green and blue lights are mixed
to generate different colors. For example, if you mix equal amounts of
red and green, you get yellow.
To mix colors for Web pages, different values are
mixed using integers, percentages, and hexadecimal numbers. CSS3 also
has a limited number of named colors available that can help while
figuring out the other color-mixing methods. HTML5 and CSS3 have some
very sophisticated elements such as canvas that can do more with color
and drawings than has been possible in previous versions of HTML.
Using names
One of the stranger experiences in working with
HTML5 and CSS3 is the name set used with colors. At the root are the 16
standard colors shown in Table 1.
|
Table 1 Standard Color Names
|
|
Aqua
|
Black
|
Blue
|
Fuchsia
|
|
Gray
|
Green
|
Lime
|
Maroon
|
|
Navy
|
Olive
|
Purple
|
Red
|
|
Silver
|
Teal
|
White
|
Yellow
|
Using the HTML5 that you’ve learned so far, you can
easily create a chart showing all the colors. Figure 1 shows what they look like on a Web page on a
mobile device.
Figure 1: The standard CSS3 colors in a Web page.
From this root base, you can include another 131
names that seem to have no rhyme or reason in terms of why they were
selected. They’re all part of a set created back in the 1980s called
X11. They were adopted in the early browsers and have been with us ever
since.
The reason that all the names haven’t been listed
here is because designers and developers generally don’t use them. For
designers, not only do the 131 names severely limit their palette, but
the ones selected are nuts! Colors like papayawhip and mistyrose are
hardly standard names for artists. Likewise, for developers, the values
used don’t conform to any mathematical set such as the old Web-safe
colors that follow a logical numeric standard. (Of course, if you want
to have some fun, go ahead and include darkkhaki and ghostwhite in your
Web page’s color palette.) In the next sections, you’ll see how to
create the exact color you want from over a million possible
combinations.
RGB and HSL percentages
In mixing paint colors, the amount of paint is
sometimes listed in percentages. A certain percent of red, green, and
blue will give different colors. In setting colors in CSS3, you can use
percentages in two different ways. First, you can assign a color value
using the following format:
rgb(r%,g%,b%);
The first value is the percent red; the second, green; and the third, blue. For example, the setting, rgb(43.9%,50.2%,56.5%)
generates the color that the Los Angeles Dodgers use. The three
percentage values add up to more than 100 percent, so you know that the
percentage is a percent of the color itself and not the total. As you
can see, you can be very precise for values, including fractions of
percentages. The following script shows how to use this color assignment in an HTML5 page:
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
background-color:rgb(43.9%,50.2%,56.5%);
}
h1 {
background-color:rgb(11.8%,56.5%,100%);
color:rgb(100%,100%,100%);
font-family:”Arial Black”, Gadget, sans-serif;
font-style:italic;
text-align:center;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Dodger Blue</title>
</head>
<body>
<h1>Los Angeles Dodgers<br>
(Formerly of Brooklyn)</h1>
</body>
</html>
When you launch the page, the colors come out precisely as you instructed, as shown in Figure 2.
Figure 2: Setting colors with RGB percentages.
A second way to assign colors using percentages is
to use a hue-saturation-light (HSL) model. The big advantage of HSL is
that lightness is symmetrical. That makes it easier to tweak a color to
what you’d like it to be.
By thinking of a color circle arranged around 360
degrees like a compass, you select a hue. At the top, or 0 percent, you
find the reds. Moving clockwise, at 30 percent the hues turn
red-yellow. At 60 percent, they’re yellow. And so on around the color
spectrum until you’re at 360 percent (0 percent) where you’re back to
the red hues. For designers who understand the color spectrum, this
makes choosing colors much easier. To create a lighter color, increase
the light value; decrease the light value to make the color darker. For
example, suppose you’re trying to get just the right shade of red. You
start with the following color assignment:
hsl(0,100%,50%);
Notice that the first value is not a percentage. That’s because it has values between 0 and 359 — the 360 degrees of a circle. (Remember:
0 and 360 are the same point on the circle.) By raising and lowering
the light (the third parameter), you can make your color lighter or
darker — which is far more intuitive than changing RGB percentages. The
following HTML5/CSS3 script shows how easy it is to lower and raise the light value to get just the right shade of red.
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
.redBase {
color:hsl(0, 100%, 50%);
}
.redDarker {
color:hsl(0, 100%, 25%);
}
.redLighter {
color:hsl(0, 100%, 75%);
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>HSL Color Assignment</title>
</head>
<body>
<h1 class=”redBase”>Red Base</h1>
<h1 class=”redDarker”>Red Darker</h1>
<h1 class=”redLighter”>Red Lighter</h1>
</body>
</html>
When first using HSL, it helps to think of adding
light by going higher to the sun or making it darker by going lower
into a well. The tweaking process is easier for designers to get just
what they want. Figure 3 shows what the different red tints look like.
Figure 3: HSL makes tweaking tints easy.
Hue and light are fairly intuitive to
understand, but saturation can be a little murky. Essentially,
saturation is the amount of colorfulness in a given color. A 100
percent saturation is the full colorfulness of a hue in a given light,
while a lower percent subtracts from a hue — something like a color
fading. For all colors, a midpoint light is going to be gray when
saturation is 0 percent. Sometimes a faded or muted color is preferred,
like blue jeans that have been washed many times.
