颜色选择器
用眼睛、hex 或预设选择品牌色、标签色或图表系列色。
让用户凭眼睛、用十六进制值或从你的预设中选择品牌色、标签颜色或图表系列颜色。value / onChange / swatches / showAlpha 均可配置。
安装
npx @joyui/cli add color-picker --yes或通过 JoyUI MCP / CLI 安装。
内联选择器
受控 ColorPicker：饱和度场、色相轨、hex 与预设色板。
色井弹出
ColorWell 是圆形色板，点击后在弹出层打开同一编辑器——适合设置行、标签色。
主题色
透明度
showAlpha 增加不透明度轨（棋盘底）。
应用场景
主题定制或标签设置：多行 ColorWell 绑定不同业务字段（品牌 / 标签 / 图表系列）。
API
ColorPicker / ColorWell
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 受控颜色（hex 或 React Aria Color）。 | string | Color | — | — |
| defaultValue | 非受控初始色。 | string | Color | — | — |
| onChange | 颜色变化回调。 | (color: Color) => void | — | — |
| swatches | 预设色板（hex 数组）。 | string[] | — | — |
| showAlpha | 显示不透明度轨。 | boolean | true · false | false |
| aria-label (Well) | 色井无障碍名称（必填）。 | string | — | — |
| wellClassName | 色井圆形尺寸类名。 | string | — | — |
| className | 合并到根节点的额外类名。 | string | — | — |