ColorPicker
colorpicker颜色选择 · react-colorful 内核 + HEX/RGB/HSL 多格式输出与切换器(零依赖派生) + 瑚琏 token 皮肤
用法
基础用法
色板拖拽 + 文本输入，非受控用 defaultValue 给初始色。
tsx
<ColorPicker defaultValue="#3b82f6" />输出格式
defaultFormat 决定回调与输入框格式：hex / rgb / hsl。
tsx
<>
<ColorPicker defaultValue="#22c55e" defaultFormat="rgb" />
<ColorPicker defaultValue="#8b5cf6" defaultFormat="hsl" />
</>精简：隐藏切换器 / 输入框
showFormatSwitcher / showInput 关掉非必要部件，只留色板。
tsx
<>
<ColorPicker defaultValue="#ef4444" showFormatSwitcher={false} />
<ColorPicker defaultValue="#06b6d4" showInput={false} />
</>禁用
disabled 罩层 + 屏蔽交互。
tsx
<ColorPicker defaultValue="#3b82f6" disabled />何时用
需要让用户从色域面板自由取任意颜色、并能在 HEX/RGB/HSL 间切换输出格式时用。若只是从一组预设色块里单选用更轻的 ColorSwatchPicker。
导入
ts
import { ColorPicker, parseColor, rgbToHex, rgbToHsl, formatColor } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | string | — | 受控颜色值。接受 hex / rgb() / hsl() 串，内部统一规范为 hex 作单一真源 |
| defaultValue | string | "#3b82f6" | 非受控初值 |
| format | "hex" | "rgb" | "hsl" | — | 受控的输出/展示格式，传入即进入格式受控模式 |
| defaultFormat | "hex" | "rgb" | "hsl" | "hex" | 非受控初始格式 |
| disabled | boolean | false | 禁用：罩层 + 屏蔽交互 |
| showInput | boolean | true | 是否显示文本输入 |
| showFormatSwitcher | boolean | true | 是否显示 HEX/RGB/HSL 格式切换器 |
| className | string | — | 透传到外壳 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (value: string) => void | 变更回调，参数为当前所选格式的字符串；切换格式也会触发 |
| onFormatChange | (format: ColorFormat) => void | 格式切换回调 |
禁忌 / 坑
onValueChange回传的是当前所选格式的字符串（hex/rgb/hsl），且切换格式本身也会触发回调——别假设永远是 hex。内部以 hex 为真源，但回调按 format 输出。- 受控
value可传任意 hex/rgb()/hsl() 串，组件内部归一为 hex 再渲染，回写时再转回所选格式。
相关
SecretField · Combobox · Listbox · Mentions · InputOTP · Rating
Playground
#3b82f6<ColorPicker defaultValue="#3b82f6" />