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

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.

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.

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.

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>

🔒

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