# 调色板

> React 色块与调色板选择器，内置可搜索的色板，也可以传入你自己命名的品牌色和设计系统颜色。

Source: https://chroma-panel.jscrate.dev/zh/react/modes/palettes
Last updated: 2026-09-21

调色板模式按分组展示可搜索的色块，可以按颜色名称或 hex 值搜索。传入 `palettes` 可以使用品牌色或设计系统颜色；不传则使用 Basic、Spectrum 和 Greyscale 这几组内置颜色。每个色块都是一个按钮，当前颜色会标记为选中状态。

## 结构

```tsx
import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/palettes";

<ChromaPanel
  modes={["palettes"]}
  palettes={[{ name: "Brand", colors: ["#3366cc", "#cc3366"] }]}
/>;
```

不传 `palettes` 就会使用内置颜色集。如果想在它的基础上扩展而不是替换，可以从 `chroma-panel` 调用 `defaultPalettes()`，再加上你自己的颜色：

```tsx
import { ChromaPanel, defaultPalettes } from "chroma-panel";

<ChromaPanel
  modes={["palettes"]}
  palettes={[
    { name: "Brand", colors: ["#3366cc", "#cc3366"] },
    ...defaultPalettes(),
  ]}
/>;
```

`defaultPalettes` 只从主入口 `chroma-panel` 导出，而这个入口会注册全部五种模式。

列表较长时，会在面板为模式预留的高度内滚动。要修改这个高度，或者让面板随内容增高，请参阅[让面板适应容器](https://chroma-panel.jscrate.dev/zh/react/handbook/theming)。

## 演示

```tsx
"use client";

import { ChromaPanel } from "chroma-panel";

export default function ChromaPanelPalettesDemo() {
  return (
    <ChromaPanel
      defaultValue="#3366cc"
      modes={["palettes"]}
      showTitleBar={false}
      injectStyles={false}
    />
  );
}
```

## 模式 id

`'palettes'`。把它加入 `modes` 就会显示这个标签页，标签页的顺序与它们在 `modes` 中的顺序一致。