Widely available Fine for demos, prototypes, and a few semantic cases, though design systems usually prefer explicit tokens or function-based values.

Named colors

The <named-color> CSS data type is the name of a color, such as red, blue, black, or lightseagreen. Syntactically, a <named-color> is an <ident>.

A <named-color> value can be used anywhere a <color> can be used.

ColorKeywordsStyling

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.named-color
1
12
1
1
18
1
CSS type
named-color.rebeccapurple
38
12
33
9
38
8
named-color.transparent
1
12
3
3.1
18
2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.error {
  color: red;
  border-color: crimson;
}
.success {
  color: forestgreen;
}

Live demo

basiccolorname

CSS basiccolorname demo.

PreviewFullscreen

extendedcolorname

CSS extendedcolorname demo.

PreviewFullscreen

Textcolor and usage

CSS Textcolor and usage demo.

PreviewFullscreen

Use cases

  • Quick prototypes

    Use named colors when readability matters more than strict palette control in early exploration or examples.

  • Educational examples

    Named colors are approachable in documentation and learning material where literal color names help explain intent.

Cautions

  • Named colors can be too coarse for polished product palettes and may encourage inconsistent styling across a large app.
  • Color names still do not communicate semantics such as success, warning, or emphasis by themselves.

Accessibility

  • A simple keyword value still needs the same contrast checks and meaning redundancy as any other color choice.

Related links