ColorArea 是一个方形区域，用来同时选择饱和度和亮度。背景是当前色相，饱和度从左到右递增，亮度从上边缘往下逐渐降低，到底部变为黑色。在区域内任意位置拖动，手柄都会跟着指针走。它不会改变色相，所以要搭配一个调节色相的 ChannelSlider，才能选到所有颜色。
它是组成 React 颜色选择器的部件之一，但没有内置模式用到它：色轮模式用的是 ColorDisc。如果自定义模式要显示方形区域而不是色轮，就用 ColorArea。为了照顾键盘和屏幕阅读器用户，它内部有两个视觉上隐藏的 range 输入框：Saturation 和 Brightness，取值都是 0 到 100，以百分比播报。它会撑满容器的宽度，高度由 height 设置。
结构
import { ColorArea } from "chroma-panel";
<ColorArea height={180} />;只能在面板内使用
内置模式就是由这些基础组件搭起来的。它通过 usePanel() 读取颜色，所以只能放在 ChromaPanel 里使用，通常用在自定义模式中。如果要在面板之外做颜色选择器，请使用颜色 store 和相关 hook。
API 参考
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| height | number | 150 | Height in pixels. The width fills the container. |
| className | string | — | Class on the area. |
相关内容
- ColorDisc：色轮形式的替代方案，色轮模式用的就是它
- ChannelSlider：在区域旁边加上色相和不透明度滑块
- 自定义模式：注册一个标签页来放置这个区域
- 无障碍功能：隐藏的 range 输入框如何配合键盘和屏幕阅读器工作