颜色选择器 ColorPicker

用于选择和展示颜色

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

• 基础用法：基本使用方法。
• 受控模式：颜色选择器面板会在打开时同步输入框中的值。
• 尺寸：颜色选择器定义了四种尺寸（mini,small, default, large），分别为 24px，28px，32px，36px。
• 禁用：设置 disabled 禁用整个选择器。
• 禁用透明通道：设置 disabledAlpha 以隐藏 Alpha 值滑条和数值显示。 如果 defaultValue 传入的初始色值包含 Alpha，那么初次显示时，色块会保留传入的 Alpha。当用户在取色版上取色时，Alpha 将被重置并锁定为100。
• 颜色格式：通过 format 设置颜色值的格式，支持 hex 和 rgb。
• 渐变色：通过 mode 设置颜色为单一颜色或渐变色。
• 预设颜色和历史颜色：可以通过 showPreset 和 showHistory 开启预设颜色和历史颜色区域。历史颜色需要用户自行控制展示内容。
• 自定义触发器：可以自定义颜色选择器的触发元素，此时与颜色输入框相关的属性将会失效。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

ColorPicker

GradientColor

export interface GradientColor {
  color: string;
  percent: number;
}

ColorPickerMode

export enum ColorPickerMode {
  Single = "single",
  Gradient = "gradient",
}