CSS Named Colors: All 148 Keywords (plus transparent)

## Why it matters

Named colours are great for prototypes and quick states: red for an error, gainsboro for a hairline border. Their limitation is that you cannot fine-tune one, and few match a brand palette. Two names worth knowing: rebeccapurple, added in memory of Eric Meyer's daughter, and transparent, which is rgb(0 0 0 / 0), occasionally visible as a black tinge in a gradient.

## How it works

CSS recognises 148 colour keywords. The browser treats each as a fixed hex value:

color: red;             /* #ff0000 */
color: rebeccapurple;   /* #663399 */
color: lightblue;       /* #add8e6 */
Copy

They render identically to writing the hex code directly. There is no difference between color: blue and color: #0000ff beyond readability.

Two special keywords deserve attention:

• transparent is shorthand for rgba(0 0 0 / 0), fully transparent black. It is useful in gradients, but can darken a fade because the black tint shows through on some backgrounds.
• currentColor is not a fixed colour. It means "use the element's color property." If a <button> has color: #1a202c, then border-color: currentColor will use that same #1a202c. It is inheritance made explicit and is useful for SVG and borders that should match the text colour.

## The named colour groups

The 148 keywords break into loose groups:

• Basics: red, green, blue, yellow, black, white, etc.
• Shades: darkred, darkgreen, lightblue, lightgrey (note: grey and gray both work).
• Nature: tomato, salmon, khaki, teal, olive.
• Offbeat: rebeccapurple, papayawhip, goldenrod, peachpuff.

A few colours have both gray and grey variants (both American and British spellings): gray/grey, darkgray/darkgrey, darkslategray/darkslategrey, dimgray/dimgrey, lightgray/lightgrey, lightslategray/lightslategrey, slategray/slategrey.

## What does not matter

Named colours cannot be modified. If tomato is too bright, you cannot make a darker tomato by changing a channel. You have to switch to hex or hsl(). That is why brand work moves off keywords to hex, oklch() or design tokens.

And the CSS spec has 148, but some older lists (X11 colours) have more. Stick to the W3C list for guaranteed support.

currentColor is not a shorthand for "inherit the text colour." It only works where a colour is expected. You cannot write background: currentColor if the element is a <div>; you can only use it on color, border-color, fill, stroke and similar colour properties. Wait, that is wrong. background-color: currentColor does work. But background: currentColor without -color is trickier because background is a shorthand.

## Code example

Named colours in common use cases:

/* Quick prototyping */
.error { color: red; }
.success { color: green; }
.muted { color: gray; }

/* Borders matching text */
button {
  color: darkblue;
  border: 2px solid currentColor;  /* border matches the button text */
}

/* Gradient with named colours */
background: linear-gradient(
  90deg,
  red,
  yellow,
  lime,
  cyan,
  blue,
  magenta,
  red
);

/* Transparent as a fallback layer */
background-image:
  linear-gradient(135deg, rgba(255, 0, 0, 0.5), transparent),
  url('photo.jpg');
Copy

The gotcha with transparent:

/* Might show a black-tinted fade on some backgrounds */
background: linear-gradient(
  to right,
  rgb(255, 0, 0),
  transparent,
  rgb(0, 0, 255)
);

/* Better: fade to a colour, not black */
background: linear-gradient(
  to right,
  rgb(255, 0, 0),
  rgba(255, 0, 0, 0),  /* red that fades to transparent */
  rgb(0, 0, 255)
);
Copy

## How Scalpel Color shows it

On the Picker tab, there is a text input field that accepts any CSS colour keyword. Type tomato, rebeccapurple or currentColor and the extension shows its hex and RGB equivalent. The input also accepts hex, rgb(), and other formats, so it doubles as a colour converter. If you type an unknown keyword, it will not resolve and the input will show an error.