CSS Color Names

CSS supports 140 named colors, from classics like red, blue, and green to more exotic names like cornsilk, rebeccapurple, and papayawhip. Color names are case-insensitive — Red, red, and RED are all identical.

When to Use Named Colors

Named colors are great for quick prototyping and learning, but for production sites prefer hex, RGB, or HSL values — they give you precise control and access to millions of colors, not just 140. However, a handful of named colors like transparent and currentColor are special values with unique behaviour: currentColor inherits the element's color property, making it very useful for SVG and border styling.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color Names</title>
  <style>
    .swatch {
      display: inline-block;
      width: 120px; height: 60px;
      margin: 4px;
      border: 1px solid #ccc;
      border-radius: 4px;
      position: relative;
    }
    .swatch span {
      position: absolute; bottom: 4px;
      left: 0; right: 0;
      text-align: center;
      font-size: 0.75rem;
      background: rgba(255,255,255,0.7);
    }
  </style>
</head>
<body>
  <div class="swatch" style="background:tomato"><span>tomato</span></div>
  <div class="swatch" style="background:steelblue"><span>steelblue</span></div>
  <div class="swatch" style="background:mediumseagreen"><span>mediumseagreen</span></div>
  <div class="swatch" style="background:goldenrod"><span>goldenrod</span></div>
  <div class="swatch" style="background:orchid"><span>orchid</span></div>
  <div class="swatch" style="background:slategray"><span>slategray</span></div>
  <div class="swatch" style="background:coral"><span>coral</span></div>
  <div class="swatch" style="background:rebeccapurple;color:white"><span>rebeccapurple</span></div>
</body>
</html>

HTML

Full Editor

Pro Tip

The color rebeccapurple was added to CSS in 2014 as a tribute to Rebecca Meyer, daughter of CSS pioneer Eric Meyer — it is the only named CSS color with a documented personal backstory.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned