ColorPicker 颜色选择器

Rue 的 ColorPicker 不照搬其他组件库的弹层视觉，但把核心能力补充到足够实用：受控与非受控、格式切换、透明度、预设色、自定义触发器和自定义面板都已经可以直接用。

格式切换

HEX / RGB / HSB

同一块面板里切换编码，复制和录入都更顺手。

预设分组

品牌色与透明层级

可以把常用色板直接收进面板，不用每次重新调。

面板重组

展示默认内核，自由重组布局

可以用内建 Picker / Presets，再插入自己的说明和状态卡片。

# 基础受控模式

最常用的写法：外部维护色值，触发器直接显示当前结果，并支持一键清空。

#1677ff

Preview

CTA Accent

CSS String

rgb(22, 119, 255)

# 尺寸

通过 size 调整触发器尺寸，支持 xs / sm / md / lg / xl，也支持 small / middle / large 语义别名。

#06b6d4

#22c55e

#1677ff

#8b5cf6

#f97316

语义别名

# 格式切换与透明度

第一块保持 alpha 并监听格式切换；第二块关闭透明度，用更稳定的品牌色录入。

Translucent UI Layer

当前格式 RGB

alpha enabled

alpha 72%

Brand Lock

适合按钮主色和规范色卡

alpha off

#22c55e

# 预设色与自定义触发器

把高频品牌色和透明层级放进分组预设里，触发器外观则完全交给业务上下文。

Campaign Accent

用于按钮、徽标和动效高光

custom trigger

Preset Context

Launch Warm#f97316

# 重组默认面板

panelRender 不是完全推倒重写，而是复用组件内建的 Picker / Presets 两块，再插入业务说明。

Popup State

closed

Selected CSS

#7c3aed

API

属性	说明	类型	默认值
`value / defaultValue`	受控与非受控颜色值，支持字符串、Color 实例、null，以及渐变 stop 数组。	`string \| Color \| null \| Array<{ color; percent }>`	`'#1677ff'`
`open / defaultOpen`	控制弹层显隐，也支持默认展开。	`boolean`	`false`
`format / defaultFormat`	切换输出格式，支持 hex / rgb / hsb 三种编码。	`'hex' \| 'rgb' \| 'hsb'`	`'hex'`
`mode`	配置单色或渐变模式，也可以同时开放两种模式切换。	`'single' \| 'gradient' \| Array<'single' \| 'gradient'>`	`'single'`
`disabledAlpha / disabledFormat`	关闭透明度滑杆或格式切换条，让交互更聚焦。	`boolean`	`false`
`arrow`	配置弹层箭头，也支持 pointAtCenter 贴合触发器中心。	`boolean \| { pointAtCenter?: boolean }`	`true`
`showText`	在触发器里显示当前色值，也可传入回调自定义文本。	`boolean \| (color) => any`	`false`
`size`	触发器尺寸，支持 Button 同款 xs / sm / md / lg / xl，并支持 large / medium / small。	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'large' \| 'medium' \| 'middle' \| 'small'`	`'md'`
`allowClear`	允许清除当前颜色，支持传入 clearIcon 自定义清除图标。	`boolean \| { clearIcon?: any }`	`false`
`presets`	预设颜色分组，支持 key、defaultOpen、透明色与渐变 stop 数组。	`Array<{ label; colors: Array<string \| Color \| Array<{ color; percent }>>; defaultOpen?; key? }>`	`[]`
`trigger / placement`	配置点击或悬浮触发，并支持 12 个 ant 风格 placement。	`'click' \| 'hover' / 'top' \| 'topLeft' \| 'topRight' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'left' \| 'leftTop' \| 'leftBottom' \| 'right' \| 'rightTop' \| 'rightBottom'`	`'click' / 'bottomLeft'`
`getPopupContainer / autoAdjustOverflow`	自定义弹层挂载容器，并控制弹层是否自动避让视口。	`((triggerNode?) => HTMLElement \| false \| null) \| HTMLElement \| false \| null / boolean`	`'body' / true`
`destroyTooltipOnHide / destroyOnHidden`	关闭后销毁弹层节点，支持 ant 的别名与新属性名。	`boolean`	`false`
`panelRender`	重组默认面板，extra.components 里暴露 Picker 与 Presets 两块内建内容。	`(panel, extra) => any`	`-`
`onChange / onChangeComplete`	颜色实时变化与交互完成时触发，onChange 第二个参数直接返回 CSS 字符串。	`(color, css) => void / (color) => void`	`-`
`onFormatChange / onOpenChange / onClear`	分别响应格式切换、弹层开合与清空行为。	`(...) => void`	`-`
`classNames / styles`	面向 trigger、popup、panel、preset 等语义节点做样式增强。	`object`	`-`