CSS Named Colors

CSS includes a set of named colors, so that common colors can be written and read more easily.

When using any CSS property that accepts a color value, you have the option of providing a named color. Named colors are an easy to remember set of color names that can be used as an alternative to other methods such as hex, RGB, and HSL.

Using a named color is just a matter of adding the color name to the color property in question.

Here's an example where we apply color names to three different properties:

Case-Insensitive

Named colors are case-insensitive. Therefore, the following are all valid color names, and will result in the same RGB color:

Web Page Example

Here's an example of using named colors in a basic HTML document.

View Output

Matching Named Colors with RGB

There are 147 named colors in CSS Colors Module Level 4, which is in draft status at the time of writing. The list is based on the X11 colors, which were also defined in SGL 1.0.

All color names have a corresponding RGB/hex value, but not all RGB/hex values have a corresponding color name. After all, RGB/hex provides over 16 million possible colors — slightly more than 147!

Mind you, CSS hasn't always had that many named colors. CSS started with the 16 basic color names from HTML, and then later added orange. So here are the 17 basic color names to make it in to CSS 2.1:

Here's a full list of the CSS color names defined in CSS Color Module Level 4.

Other Color Keywords

In addition to the above named colors, you can use the transparent keyword to set a transparent color, and the currentColor keyword to use the current value of the color property.