logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.3
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

ColorPicker
颜色选择器

用于选择颜色。
使用import { ColorPicker } from "antd";
源码components/color-picker
文档
编辑此页更新日志
版本自 5.5.0 起支持

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

当用户需要自定义颜色选择的时候使用。

代码演示

基本使用

最简单的使用方法。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
受控模式

通过 value 和 onChange 设置组件为受控模式,如果通过 onChangeComplete 受控则会锁定展示颜色。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
#1677FF
Custom Text (#1677ff)
渲染触发器文本

渲染触发器的默认文本, showText 为 true 时生效。自定义文本时,可以使用 showText 为函数的方式,返回自定义的文本。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
禁用透明度

禁用颜色透明度。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
自定义触发器

自定义颜色面板的触发器。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
HEX: #1677ff
HSB: hsb(215, 91%, 100%)
RGB: rgb(22, 119, 255)
颜色编码

编码格式,支持HEX、HSB、RGB。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Add title:
Horizontal layout:
自定义面板

通过 panelRender 自由控制面板的渲染。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
#1677FF
#1677FF
#1677FF
触发器尺寸大小

触发器有大、中、小三种尺寸。

通过设置 size 为 large small 分别把触发器设为大、小尺寸。若不设置 size,则尺寸默认为中。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
rgb(16,142,233) 0%rgb(135,208,104) 100%
rgb(16,142,233) 0%rgb(135,208,104) 100%
渐变色

通过 mode 设置颜色为单一颜色还是渐变色。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
5.20.0
#1677FF
禁用

设置为禁用状态。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
清除颜色

清除已选择的颜色。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
自定义触发事件

自定义颜色面板的触发事件,提供 click 和 hover 两个选项。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
预设颜色

设置颜色选择器的预设颜色。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

自 antd@5.5.0 版本开始提供该组件。

参数说明类型默认值版本
allowClear允许清除选择的颜色booleanfalse
arrow配置弹出的箭头boolean | { pointAtCenter: boolean }true
children颜色选择器的触发器React.ReactNode-
defaultValue颜色默认的值string | Color-
defaultFormat颜色格式默认的值rgb | hex | hsbhex5.9.0
disabled禁用颜色选择器boolean-
disabledAlpha禁用透明度boolean-5.8.0
disabledFormat禁用选择颜色格式boolean-
destroyTooltipOnHide关闭后是否销毁弹窗booleanfalse5.7.0
destroyOnHidden关闭后是否销毁弹窗booleanfalse5.25.0
format颜色格式rgb | hex | hsb-
mode选择器模式,用于配置单色与渐变'single' | 'gradient' | ('single' | 'gradient')[]single5.20.0
open是否显示弹出窗口boolean-
presets预设的颜色{ label: ReactNode, colors: Array<string | Color>, defaultOpen?: boolean, key?: React.Key }[]-defaultOpen: 5.11.0, key: 5.23.0
placement弹出窗口的位置同 Tooltips 组件的 placement 参数设计bottomLeft
panelRender自定义渲染面板(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode-5.7.0
showText显示颜色文本boolean | (color: Color) => React.ReactNode-5.7.0
size设置触发器大小large | middle | smallmiddle5.7.0
trigger颜色选择器的触发模式hover | clickclick
value颜色的值string | Color-
onChange颜色变化的回调(value: Color, css: string) => void-
onChangeComplete颜色选择完成的回调,通过 onChangeComplete 对 value 受控时拖拽不会改变展示颜色(value: Color) => void-5.7.0
onFormatChange颜色格式变化的回调(format: 'hex' | 'rgb' | 'hsb') => void-
onOpenChange当 open 被改变时的回调(open: boolean) => void-
onClear清除的回调() => void-5.6.0

Color

参数说明类型版本
toCssString转换成 CSS 支持的格式() => string5.20.0
toHex转换成 hex 格式字符,返回格式如:1677ff() => string-
toHexString转换成 hex 格式颜色字符串,返回格式如:#1677ff() => string-
toHsb转换成 hsb 对象() => ({ h: number, s: number, b: number, a number })-
toHsbString转换成 hsb 格式颜色字符串,返回格式如:hsb(215, 91%, 100%)() => string-
toRgb转换成 rgb 对象() => ({ r: number, g: number, b: number, a number })-
toRgbString转换成 rgb 格式颜色字符串,返回格式如:rgb(22, 119, 255)() => string-

FAQ

关于颜色赋值的问题

颜色选择器的值同时支持字符串色值和选择器生成的 Color 对象,但由于不同格式的颜色字符串互相转换会有精度误差问题,所以受控场景推荐使用选择器生成的 Color 对象来进行赋值操作,这样可以避免精度问题,保证取值是精准的,选择器也可以按照预期工作。