Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 149

The RGB and RGB(a) Notations
The saturation of each color channel in the RGB model can also be declared by either decimal numbers or
percentages (Listing 5-3).

Listing 5-3. Simple RGB Notation
p {
color: rgb(0, 255, 0) /* equivalent to rgb(0, 100%, 0), #00ff00 and #0f0 */
}

The previous notation is supported by CSS 2.1 but has been extended in CSS3 with the transparency (alpha
channel) of the color. This notation is known as RGB(a). For example, the pure green with 75 percent transparency
(which corresponds to 25 percent opacity) can be declared as shown in Listing 5-4. Note that the alpha is always a
percentage (a value from 0 to 1) rather than running from 0-255 as the colors do.

Listing 5-4. An RGB(a) Notation in CSS3

p {
color: rgb(0, 255, 0, 0.25 );
}

The HSL(a) Notation
In CSS, colors can also be denoted by the HSL(a) notation, where the colors are represented by their hue, saturation,
and lightness. The first value can be a number from 0 to 360, while the second and third values can be declared as a
percentage. The alpha channel works the same way as in RGB(a) (Listing 5-5).

Listing 5-5. A Transparent Color in HSL(a) Notation

#warning {
background-color: hsl(240, 78%, 50%, 0.25);
}

■ If you want to use a color seen on a photograph or on a web site, you can obtain the code in many ways. First,
you can check the style sheet of the page or site for the color code. If this is not convenient, there are other techniques to
get the color code. If there are no advanced image-processing applications installed on your computer, you should simply
create a screenshot using the print Screen button and copy and paste it to a basic image manipulation application, such
as Microsoft paint. Select the Color picker tool, and click the color of your choice. Choose the edit Colors option from the
Color menu, and click Define custom colors. 3 you get the hue, lightness, and saturation of the color, along with the red,
green, and blue components. Since they are provided in decimal, they need to be converted into hexadecimal with an
application such as the Windows Calculator (in Scientific Mode). If you have a more advanced image manipulator than
paint, such as adobe photoshop, you can use the Color picker tool on the pasted image to get the color code in different
color spaces and notations, including decimal and hexadecimal.

Tip

3 The version of Paint in Windows 7 has a ribbon interface instead of the conventional menu found in earlier versions.