Named colors | Frontend Practical Guide

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

Overview

Named colors provide human-readable keyword values such as red, navy, and rebeccapurple. They are convenient for quick styling and examples.

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

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

CSS basiccolorname demo.

CSS extendedcolorname demo.

CSS Textcolor and usage demo.

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.

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.