CSS named colors: when names help and when HEX is clearer

A named color is an exact CSS value

CSS Color 4 defines a large set of named colors. A browser accepts a named-color identifier anywhere a color value is allowed and resolves it to the standardized sRGB channels. For example, red is exactly #FF0000, blue is #0000FF, and rebeccapurple is #663399.

.notice {
  color: white;              /* #FFFFFF */
  background: rebeccapurple; /* #663399 */
  border-color: black;       /* #000000 */
}

Spelling and letter case

Named-color identifiers are ASCII case-insensitive. red, RED, and ReD resolve to the same value. Multiword names are written as one identifier without spaces or hyphens, such as cornflowerblue, darkslategray, and lightgoldenrodyellow.

• Use the exact standardized identifier; invented names such as brandblue are not colors unless used through another mechanism.
• Prefer lowercase in source code for consistent searching and review, even though the browser accepts other casing.
• Do not translate the identifier: CSS uses white, not a localized word for white.
• Check the specification or a deterministic lookup instead of reconstructing a long name from memory.

.same-result {
  color: red;
  border-color: RED;
  outline-color: ReD;
}

Different names can resolve to the same color

The named-color list contains aliases inherited from earlier palettes and spelling variants. aqua and cyan both resolve to #00FFFF. fuchsia and magenta both resolve to #FF00FF. gray and grey both resolve to #808080, and the same spelling pair appears in several compound gray names.

• aqua = cyan = #00FFFF
• fuchsia = magenta = #FF00FF
• gray = grey = #808080
• darkgray = darkgrey = #A9A9A9
• slategray = slategrey = #708090

Why the names do not form a reliable color system

The standard preserves names that accumulated through VGA, HTML, X11, and SVG history. It explicitly warns that the set is uneven and internally inconsistent. The words are useful identifiers, but they are not ordered coordinates and should not be treated like a designed palette.

• green is #008000, while the maximum sRGB green #00FF00 is named lime.
• darkgray is #A9A9A9 and is lighter than gray at #808080 despite its prefix.
• purple is #800080, while rebeccapurple is the different value #663399.
• Similar natural-language names do not guarantee equal hue, saturation, or lightness steps.
• The list covers sRGB unevenly and cannot represent arbitrary brand colors or wide-gamut Display P3 colors.

That is why a name alone is weak documentation for a design decision. Record the exact value, calculate contrast from that value, and compare resolved channels rather than assuming that dark, light, pale, or medium establishes a measurable relationship.

When a named color improves the code

A short familiar keyword can be the clearest choice when the exact standardized value is intended and the code is local. black and white are immediately recognizable. red, blue, and lime are useful in demonstrations that teach CSS syntax or isolate browser behavior.

• Use familiar names in minimal examples where the color itself is not the subject under test.
• Use a keyword when its standardized value is explicitly part of the requirement.
• Use names for quick debugging outlines that will not become product styling.
• Keep examples copy-ready by noting the numeric value when a less familiar keyword appears.

When HEX or a semantic custom property is clearer

Production interfaces usually need a stable palette with roles such as text, surface, action, warning, and border. A raw keyword does not express those roles, and changing every use of blue is harder than changing one semantic token. CSS custom properties provide author-defined names beginning with two dashes and can hold the reviewed color value.

:root {
  --color-text: #111827;
  --color-surface: #FFFFFF;
  --color-action: #4F46E5;
  --color-warning: #B45309;
}

.button {
  color: var(--color-surface);
  background: var(--color-action);
}

• Choose HEX when reviewers need the exact compact sRGB value.
• Choose rgb() when explicit channels or readable alpha are important.
• Put either value behind a semantic custom property when many components share a role.
• Do not use red or green as the only signal for error or success; text, icons, and accessible contrast still matter.
• Treat token names as product semantics and their numeric values as replaceable implementation data.

A practical named-color checklist

• Verify that the word is present in the standardized named-color table.
• Look up its exact HEX or RGB channels instead of estimating from the name.
• Check whether another keyword is an exact alias and keep one canonical reference.
• Do not infer ordering from prefixes such as dark or light.
• Remember that opaque named colors resolve to sRGB, not a wider color space.
• Use semantic custom properties for maintained product palettes.
• Calculate contrast from the resolved value and final background.
• Keep special values such as transparent and currentcolor separate from the opaque named-color list.

Color Atlas follows these rules by storing one canonical record for a color and deriving its formats and contrast values. A standardized alias can be documented on that record without manufacturing a second near-duplicate SEO page.