CSS Color Names

A color name is a human-readable keyword — like red, tomato, or rebeccapurple — that you can use anywhere CSS expects a color value, instead of a numeric notation such as #FF0000 or rgb(255 0 0). Names are the easiest way to write a color: they're self-documenting and impossible to typo into a different valid color the way hex codes can be.

This chapter lists every named color, explains when to reach for a name versus a hex or rgb() value, and covers the few special keywords (transparent, currentColor) that aren't in the table.

Using a color name

Drop the keyword straight into any color property. Names are case-insensitive, so Tomato, tomato, and TOMATO are identical:

h1 {
  color: tomato;
}

button {
  background-color: SeaGreen;
  border: 2px solid darkslategray;
}

These are interchangeable with the hex and rgb() forms — color: tomato paints exactly the same pixels as color: #FF6347 or color: rgb(255 99 71). Pick names for readability during development; reach for hex when you need a precise brand color that has no keyword.

The named colors

All 147 color names below are supported by every modern browser. Each row shows the keyword and its equivalent HEX value:

How the HEX values relate to names

Every name in the table is just a shorthand for an RGB color — a mix of Red, Green, and Blue light. CSS writes that mix as a hexadecimal (HEX) value: a # followed by six digits, two per channel. The lowest value a channel can take is 0 (hex 00) and the highest is 255 (hex FF).

#FF6347   →   FF = red 255   63 = green 99   47 = blue 71   →   "tomato"

HEX is case-insensitive, so #FFFFFF and #ffffff are the same color (white). When all three channels share both digits, you can also use the 3-digit shorthand — #FFF expands to #FFFFFF and #F00 to #FF0000.

Knowing this mapping is useful when a design tool hands you a hex code that almost matches a keyword: you can swap in the readable name only when the values match exactly.

Special color keywords

Two keywords behave like color names but aren't in the table:

• transparent — a fully see-through color, equivalent to rgba(0, 0, 0, 0). Use it to hide a border or background without removing the property.
• currentColor — resolves to the element's current color value. It's handy for keeping a border or SVG fill in sync with the text color automatically.

.ghost-button {
  color: royalblue;
  background-color: transparent;
  border: 2px solid currentColor; /* follows the royalblue text color */
}

Related chapters

• CSS color property — set the text color of an element.
• CSS background-color property — fill an element's background.
• HTML Colors — the RGB / HEX / HSL color models explained.

Practice