HTML and CSS Reference

In-Depth Information

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 hue

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

verting 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.

RGBa colors

As of CSS3, the two functional RGB notations were extended into a functional RGBa

notation. This notation simply adds an alpha value to the end of the RGB triplets; thus,

“red-green-blue-alpha” becomes RGBa. The alpha stands for
alpha channel
, which is

a measure of opacity.

For example, suppose you wanted an element's text to be half-opaque white. That way,

any background color behind the text would “shine through,” mixing with the half-

transparent white. You would write one of the following two values: