# ColorArea

> ColorArea 是 React 颜色选择器中同时调节饱和度和亮度的二维方形区域，基于原生 range 输入框，可用来构建自定义模式。

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

`ColorArea` 是一个方形区域，用来同时选择饱和度和亮度。背景是当前色相，饱和度从左到右递增，亮度从上边缘往下逐渐降低，到底部变为黑色。在区域内任意位置拖动，手柄都会跟着指针走。它不会改变色相，所以要搭配一个调节色相的 [ChannelSlider](https://chroma-panel.jscrate.dev/zh/react/components/channel-slider)，才能选到所有颜色。

它是组成 React 颜色选择器的部件之一，但没有内置模式用到它：[色轮模式](https://chroma-panel.jscrate.dev/zh/react/modes/wheel)用的是 [ColorDisc](https://chroma-panel.jscrate.dev/zh/react/components/color-disc)。如果自定义模式要显示方形区域而不是色轮，就用 `ColorArea`。为了照顾键盘和屏幕阅读器用户，它内部有两个视觉上隐藏的 range 输入框：Saturation 和 Brightness，取值都是 0 到 100，以百分比播报。它会撑满容器的宽度，高度由 `height` 设置。

## 结构

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

<ColorArea height={180} />;
```

> **只能在面板内使用**
>
> 内置模式就是由这些基础组件搭起来的。它通过 `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 |
| --- | --- | --- | --- |
| `height` | `number` | `150` | Height in pixels. The width fills the container. |
| `className` | `string` | — | Class on the area. |

## 相关内容

- [ColorDisc](https://chroma-panel.jscrate.dev/zh/react/components/color-disc)：色轮形式的替代方案，色轮模式用的就是它
- [ChannelSlider](https://chroma-panel.jscrate.dev/zh/react/components/channel-slider)：在区域旁边加上色相和不透明度滑块
- [自定义模式](https://chroma-panel.jscrate.dev/zh/react/modes/custom)：注册一个标签页来放置这个区域
- [无障碍功能](https://chroma-panel.jscrate.dev/zh/react/overview/accessibility)：隐藏的 range 输入框如何配合键盘和屏幕阅读器工作