The Vocabulary of Constraints: Named Colors

CSS Named Colors are a collection of approximately 140 human-readable keywords—ranging from aliceblue to yellowgreen—that map to specific, hard-coded sRGB coordinates. While these "magic strings" provided approachability in the early web, they are fundamentally at odds with the engineering philosophy of a modern, formula-driven system like Espalier.

The Strategic Critique: Why "Magic Strings" Fail

From a Startup Strategist’s perspective, named colors are a form of technical debt. Relying on them in production creates several roadblocks for scaling:

1. Arbitrary Mapping: Named colors have no mathematical relationship to one another. There is no logic connecting dodgerblue to steelblue, making it impossible to calculate consistent shades or tints without first converting them to a coordinate-based model.
2. Perceptual Inconsistency: In the named color list, yellow ( $L\approx 97\mathrm{\%}$ ) and navy ( $L\approx 13\mathrm{\%}$ ) are treated as peers, despite having polar opposite visual weights. This makes them dangerous for UI roles like "primary action," where consistent prominence is required.
3. sRGB Gamut Lock: Every named color is defined within the 1990s-era sRGB color space. Using them prevents your interface from utilizing the 25% wider range of colors available on modern Display P3 hardware.

Named Colors as "Origin Seeds"

While we deprecate the use of named colors for direct styling, they can serve as convenient "origin colors" for Relative Color Syntax during rapid prototyping. Using the from keyword, the browser converts these legacy strings into the perceptually uniform OKLCH space for manipulation:

/* Derive a brand-compliant button from a named color seed */
.btn--derived {
  background: oklch(from cornflowerblue l c h);
}

However, even when using the from keyword, starting with a named color inherits the sRGB limitations of that keyword. A better approach is to always start from a defined OKLCH token.

Challenge the Assumption: "Ease of Use"

The common argument for named colors is "ease of use." We challenge this assumption. While typing red is faster than defining an OKLCH coordinate, the "ease" disappears the moment a designer asks for a "slightly softer red" or a "dark mode variant." At that point, the developer must abandon the named color and refactor the entire implementation.

For a defensible architecture, use Semantic Tokens instead of arbitrary names.

Technical Reference: The Legacy Palette

These swatches represent the CSS3 named color set, including rebeccapurple, which was added to the CSS Color Level 4 specification to honor web pioneer Eric Meyer. Note how the lack of uniform lightness ( $L$ ) makes this palette visually "jumpy"—the antithesis of the smooth ramps found in the Espalier Main Guide.

<ul id="all-color-names"></ul>
<script>
  const theUl = findByTagName("ul");
  fetch("/assets/data/color-names.json")
.then(response => response.json())
.then(allTheColors => {
    for(const name in allTheColors) {
      const hex = allTheColors[name];
      const li = htmlToNode(`<li style="background: ${name}; color: ${getContrastingFromHex(hex)}">${name}<br />${hex}</li>`);
      theUl.appendChild(li);
    }
  })
</script>