Named colors

CSS named colors such as aliceblue, navy, and yellowgreen map to fixed sRGB values. They are convenient for prototypes, but their names do not describe relationships such as lightness steps or hover states.

For a themed interface, use semantic tokens that express a color's purpose and follow the active scheme. A literal navy background stays navy when the theme changes.

Relative colors

The browser can convert a named color to OKLCH through relative color syntax:

.btn--derived {
  background: oklch(from cornflowerblue l c h);
}

This CSS example does not imply that every named color is supported by the JavaScript theme parser. See theming for accepted theme inputs and OKLCH for deriving related colors.

Color swatches

The example below loads the named-color catalog used by the documentation site.

<ul id="all-color-names"></ul>
<script>
  const theUl = findByTagName("ul")[0];
  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>