# 命名颜色

> 按需启用 rebeccapurple 等 148 个 CSS 命名颜色，用于解析和 React 颜色选择器的文本框，也可以注册你自己的品牌颜色名称。

Source: https://chroma-panel.jscrate.dev/zh/react/utils/named-colors
Last updated: 2026-09-21

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

```ts
import { registerNamedColors } from "chroma-panel";
import { namedColors } from "chroma-panel/named-colors";

registerNamedColors(namedColors);
```

现在 `parse('rebeccapurple')` 可以正常工作了，在 [ColorField](https://chroma-panel.jscrate.dev/zh/react/components/color-field) 里输入颜色名称也一样。

## API 参考

```ts
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.

```ts
function clearNamedColors(): void
```

Empties the name registry.

## 注册自己的名称

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

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

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