HTML and CSS Reference

In-Depth Information

Short hexadecimal notation

There is a short form of the hexadecimal notation in which the color is specified using

only three hexadecimal digits instead of six. This notation can be converted to the

hexadecimal notation by duplicating each digit.

p { color: #f00; } /* same as #ff0000 */

The short hexadecimal notation is a useful shortcut when the full precision provided

by the longer hexadecimal notation is not needed.

RGB notation

The
rgb()
function allows a color value to be specified as three intensity values for the

color components red, green, and blue. The value can be either an integer between 0 and

255 or a percentage.

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

p { color: rgb(100%, 0%, 0%); }

The RGB notation allows the same color precision as the hexadecimal notation.

The notation used comes down to a matter of preference, but the hexadecimal notation

is often preferred because it is shorter and can easily be copied from an image editor,

for example.

RGBA notation

CSS 3 introduced the RGBA notation, adding an alpha value for specifying the color

transparency. This alpha value is a number between 0.0 (fully transparent) and 1.0

(fully opaque).

/* Red with 50% transparency */

p { color: rgba(100%, 0%, 0%, 0.5); }

RGBA color values are supported in Chrome, Firefox 3+, IE9+, Safari, and Opera 10+.

If support is not present, the rule is ignored, so a fallback color value can be set as

shown here:

p {

color: rgb(100%, 0%, 0%); /* fallback */

color: rgba(100%, 0%, 0%, 0.5);

}

A browser that does not support RGBA ignores the second declaration and continues

to apply the opaque version.