表单

Color Picker

通用取色器组件：基于 HSV 色彩模型的饱和度/亮度面板与色相条拖拽选色，支持可选透明度（Alpha）选择、触屏操作、十六进制输入、40 色预设色卡、最近使用颜色记录，提供 Popover 弹出与 Inline 内嵌两种布局模式。

colorpickerhsvhexalphatransparencypaletteswatchformpopoverinline

快速预览

查看 Color Picker 组件的基本效果

#6366F1

基本用法

使用 Color Picker 组件的基础示例

导入组件

1import { ColorPicker } from "@/components/qiuye-ui/color-picker";
2import { useState } from "react";

使用组件

1const [color, setColor] = useState("#6366F1");
2
3return (
4  <div className="flex items-center gap-4">
5    <ColorPicker value={color} onChange={setColor} />
6    <span className="font-mono text-sm">{color}</span>
7  </div>
8);

组件演示

查看组件的各种使用方式和效果

基础用法

受控模式，点击色块弹出取色面板

#6366F1

非受控模式

使用 defaultValue 设置初始颜色，无需维护外部状态

触发器尺寸

三种触发器大小：sm / md / lg

smmdlg

内嵌模式

设置 mode="inline" 直接将取色面板嵌入页面

预设

当前颜色: #8B5CF6

自定义预设色卡

传入自定义颜色数组替换默认预设

#0693E3

透明度选择

启用 showAlpha 后可选择颜色透明度，输出 8 位十六进制格式 (#RRGGBBAA)

#6366F180

透明度 + 内嵌模式

showAlpha 与 mode="inline" 可组合使用

预设

当前颜色: #3B82F6B3

极简模式

隐藏预设色卡和最近使用，仅保留 HSV 面板与 Hex 输入

实际应用：颜色配置

使用 ColorPicker 配置背景色与文字色，实时预览效果

背景色#6366F1

文字色#FFFFFF

预览效果