An Explanation of CSS Color Codes

CSS Color Codes are actually hexadecimal values of a specific color. If you've worked in Photoshop's color picker, or with Adobe Kuler, you have seen the codes I'm talking about.

RGB and Hexadecimal

The alternative to hexadecimal color codes are RGB color codes. RGB stands for Red Green Blue. So if you want to specify a specific color, you'll set each color value separately, for example R = 255, G = 0, and B = 0. Bear in mind that the minimum value is 0, and maximum value is 255, so in this example we have specified red color.

Hexadecimal color values also function this way, so if you want to specify a color, you will combine RGB values converted into hexadecimal numbers like this: Red: 255 = FF, Green: 0 = 00, Blue: 0 = 00, and the result is #FF0000.

Converting RGB to hexadecimal

RGB values are usually given in the 0 - 255 range; if they are in the 0 - 1 range, the values are multiplied by 255 before they are converted. This number divided by 16 gives us the first hexadecimal digit (between 0 and F, where the letters A to F represent the numbers 10 to 15). The remainder gives us the second hexadecimal digit. For instance the RGB value 201 divides into 12 groups of 16, thus the first digit is C. A remainder of 9 gives us the hexadecimal number C9. This process is repeated for each of the three color values. There are also many web applications available that carry out this task for you.

There are three ways to make all these Color Codes work for you. The first is combining the hexadecimal color values from above with a CSS element and listing it as a property. The second uses the RGB method, and the third simply states a CSS color name.

body {
 color:#FF0000;
}
body {
 color:rgb(255,0,0);
}
body {
 color:red;
}

The last example for setting the color by HTML color name has some limitations though: There are only 16 color names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Using Shorthand

Just as every other CSS element property, you can abbreviate or use shorthand for the hexadecimal CSS Color Codes. Hexadecimal code can be shortened if the pairs have same values. For instance, if you want to specify a red color, you'd write #FF0000. To make it shorter you can safely write #F00, as you abbreviated code like this: FF = F, 00 = 0, 00 = 0 and the result is #F00.

I hope this clears up any confusion about color codes. As always, if you have a suggestion or would like to point out anything I've missed, please do so in the comments.