# 色轮

> 色轮模式是一个 React 色轮选择器：色相沿圆周分布，饱和度从圆心向外增加，旁边配有亮度和透明度滑块。

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

色相沿色轮一周分布，饱和度从圆心向外递增。色轮下方依次是亮度滑块、可选的不透明度滑块和颜色文本输入框。用户凭眼睛挑选颜色时适合用这个模式；需要精确的通道值时，请用[滑块](https://chroma-panel.jscrate.dev/zh/react/modes/sliders)。

## 结构

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

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

色盘的尺寸由 `--cp-disc-size` 控制，用绿色窗口按钮加宽面板时，它也会随之变大。它的默认值以及其他尺寸变量，见[用 CSS 变量定制主题](https://chroma-panel.jscrate.dev/zh/react/handbook/theming)。

## 演示

```tsx
"use client";

import { ChromaPanel } from "chroma-panel";

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

## 模式 id

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