Named Colors
Tags: css, html
Published: 2020-03-18 16:34:41

---
title: Named Colors
published: true
description: There is much more to CSS colors than RGB, HEX, and HSL... let's see the status of CSS colors in 2020. Step 4: Named Colors
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

Some common colors have named aliases to make them easier to use and remember. For example, you don't need to know that `#FF0000` or `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](https://drafts.csswg.org/css-color/#named-colors), some of which are repeated. For example, `aqua` and `cyan` are equivalents to `#00FFFF`.

![Some named color examples with their names and HEX and RGB equivalents](https://dev-to-uploads.s3.amazonaws.com/i/5ooj6cs491c2l41khlhm.png)
<figcaption>Some named colors with their names and HEX and RGB equivalents</figcaption>

**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`, `Turquoise`, or `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 `rebeccapurple` (`#663399`)–, aliases, and removals. 

## Special Color Keywords

Apart from the color names, there are some other named "colors" and keywords that are worth mentioning:

### `transparent`

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](https://caniuse.com/#feat=mdn-css_properties_color_transparent), 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.

### `currentColor`

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:

```scss
.element {
  color: teal;
  background-color: currentColor;
}

.element {
  color: teal;
  background-color: teal;
}
```

The `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`

[`inherit`](https://developer.mozilla.org/en-US/docs/Web/CSS/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).

## System Colors

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:

<table>
<thead>
<tr>
<th>Background Color</th>
<th>Foreground Color(s)</th>
</tr>
</head>
<tbody>
<tr>
<td><code>buttonFace</code></td>
<td><code>buttonText</code></td>
</tr>
<tr>
<td><code>canvas</code></td>
<td><code>activeText</code><br/><code>canvasText</code><br/><code>linkText</code><br/><code>visitedText</code></td>
</tr>
<tr>
<td><code>field</code></td>
<td><code>fieldText</code></td>
</tr>
<tr>
<td><code>highlight</code></td>
<td><code>highlightText</code></td>
</tr>
</tbody>
</table>

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](https://drafts.csswg.org/css-color/#deprecated-system-colors). 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:

![Table of system colors by browser displaying Chrome, Edge, Explorer, Firefox, Opera, Safari, and Tor](https://dev-to-uploads.s3.amazonaws.com/i/pvmajv71ct4h1n3vkwui.png)

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).