CSS Color Names: Complete Reference Guide 2026

CSS supports 140+ named colors that you can use directly in your stylesheets — no HEX or RGB required. This guide covers everything you need to know about CSS named colors.

🎨 Try it free: CSS Color Names Finder — Search all 140+ named colors with HEX and RGB values.

---

What Are CSS Color Names?

CSS color names are predefined keyword values that map to specific colors. Instead of writing #FF0000, you can write red.

color: red;
background: cornflowerblue;
border-color: mediumpurple;

All major browsers support all 140+ named colors consistently.

---

Categories of CSS Named Colors

Basic Colors (16 original HTML colors)

black, white, red, green, blue, yellow, orange, purple, pink, cyan, magenta, silver, gray, maroon, olive, teal, navy, lime, aqua, fuchsia

Extended Named Colors (CSS3+)

Over 120 additional colors including: cornflowerblue, mediumseagreen, tomato, goldenrod, slateblue, orchid, cadetblue

Special Values

• transparent — fully transparent
• currentColor — inherits the element's color property
• inherit, initial, unset — cascade keywords

---

Most Useful Named Colors for Web Developers

| Name | HEX | Best Use | |---|---|---| | tomato | #FF6347 | Error states, CTAs | | cornflowerblue | #6495ED | Links, info states | | mediumseagreen | #3CB371 | Success states | | goldenrod | #DAA520 | Warnings, highlights | | slategray | #708090 | Neutral text | | whitesmoke | #F5F5F5 | Backgrounds | | charcoal (not CSS) | — | Use #36454F instead |

---

When to Use Named Colors vs HEX/HSL

Use named colors when:

• Prototyping quickly — no need to look up codes
• The color semantics are important (error: red communicates intent in code)
• Writing documentation or teaching CSS

Avoid named colors in production when:

• Building a design system — named colors don't support opacity syntax like hsl()
• You need a specific shade — red (#FF0000) is pure red and rarely what you want
• Consistency with design tool output matters — Figma exports HEX, not names

---

Special Case: currentColor

One of the most powerful named values — currentColor inherits the element's color property.

.icon {
  color: blue;
  fill: currentColor;    /* SVG inherits blue */
  border-color: currentColor; /* border also blue */
}

Extremely useful for icon systems and consistent theming.

---

Browser Support

All 140+ CSS named colors have universal browser support, including IE9+. The currentColor keyword works in all modern browsers and IE9+.

---

FAQs

Are CSS color names case-sensitive? No. Red, RED, and red all work identically in CSS.

Is grey or gray correct in CSS? Both work. CSS accepts gray, grey, and their variations like lightgray/lightgrey.

Can I use named colors in Tailwind? Not directly in utility classes, but you can use them in config values and arbitrary CSS.

What's the difference between aqua and cyan? They are identical — both map to #00FFFF. CSS supports both as aliases.

---

Conclusion

CSS named colors are perfect for quick prototyping and readable code. For production systems, prefer HEX or HSL in CSS variables. Search all 140+ named colors in our CSS Color Names Finder and convert any to HEX/RGB with the Format Converter.