CSS Color Keywords

CSS ships with about 140 plain-English color names like tomato, cornflowerblue, and rebeccapurple, so a color can be written as a readable word instead of a numeric code.

In this page:

The Named Color Palette
transparent and currentColor
When Named Colors Are Useful
Limitations of Named Colors
Using currentColor in Practice

Syntax

css

selector {
  color: colorName;
  background-color: colorName;
}

The Named Color Palette

CSS defines roughly 140 standard color keywords, from common ones like red, blue, and green to more specific names like coral, teal, and orchid -- every named color also has an exact equivalent hex/rgb value defined in the CSS spec, so they're not vague.

Note:

Accepted values:
named colors — 140+ keywords such as tomato, navy, gold
transparent — fully transparent
currentcolor — the element's text color
System colors — Canvas, CanvasText, LinkText
Keywords are case insensitive
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: The Named Color Palette

css

<style>
.a { background: coral; }
.b { background: teal; }
.c { background: orchid; }
</style>
<div class="a">coral</div>
<div class="b">teal</div>
<div class="c">orchid</div>

transparent and currentColor

Two special keywords aren't fixed colors: transparent means fully invisible regardless of what's behind it, and currentColor resolves to whatever the element's own color property is set to, letting properties like border-color or box-shadow automatically match the text color without repeating it.

Note:

Accepted values:
transparent — fully see-through
currentcolor — resolves to the element's own color value
named color — e.g. red, teal, tomato
#rrggbb / rgb() / hsl() — any other color value
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: transparent and currentColor

css

<style>
p {
  color: navy;
  border: 2px solid currentColor;
  background: transparent;
}
</style>
<p>Border automatically matches the text color</p>

When Named Colors Are Useful

Named colors are fastest for quick prototyping, README-style documentation, or when a color's exact hex value genuinely doesn't matter -- they read clearly in code review in a way #FF6347 does not, at the cost of far less precision than hex/rgb/hsl.

Example: When Named Colors Are Useful

css

<style>
.prototype {
  background: tomato;
}
</style>
<div class="prototype">tomato — clear in code review, quick to prototype with</div>

Limitations of Named Colors

With only ~140 fixed options, named colors can't express most brand colors precisely, and two named colors that look similar (like grey and darkgrey) don't reveal their relationship the way two hex codes or two hsl() lightness values would.

Example: Limitations of Named Colors

css

<style>
.grey { background: grey; }
.darkgrey { background: darkgrey; }
</style>
<div class="grey">grey</div>
<div class="darkgrey">darkgrey — the relationship isn't obvious from the names</div>

Using currentColor in Practice

currentColor is especially useful for SVG icons, borders, and shadows that should always match the surrounding text color automatically -- changing color once updates every property that references currentColor, instead of needing every related property updated separately.

Note:

Accepted values:
transparent — fully see-through
currentcolor — resolves to the element's own color value
named color — e.g. red, teal, tomato
#rrggbb / rgb() / hsl() — any other color value
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Using currentColor in Practice

css

<style>
.icon {
  color: navy;
  border: 2px solid currentColor;
  box-shadow: 0 0 4px currentColor;
}
</style>
<div class="icon">Border and shadow both follow the text color</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS HSL Colors Next Lesson → CSS Backgrounds

CSS Color Keywords

The Named Color Palette

transparent and currentColor

When Named Colors Are Useful

Limitations of Named Colors

Using currentColor in Practice

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code