CSS Color Names

Browse and search all 148 CSS named colors with their HEX and RGB values, sorted by name, hue or lightness. Runs entirely in your browser. Nothing is sent to any server.

148 colors

What are CSS color names?

CSS defines 148 color keywords, such as tomato, steelblue or rebeccapurple, that can be used anywhere a color value is accepted instead of a HEX or RGB code. Most come from the X11 color list adopted by early browsers, which is why the names are sometimes surprising: darkgray is lighter than gray. Every browser supports all of them. This list shows each name with its color, HEX and RGB values, lets you search by name, HEX or any color, and sorts them alphabetically, by hue or by lightness.

Examples

Using color names in stylesheets, markup and scripts:

CSS

.notice {
  color: darkslategray;
  background: lightgoldenrodyellow;
  border: 1px solid goldenrod;
}

HTML

<p style="color: rebeccapurple">Named colors work inline too.</p>

JavaScript

// resolve a name to rgb() through the browser itself
const el = document.createElement("div");
el.style.color = "tomato";
document.body.append(el);
getComputedStyle(el).color; // "rgb(255, 99, 71)"

SVG

<circle cx="50" cy="50" r="40" fill="cornflowerblue" stroke="navy" />

Use Cases

Quick prototypes and demos

Names like crimson or teal are faster to type and easier to read than HEX codes when you're sketching a layout or writing an example.

Debugging layouts

Outline elements with obvious colors like hotpink or lime to see boxes and overflow while you work, then remove them.

Finding a name for a HEX value

Paste a HEX or RGB value to see whether it has an exact name, or which named color is closest.

Teaching and documentation

Readable color names make CSS tutorials and code samples easier to follow for beginners.

Frequently Asked Questions

How many CSS color names are there?

148 in CSS Color Module Level 4, counting spelling variants like gray and grey separately, plus the special keywords transparent and currentColor, which aren't fixed colors and aren't listed here.

Why is darkgray lighter than gray?

gray comes from HTML's original 16 colors, at 50% (#808080), while darkgray comes from the X11 list, where it was defined as #a9a9a9. Both were kept when the lists merged, so the names contradict each other.

Are color names case-sensitive?

No. Tomato, TOMATO and tomato are the same color. Lowercase is the usual convention.

Should I use names or HEX in production?

Either works and renders identically. Design systems usually prefer HEX, RGB or variables because only 148 colors have names and brand colors rarely match one exactly.

Is my data sent to a server?

No. The list and the search run in your browser with plain JavaScript. Nothing is transmitted or stored.