About Color Values
Color values can be specified using several ways.
There are 17 basic keyword color names that are specified in CSS3. Modern browsers support many additional color names - everything from papayawhip to darkorchid
<div style="color: red;">color: red;</div>
Hexadecimal Color Values
Hexadecimal color values take the format #rrggbb, where rr is the amount of red in the color, gg is the amount of green in the color, and bb is the amount of blue in the color.
<div style="color: #ff0000;">color: #ff0000;</div>
Short Hexadecimal Color Values
Hexadecimal color values can be abbreviated when a color is represented by three pairs of hexadecimal characters. For example, with #ff6600, you can remove one character from each pair. The shorthand color values take the format #rgb, where r is the amount of red, g is the amount of green in the color, and b is the amount of blue. For example, #f60 is the same as #ff6600.
Functional notation takes the format rgb(n,n,n), where n is a number between 0 and 255 or percentage between 0% and 100% for the red, green, and blue intensities of the color, respectively.
<div style="color: rgb(255,0,0);">color: rgb(255,0,0);</div>
<div style="color: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div>
CSS3 offers the use of RGBA-format color names, with the additional (the "a") parameter specifying the opacity (the "alpha" channel) of the color as a decimal between 0.0 (completely transparent) and 1.0 (completely opaque). Thus, the code
<div style="background-color: rgba(255,0,0,0.5)">
would style the div with a red background with 50% transparency.
Also new in CSS3 is the HSL specification. Supported in modern browsers (Internet Explorer from version 9), we use HSL to specify hue (a degree on the color wheel, with 0=red, 120=green, and 240=blue), saturation (a percentage, with 0% a shade of gray and 100% the full color), and lightness (a percentage, with 0% as black and 100% as white). The following code displays a div with red background:
<div style="background-color: hsl(0,100%, 50%)"></div>
Our recommendation is to use three-character hexadecimal notation (i.e., #rgb) when you can get the color you want and to use the six-digit hexadecimal notation (i.e., #rrggbb) when you need to define the color more granularly.