# 预设色

> 预设色模式为 React 颜色选择器添加一个 120 色的现成色块网格，仿照 macOS 的「铅笔」标签页设计，也可以换成你自己的颜色。

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

预设色模式在 12 列网格中展示 120 个固定色块。第一行从白色过渡到黑色，其余各行涵盖 12 种色相，由深色逐渐过渡到浅色。向 `pencils` 传入你自己的颜色字符串，就能替换这组颜色。如果需要带搜索的命名分组，请使用[调色板模式](https://chroma-panel.jscrate.dev/zh/react/modes/palettes)。

## 结构

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

<ChromaPanel modes={["pencils"]} pencils={myColors} />;
```

不传 `pencils` 时使用内置的 120 色网格。如果想以它为基础修改，可以调用 `defaultPencils()`，它会以字符串数组的形式返回这 120 种颜色。这个函数只从主入口 `chroma-panel` 导出。

## 演示

```tsx
"use client";

import { ChromaPanel } from "chroma-panel";

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

## 模式 id

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