How to Use Color Values in CSS3

CSS3 supports a number of color value systems. The only requirement is that the browser also supports the color system. Here are the color systems that most browsers support:

Red Green Blue (RGB): Use the rgb() method when describing this color value that uses three numbers between 0 and 255 to specify the amount of red, green, and blue to use.

Red Green Blue Alpha channel (RGBA): Use the rgba() method when describing this color value. The first three numbers are simply red, green, and blue. The fourth number, alpha channel (relative transparency), is a value between 0.0 (fully transparent) and 1.0 (fully opaque). You must have IE9+, Firefox 3+, Chrome, Safari, or Opera 10+ to use this color value scheme.

Hue Saturation Lightness (HSL): Use the hsl() method when describing this color value that consists of three numbers.

Hue is a value between 0 and 360 that describes the position of a color on the color wheel: red is 0 (or 360), green is 120, and blue is 240. Saturation (the color intensity or darkness) is a percentage value between 0 (gray scale) and 100 (full color). Lightness is a percentage between 0 (black) and 100 (white).

Hue Saturation Lightness Alpha channel (HSLA): Use the hsla() method when describing this color value that uses the same first three numbers as an HSL value. The fourth number, alpha channel, is a value between 0.0 (fully transparent) and 1.0 (fully opaque). You must have IE9+, Firefox 3+, Chrome, Safari, or Opera 10+ to use this color value scheme.

Trying to understand how color values interact can be hard. The HTML Color Mixer helps you see how various color choices interact, making it easier to choose good color combinations.