Color values in CSS

There are several different ways to use colors in CSS, on this page you'll find an overview of the different methods and their pros and cons. The color values can be used to apply, for example, a text or background color like this:

a {
    color: green;
} /* Sets the text-color of all links to green */

Color names

The easiest way to apply a color is by using its name. There are 17 main colors (aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow) and according to w3c you can use a 130 other colors too (Like 'BlanchedAlmond' and 'LightGoldenRodYellow'). The drawback of this method is that you are limited to a total of 147 colors, which is usually not sufficient. A color name can be used in the following way:

color: red;

Hex values

In most cases you want to use a hex value, which is easy to copy from things like Photoshop and gives you a total of 16.777.216 different colors (16^6). The problem is that it is quite hard to see what kind of color the hex string represents.

Hex values are built up of three parts, the red, green and blue. These parts are all two hex numbers (from 0-15 or 0-F), so #ff0000 gives us 255 of red, 0 of green and 0 of blue, resulting in the basic red color. Hex values can be used in the following way:

color: #ff0000; /* Same as 'red' */
color: #ffffff; /* Same as 'white' */
color: #fd09f3;

Short hex values

With some hexadecimal codes you can also use the short-hex value. This can only be used if all three colors have two of the same characters. If that is the case you only have to write each character once. So #ffffff is the same as #fff, #00ffdd is the same as #0fd and #df09f3 can't be shortened. The short-hex values are used in the same way as the long ones:

color: #f00; /* Same as 'red' */
color: #fff; /* Same as 'white' */

RGB colors

In some cases it's easier to use decimal numbers instead of hexadecimal ones, for example in a JavaScript function. CSS allows you to give the three colors in decimal format with some sort of function. This can be used in the following way:

color: rgb(255, 0, 0); /* Same as #ff0000 and 'red' */
color: rgb(255, 255, 255); /* Same as #ffffff and 'white' */
color: rgb(253, 9, 243); /* Same as #fd09f3 */

RGB colors with percentages

You can also use the rgb function with percentages instead of absolute values. This can be used in the following way:

color: rgb(100%, 0%, 0%); /* Same as #ff0000 and 'red' */
color: rgb(100%, 100%, 100%); /* Same as #ffffff and 'white' */

HSL colors

The new CSS3 also allows you to use hsl colors instead of rgb ones. Hsl values are built up of Hue, Saturation and Lightness, which is easier to work with for humans than rgb values. Sadly, hsl is not yet supported in all browsers.

color: rgb(360, 100%, 50%);

RGBA and HSLA

The new CSS3 also allows you to use hsla and rgba colors, which is the same as hsl and rgb, except for a fourth alpha argument, to change the opacity of the text. Hsla and rgba are not yet supported in most browsers.

That's it, thanks for reading this tutorial and any questions can be posted below.