CSS <named-color> Data Type

The CSS <named-color> data type represents colors using predefined color keywords. Instead of specifying numeric color components, a named color uses a keyword such as red, blue, gold, or rebeccapurple.

Syntax

A <named-color> is written as a predefined CSS color keyword without quotation marks:

red
blue
green
gold
orange
rebeccapurple

Each keyword represents a specific sRGB color.

Named Color Values

CSS provides a large set of named colors ranging from basic color names to more descriptive names. The following are a few examples:

Keyword	Hexadecimal Equivalent
`black`	`#000000`
`white`	`#ffffff`
`red`	`#ff0000`
`lime`	`#00ff00`
`blue`	`#0000ff`
`yellow`	`#ffff00`
`cyan`	`#00ffff`
`magenta`	`#ff00ff`
`rebeccapurple`	`#663399`

Different names can sometimes represent the same color. For example, aqua and cyan both represent #00ffff, while fuchsia and magenta both represent #ff00ff.

Case Sensitivity

Named color keywords are ASCII case-insensitive. Uppercase and lowercase letters can therefore be used without changing the resulting color.

red
Red
RED

All three values represent the same color. Lowercase is commonly used for consistency in CSS code.

Transparent Keyword

The transparent keyword represents a fully transparent color. It is equivalent to transparent black, with all color channels and the alpha value set to zero.

transparent
rgb(0 0 0 / 0%)

transparent is defined as a special <named-color> value and can be used anywhere the applicable CSS grammar accepts that color value.

<named-color> Example

The following example uses named colors for background colors:

.red {
  background-color: red;
}
.gold {
  background-color: gold;
}
.blue {
  background-color: blue;
}
.rebeccapurple {
  background-color: rebeccapurple;
}

Browser Result

red

gold

blue

rebeccapurple

The <named-color> data type can be used wherever the applicable property accepts a CSS color, including:

Specifications

The <named-color> data type is defined in the CSS Color Module Level 4 .

CSS <named-color> Data Type