The Document - HTML5 with CSS3 - page 66

But don't be afraid: you'll never have to memorize the hexadecimal encoded values of all 16,777,216
unique colors. There are abundant free utilities and online color-pickers (such as colorpicker.com ) that
allow you to visually mix or choose a color and find its RGB or hex value to use in your CSS. Any image
editing software you might use to create graphics for the Web (such as Adobe Photoshop) will also provide
both RGB and hex values in its built-in color-picker.
RGBA
RGBA color notation was introduced in CSS3 and is already widely supported in modern browsers. It's just
like RGB, but adds a fourth value for an alpha channel , setting the color's opacity as a decimal between 0
(completely transparent) and 1 (completely opaque). For example, the following rule would fill an element
belonging to the “hero” class with a light blue color at 0.75 opacity (the 0 is optional), allowing whatever
color or content is behind the element to partially show through:
.hero { background-color: rgba(111,171,221,0.75); }
As with RGB, you can declare the color with either numeric values or percentages, but the alpha value
must always be a decimal. You can simply translate the decimal to a percentage in your head, if it helps
you to think of it that way—0.75 is 75% opaque:
.hero { background-color: rgba(44%,67%,87%,0.75); }
Older browsers don't support RGBA so you should use it carefully, with some consideration about how
those browsers will render your page. If you declare a color in RGBA, a non-supporting browser will ignore
the declaration entirely and render the element with no color at all, either defaulting to transparent (for
backgrounds) or carrying over an inherited foreground color. You can accommodate old browsers by
declaring colors twice; once with an opaque color using RGB or hex for older browsers, then again with
RGBA for newer browsers:
.hero {
background-color: #6fabdd ;
background-color: rgba(111,171,221,0.75);
}
A browser that understands RGBA will take the second background-color declaration in place of the first
because it comes later in the cascade. A browser that only understands the hexadecimal value will ignore
the second declaration.
You can create some very cool and sophisticated effects with translucent RGBA colors, especially if you
layer them over other elements or textures. The annual web design advent calendar, 24 Ways to Impress
Your Friends ( 24ways.org ), makes striking use of RGBA in its design, as you can see in Figure 3-3. (It
really looks much better in a browser; you should see it for yourself. Read it for the articles, too.)