There are four methods of producing color in CSS: keyword, hexidecimal, rgb and hsl. The first two were introduced with CSS Level 1, and are available to every graphical web browser, the last was added in CSS Level 3. rgb and hsl both have an “alpha” derivative that determines opacity (rgba and hsla, respectively.)

Keywords

Color keywords have long been supported by web browsers. 16 of them of them were officially adopted by the W3C as a standard: black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow. For example:

1. body { background-color: white; }

CSS3 expanded this list to create keyword references for 140 “web standard” colors, many of which are somewhat arcane: salmon, aliceblue, and smoke, for example. There are many sources for these color keywords: here is one example.

As a general rule, if given the choice between using color keywords and hexadecimal, choose hex.

Hexidecimal

While color keywords are limited to 140 named colors, the hexadecimal (or “hex”) method is not. Unlike our familiar base-10 system, which uses the integers from 0 to 9, the hexadecimal system has 16 digits: 0 to 9, followed by a to f.

When used to define colors, there are three sets of hexadecimal numbers, representing the red, green, and blue components. Each set consists of two hexadecimal numbers (16 × 16 = 256 possible levels for that color component). So a representation like #ffffff would mean that red, green and blue components were “full on”, creating white. #000000 would be “all off”, creating black, #ff0000 would be a pure red, and #777777 would be grey.

“Web safe” colors are created when the number in each color pair is the same (00, 77, ee, etc), and is therefore the most common form you will find. If that is the case, CSS gives you the option to shortcut the code, so that black becomes #000, red #f00, etc. For example:

1. p { color: #000; }

The hexidecimal values to not have to be the same for each pair: #3fa027 is a perfectly valid hex color. It is important to understand that hexidecimal allows access to the same gamut as the two other color systems discussed below; the color variety is not greater or less under rgb or hsl. There are even hexidecimal codes for every Crayola color.

rgb

While longer-winded and no more or less accurate than hex, the rgb method is easier to manipulate directly via scripts.

rgb values can be specified as values between 0 and 255:

1. h3 { color: rgb(100, 18, 255); }

Or as percentages:

1. h3 { color: rgb(50%, 30%, 100%); }

CSS3 introduces an rgba derivation of this method, in which the a component represents alpha, or opacity, as a floating point number between 0 (fully transparent) and 1 (fully opaque). For example, to produce a div with an id of content and a background-color of red that is half-way transparent:

1. div#content { background-color: rgba(255,0,0, 0.5); }

hsl

Finally, CSS3 also adds the hsl method, representing hue, saturation, and luminosity. In theory, this allows developers to modify a color to “deeper” or “lighter” quickly and easily in response to client demands.

Rather than a series of “sliders”, hsl is based on a color wheel, moving from red through yellow, green, blue and violet and then back to red. Hue is therefore given as degrees around this circle, with the starting and ending point, red, being both 0 and 360 degrees. Saturation and luminosity are given as percentages:

1. div#content { background-color: hsl(10,100%,10%); }

There is also hsla, which uses the same floating-point method for opacity that rgba does.