Values, Units, and Colors - Values, Units, and Colors - page 19

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: