According to the W3C, a CSS color is either a keyword or a numerical specification. That definition seems simple. Colors are either keywords or numbers, but it's a bit more complicated than that.
Color Keywords
Color keywords are exactly what you might think they are - a list of words (in English) that correspond to colors on web pages. There are 16 HTML 4 color keywords:
- aqua
- black
- blue
- fuchsia
- gray
- green
- lime
- maroon
- navy
- olive
- purple
- red
- silver
- teal
- white
- yellow
To make things interesting, the W3C reports that “orange” is also a color keyword in the CSS 2 specification. Perhaps it will get added back into CSS 3 before it's finalized.
But it gets more complicated than that, as there's another list of color keywords that you can use. These colors are often called the Netscape Named Colors because the Netscape browser was the first web browser to define the color keywords and support them. The W3C calls this list the "SVG Color Keywords". But whatever you call it, you need to be careful when you use these keywords. For example, spelling is important—gray is not the same as grey.
Colors as Numbers
Okay, so color keywords aren't as simple as they appear, but what about numbers—that should be fairly simple, right? Wrong. The CSS 2 specification provides for two ways of specifying colors as numbers:
- RGB
- Hexadecimal RGB
RGB Color Numbers
The format of an RGB color number is:
rgb(red,green,blue);
The red,green,blue are numerical values from 0 to 255 or percentage values from 0% to 100%. So, the color red is written:
rgb(255,0,0)
rgb(100%,0%,0%)
Hexadecimal Color Numbers
Hexadecimal color numbers are also RGB—they are just written differently to allow for differences in how browsers handle the CSS.
Hexadecimal colors are the same RGB color numbers converted to base-16 and written as one long number. Hexadecimal to RGB color charts make this easy to see. They are written:
#RRGGBB
Each pair of the hexadecimal triplet is a number from 00 to FF (base-16), which corresponds to 0–255 in decimal. So the color red is written:
#ff0000
CSS 3 Color Numbers
CSS 3 adds additional complexity to the color numbers. In the CSS 3 recommendation, there is:
- the transparent keyword
- RGBA color values
- HSL color values
The transparent keyword is not exactly new to CSS 3. CSS 1 allowed background-colors to be marked transparent. Then CSS 2 extended it to the border-color property. CSS 3 extends this keyword to use in any property that uses color values including the color property for changing text and foreground colors.
RGBA color values allows you to define the opacity of the color. It is written:
rgba(red,green,blue,opacity)
The final number is an alphavalue ranging from 0.0 to 1.0. A color with an alphavalue of 0.0 is fully transparent and an alphavalue of 1.0 is fully opaque. According to the specification, if the user-agent doesn't support RGBA, it should default to RGB and ignore the alphavalue information. However, in practice, this doesn't happen and the color value is completely ignored.
HSL color values refer to hue-saturation-lightness numerical codes for colors. They were added to solve some specific problems with RGB colors:
- RGB is hardware-oriented. It references CRTs and assumes that color model for displaying the colors. Most professional printers are not RGB based, but CMYK and the translation from screen to print is not always good.
- RGB is non-intuitive. In other words, most people think of colors in reference to the hue (red versus yellow), saturation (grey versus red), or lightness (dark red to red to pink) but RGB forces you to put the colors in a machine-generated way.
Red in HSL would be written:
hsl(0,100%,50%);
HSL also has an alpha value notation—HSLA—which allows you to specify opacity with this color notation just like RGBA.
HSL is not widely supported, so be sure to test this notation before you use it.
