# ColorDisc

> ColorDisc 是色轮模式背后的 React 色轮组件：色相沿圆周分布，饱和度从圆心向外递增。可用来构建自定义模式。

Source: https://chroma-panel.jscrate.dev/zh/react/components/color-disc
Last updated: 2026-09-21

`ColorDisc` 就是[色轮模式](https://chroma-panel.jscrate.dev/zh/react/modes/wheel)里的 React 色轮，也可以作为独立控件使用。色相沿圆周分布，饱和度从圆心的白色逐渐过渡到边缘的纯色。整个色盘会随当前亮度一起变暗。拖动时会同时设置色相和饱和度，手柄跟着指针走。

色盘本身不包含亮度。色轮模式在它下方加了一个亮度 [ChannelSlider](https://chroma-panel.jscrate.dev/zh/react/components/channel-slider)，开启 `showAlpha` 时还有一个不透明度滑块，最后是一个十六进制输入框。如果自定义模式需要把色轮放进别的布局，或者和其他控件放在一起，就用 `ColorDisc`。为了照顾键盘和屏幕阅读器用户，它内部有两个视觉上隐藏的 range 输入框：Hue 取值 0 到 360，以度数播报；Saturation 取值 0 到 100，以百分比播报。`size` 设置直径，单位为像素。

## 结构

```tsx
import { ColorDisc } from "chroma-panel";

<ColorDisc />;
```

> **只能在面板内使用**
>
> 内置模式就是由这些基础组件搭起来的。它通过 `usePanel()` 读取颜色，所以只能放在 `ChromaPanel` 里使用，通常用在[自定义模式](https://chroma-panel.jscrate.dev/zh/react/modes/custom)中。如果要在面板之外做颜色选择器，请使用[颜色 store 和相关 hook](https://chroma-panel.jscrate.dev/zh/react/utils/use-color-store)。

## API 参考

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `number` | `200` | Diameter in pixels. `--cp-disc-size` sets this for the built-in wheel mode. |
| `className` | `string` | — | Class on the disc. |

## 相关内容

- [色轮模式](https://chroma-panel.jscrate.dev/zh/react/modes/wheel)：使用这个色盘的内置标签页
- [ColorArea](https://chroma-panel.jscrate.dev/zh/react/components/color-area)：改用方形区域调节饱和度和亮度
- [自定义模式](https://chroma-panel.jscrate.dev/zh/react/modes/custom)：注册一个标签页来放置这个色盘
- [无障碍功能](https://chroma-panel.jscrate.dev/zh/react/overview/accessibility)：隐藏的 range 输入框如何配合键盘和屏幕阅读器工作