Foundation HTML5 with CSS3

The Document

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