WORKING WITH COLOR VALUES - HTML5 - page 63

names were adopted from the original X11. (See www.w3.org/TR/SVG/types.
html#ColorKeywords .)

h e 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 dif erent colors. In setting colors in CSS3, you can use
percentages in two dif erent ways. First, you can assign a color value using the following
format:

rgb ( r %, g %, b %);

h e i rst 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.
h e three percentage values add up to more than 100 percent, so you know that the percent-
age 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. h e following script ( RGBpercent.html in this
chapter's folder at www.wiley.com/go/smashinghtml5 ) shows how to use this color
assignment in an HTML5 page:

67

<! 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 >