Some common colors have named aliases to make them easier to use and remember. For example, you don't need to know that
rgb(255, 0, 0) represents the color red. You can directly use the name
red to include that color in your CSS.
At the moment of writing this article, there are 148 named colors, some of which are repeated. For example,
cyan are equivalents to
All named colors are case-insensitive (including the special color keywords and system colors below), which means that it doesn't matter how the names are capitalized, they will be interpreted the same. For example,
tUrQuOiSe will all represent the same color.
The list of named colors has changed over time, and it will change in the future with new additions –the last color added to the list was
#663399)–, aliases, and removals.
Special Color Keywords
Apart from the color names, there are some other named "colors" and keywords that are worth mentioning:
There is a color that is not really a color but a complete lack of it. The keyword
transparent is used as a shortcut for
rgba(0, 0, 0, 0) (see RGB and RGBA above) and it represents a fully transparent color.
It doesn't matter much anymore as all modern browsers support the
transparent keyword, but in the past, it was something to consider as some of them (notoriously Internet Explorer and early versions of the Android Browser) did not support it.
It represents the current value of the
color property. If none is specified, it is the inherited text color from the parent container. Taking that into account, the following CSS rules are equivalent:
currentColor value is convenient when used with SVG. You can make the same SVG icon take different colors by specifying
currentColor as the fill or stroke color.
inherit is a reserved word –not limited to colors– that indicates that the property takes the same computed value as the property for the element's parent.
For inherited properties, the main use would be to override another rule (as the value is already inherited from the parent).
Finally, there are some other special color keywords. They match some system elements and are designed to keep consistency across the applications on the browser.
The system colors come in "pairs" of background-foreground colors. It is important to use the matching background/foreground color to avoid contrast issues.
Here is a table with all the system colors and their corresponding matches:
There is one more system color that doesn't have a background match:
grayText which is a color that has a lower contrast rate (although still readable) for disabled elements... and that, contrary to what the name may convey, it may not always be gray.
In the past, the list of system colors was considerably larger, but many of them have been deprecated. Still, browsers support many of those colors as legacy, but it may not be a good idea to use them.
This is a table with the different system colors organized by browser:
Only Chrome and the Chromium-based browsers support all the system colors. Edge/IE and Safari only support Button and Highlight. And Safari supports Button, Highlight, and Field (all with the foreground and background color).