JavaScript 中的 CSS 命名颜色

CSS 颜色名称是可选的。如果希望用户能输入 tomato 或 rebeccapurple 这样的值，就导入并注册它们。在你导入 chroma-panel/named-colors 之前，这张颜色表不会进入打包结果。你也可以用同一个注册表来注册自己的品牌颜色名称。

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

现在 parse('rebeccapurple') 可以正常工作了，在 ColorField 里输入颜色名称也一样。

API 参考

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

Registers a name-to-color 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.

注册表接受任何从名称映射到 hex 字符串的对象，所以你可以注册一套品牌颜色名称，替代 CSS 颜色名称，或者和它们一起使用：

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

值必须是 hex，带不带 # 都可以。映射到 rgb() 字符串的名称无法解析。名称请用小写，因为输入在查找前会先转成小写。