There are four methods of producing color in CSS: keyword, hexadecimal, rgb and hsl. The first two were introduced with CSS1, and are available to every graphical web browser, the last is CSS3. 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 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:

body {
	background-color: white;
}

CSS Level 3 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: one example.

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

Hexadecimal

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.

A sampler of hexadecimal colors

“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:

p {
	color: #000;
}

The hexadecimal values do not have to be the same for each pair: #3fa027 is a perfectly valid hex color. It is important to understand that hexadecimal 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 hexadecimal 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:

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

Or as percentages:

h3 {
	color: rgb(50%, 6%, 100%);
}

hsl

hsl color wheelhsl represents the hue, saturation, and luminosity of color, allows developers and designers to modify a color quicker and more predictably.

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:

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

If you choose to use hsl, be aware that it is not the same as PhotoShop's HSB system. This is confusing, as most of the codes shown in the PhotoShop color picker, including RGB and hex, are directly transferable to a CSS stylesheet… but HSB is not.

10-bit color

It should be noted that both rgb and hsl can be defined using floating-point values:

#genera {
    background-color: rgb(0.1%, 12.5%, 22%);
}

This provides a far greater gamut (or range) of color values: thousands of levels of each component, for a billion possible color combinations.

Unfortunately, the vast majority of screens don’t yet display this breadth of color, and most browsers will therefore round floating-point color values to the nearest whole number.