Chroma Panel

Search documentation

Find a page or section

Named colors

The CSS colour names cost 1.3 kB, so they are opt-in.

import { registerNamedColors } from "chroma-panel";
import { namedColors } from "chroma-panel/named-colors";
 
registerNamedColors(namedColors);

Now parse('rebeccapurple') works, and so does typing a name into ColorField.

API reference

function registerNamedColors(table: Record<string, string>): void

Registers a name-to-colour map so parse accepts those names. The 148 CSS names cost about 1.3 kB gzipped, which is why they are opt-in.

function clearNamedColors(): void

Empties the name registry.

Registering your own

The registry takes any map of name to colour string, so you can register a brand vocabulary instead of, or alongside, the CSS names:

registerNamedColors({ brand: "#3366cc", "brand-dark": "#254a91" });