WORKING WITH COLOR VALUES - HTML5 - page 66

RGB DECIMAL INTEGER SETTINGS
A second way of mixing your colors using the rgb() value assignment is to insert values from
0 to 255 (a total of 256 values because you count the 0), instead of the percentages used in the
earlier example. h e value 256 represents the number of possible combinations on two 8-bit
bytes. In other words, it's based on how a computer stores and processes information. With a
set of three values from 0 to 255, you can generate 16,777,216 combinations. However, color
technology is far more complex than we can possibly discuss here, and modern color process-
ing keeps generating better color processors. Sui ce it to say, you can generate lots of colors
with those combinations of red, green, and blue. Here's the format to assign a color value:

rgb ( integerR , integerG , integerB );

For example, yellow, which mixes red and green would be

rgb ( 255 , 255 , 0 );

It's not as intuitive as HSL, but at er a while, you start getting a sense of mixes based on 256
values rather than percentages. h e following example ( DecColor.html in this chapter's
folder at www.wiley.com/go/smashinghtml5 ) shows a simple implementation.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
body {
/* Red background */
background - color : rgb ( 255 , 0 , 0 );
}
h1 {
/* Big Yellow Text */
color : rgb ( 255 , 255 , 0 );
font - family : ”Arial Black” , Gadget , sans - serif ;
}
h2 {
/*Blue Text + Gray Background */
color : rgb ( 0 , 0 , 255 );
background - color : rgb ( 150 , 150 , 150 );
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Decimal Colors </ title >
</ head >
< body >
< h1 >& nbsp ; Big Yellow Header </ h1 >
< h2 >& nbsp ; Blue header with a gray background </ h2 >
</ body >
</ html >

70