ColorPicker 取色器
选任意一个颜色：自定义主题色、标签色、画板颜色。它是一块内联的面板，本身不弹出；要从按钮弹出时放进 Popover。只在几个预设里挑时用 ColorSwatches 更简单。
基本用法
上面的方块横向是饱和度、纵向是亮度；下面是色相条和十六进制输入框。浏览器支持屏幕取色（EyeDropper）时，输入框旁边会多出一个吸管按钮。值统一是小写的 #rrggbb。
受控用法
onChange 在拖动过程中连续触发，适合实时预览；onChangeEnd 在一次操作结束时触发（松开指针、每次按键、输入框提交、点色板），适合保存或写进历史记录。
预设色板
swatches 在面板下方放一排预设颜色，点一下就选中；当前颜色正好是其中之一时，那个色块带选中标记。
放进 Popover
点按钮弹出面板，Esc 或点外面关闭。方块的圆角会按 Popover 的内边距自动收小，和浮层的圆角同心。
禁用与 Field
规格
- 面板
- 默认宽 240（不超过容器）· 零件间距 12
- 方块
- 3 : 2 · 圆角 12，放进浮层或卡片时按同心圆角收小
- 色相条
- 原生 range 换肤 · 色带 12 · 圆钮 22
- 圆钮
- 3px 白圈 + 发丝线 · 悬停 1.05× · 按住 1.18×
API
ColorPicker
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | — | 当前颜色，#rrggbb（受控）。大小写都可以，输出统一小写。 |
defaultValue | string | '#ff6b8e' | 初始颜色（非受控）。 |
onChange | (hex: string) => void | — | 颜色变化时触发，拖动过程中连续触发。 |
onChangeEnd | (hex: string) => void | — | 一次操作结束时触发：松开指针、键盘调整、输入框提交、点色板、屏幕取色。 |
swatches | string[] | — | 面板下方的预设颜色。 |
disabled | boolean | — | 整体禁用。 |
aria-label | string | '颜色' | 整组的名称；放进 Field 时默认取 Field 的标签。 |
无障碍
- 根节点是
role="group"，名称取 aria-label（默认“颜色”）或 Field 的标签。 - 方块是
role="slider"，aria-roledescription="二维滑块"，读屏读出aria-valuetext，如“饱和度 60%，亮度 80%”。← / → 调饱和度，↑ / ↓ 调亮度，一步 1%，按住 Shift 一步 10%；PageUp / PageDown 亮度 ±10%；Home / End 饱和度到两端。 - 色相条是原生的
<input type="range">，键盘、触屏拖动和读屏都按浏览器的原生行为，读出“色相 120°”这样的值。 - 十六进制输入框在失焦或按 Enter 时校验，接受 #rgb、#rrggbb，大小写不限、可以省略 #；不合法时恢复成当前颜色，Esc 放弃这次编辑。
- 颜色本身之外还有文字：输入框里始终显示十六进制值，色板每个色块的名称就是它的色值。
- 屏幕取色按钮只在浏览器支持 EyeDropper 时出现（挂载后才检测，预渲染的页面和注水后的第一帧一致）。