Delphinidin

CSS has a number of options for specifying colors, ranging from a 216-color, Web-safe palette to the full range of colors available in the RGB format, a total of 16,777,216 colors! More specifically, those options are as follows:

+ Color keywords: These enable you to specify a color by its name. There are only a small number of keywords available compared to the millions that you can use with other color value types.
+ Hexadecimal: This enables you to specify a color by a special hexadecimal number.
+ Shorthand hexadecimal: This is a shortened representation of hexadecimal numbers; it is limited to a special 216-color, Web-safe palette.
+ RGB values: These enable you to specify a color via a Red, Green, Blue representation, which provides access to millions of colors.
+ RGB percentage: This option is the same as RGB but uses percentages.
+ RGBA (RGB with alpha channel): The RGB palette is used with the addition of an alpha channel to specify transparency.

Each method is a means of accomplishing the same thing: specifying a color. You can use these methods to specify text color, border color, or background color. Read more explanation below.

- Color Keywords
The first method for specifying color, mentioned previously, is to use a color keyword. This is the most intuitive method because all you need to do is reference the name of the color itself. Here are some examples:

div {color: black; background-color: red; border: thin solid orange;}

This rule applies to any <div> element contained in the document. I have specified that each <div> element should have black text, a red background, and a thin, solid orange border around the element. In this example, black, red, and orange are color keywords, so a color keyword is simply the name of the color.

- Hexadecimal Colors
Hexadecimal refers to a numbering scheme that uses 16 characters as its base, expressed in a combination of letters and numbers. A hexadecimal system uses 0-9 for the first 10 digits and A-F to represent the remaining 6 digits. Letter A corresponds to the decimal number 10, B to 11, C to 12, and so on up to 15, which is represented by F. Therefore 10 in hex is equivalent to 16 in decimal, and FFF in hex is the equivalent of 255 in decimal.

Hexadecimal values are another way of expressing an RGB value. For instance, #FFFFFF refers to white, which is expressed in RGB as 255, 255, 255. In CSS, hexadecimal colors are included just as RGB or color keywords are, as shown in the following example.

div {color: #000000; background-color: #FF0000; border: thin solid #FFA500;}

#000000 is the hexadecimal representation of black; the same as RGB 0, 0, 0 or simply the black color keyword. #FF0000 is a hexadecimal representation of red, or RGB 255, 0, 0, or the red color keyword. Finally, #FFA500 is a hexadecimal representation of orange, or RGB 255, 165, 0, or the orange color keyword.

- Short Hexadecimal
When a hexadecimal value is made up of 3 pairs of duplicated values you can use a shorthand notation of the value which uses only a single value for each pair. For example, the hexadecimal value for white is #FFFFFF. This is 3 pairs of FF and can therefore be shortened to #FFF.

div {background-color: #FAB;}

In this example, #FAB is equivalent to #FFAABB which fans of the 1960s British TV series Thunderbirds in particular may be interested to know is a rather vivid shade of pink!

- RGB Colors
RGB stands for Red, Green, and Blue. These are the primary colors used to display the color of pixels on a computer monitor. When you use these three colors in various combinations, it is possible to create every color of the rainbow. Many computer monitors are capable of displaying millions of colors: 16,777,216 colors, in fact. CSS RGB color is specified using a special threenumber syntax, with each one representing a color channel. This first number is red, the second green, and the third blue:

body {background-color: rgb(128, 128, 128);}

This produces the same color as the CSS color keyword gray. Equal amounts of all three channels form a variation of gray, where 0, 0, 0 is black and 255, 255, 255 is white. RGB values may also be represented using percentages:

body {background-color: rgb(50%, 50%, 50%);}

This also produces the same color as the CSS color keyword gray.