logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • 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
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

ColorPicker

Used for color selection.
Importimport { ColorPicker } from "antd";
Sourcecomponents/color-picker
Docs
Edit this pageChangelog
Versionsupported since 5.5.0

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

Used when the user needs to make a customized color selection.

Examples

API

Common props ref:Common props

This component is available since antd@5.5.0.

PropertyDescriptionTypeDefaultVersion
allowClearAllow clearing color selectedbooleanfalse
arrowConfiguration for popup arrowboolean | { pointAtCenter: boolean }true
childrenTrigger of ColorPickerReact.ReactNode-
defaultValueDefault value of colorstring | Color-
defaultFormatDefault format of colorrgb | hex | hsbhex5.9.0
disabledDisable ColorPickerboolean-
disabledAlphaDisable Alphaboolean-5.8.0
disabledFormatDisable format of colorboolean-
destroyTooltipOnHideWhether destroy dom when closebooleanfalse5.7.0
destroyOnHiddenWhether destroy dom when closebooleanfalse5.25.0
formatFormat of colorrgb | hex | hsb-
modeConfigure single or gradient color'single' | 'gradient' | ('single' | 'gradient')[]single5.20.0
openWhether to show popupboolean-
presetsPreset colors{ label: ReactNode, colors: Array<string | Color>, defaultOpen?: boolean, key?: React.Key }[]-defaultOpen: 5.11.0, key: 5.23.0
placementPlacement of popupThe design of the placement parameter is the same as the Tooltips component.bottomLeft
panelRenderCustom Render Panel(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode-5.7.0
showTextShow color textboolean | (color: Color) => React.ReactNode-5.7.0
sizeSetting the trigger sizelarge | middle | smallmiddle5.7.0
triggerColorPicker trigger modehover | clickclick
valueValue of colorstring | Color-
onChangeCallback when value is changed(value: Color, css: string) => void-
onChangeCompleteCalled when color pick ends. Will not change the display color when value controlled by onChangeComplete(value: Color) => void-5.7.0
onFormatChangeCallback when format is changed(format: 'hex' | 'rgb' | 'hsb') => void-
onOpenChangeCallback when open is changed(open: boolean) => void-
onClearCalled when clear() => void-5.6.0

Color

PropertyDescriptionTypeVersion
toCssStringConvert to CSS support format() => string5.20.0
toHexConvert to hex format characters, the return type like: 1677ff() => string-
toHexStringConvert to hex format color string, the return type like: #1677ff() => string-
toHsbConvert to hsb object() => ({ h: number, s: number, b: number, a number })-
toHsbStringConvert to hsb format color string, the return type like: hsb(215, 91%, 100%)() => string-
toRgbConvert to rgb object() => ({ r: number, g: number, b: number, a number })-
toRgbStringConvert to rgb format color string, the return type like: rgb(22, 119, 255)() => string-

FAQ

Questions about color assignment

The value of the color selector supports both string color values and selector-generated Color objects. However, since there is a precision error when converting color strings of different formats to each other, it is recommended to use selector-generated Color objects for assignment operations in controlled scenarios, so that the precision problem can be avoided and the values are guaranteed to be accurate and the selector can work as expected.

Basic Usage

Basic Usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
controlled mode

Set the component to controlled mode. Will lock the display color if controlled by onChangeComplete.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Rendering Trigger Text

Renders the default text of the trigger, effective when showText is true. When customizing text, you can use showText as a function to return custom text.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Disabled Alpha

Disabled color alpha.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Trigger

Triggers for customizing color panels.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Color Format

Encoding formats, support HEX, HSB, RGB.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Render Panel

Rendering of the free control panel via panelRender.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Trigger size

Ant Design supports three trigger sizes: small, default and large.

If a large or small trigger is desired, set the size property to either large or small respectively. Omit the size property for a trigger with the default size.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Line Gradient

Set the color to a single or a gradient color via mode.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.20.0
Disable

Set to disabled state.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Clear Color

Clear Color.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Trigger Event

Triggers event for customizing color panels, provide options click and hover.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Preset Colors

Set the presets color of the color picker.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
#1677FF
Custom Text (#1677ff)
HEX: #1677ff
HSB: hsb(215, 91%, 100%)
RGB: rgb(22, 119, 255)
Add title:
Horizontal layout:
#1677FF
#1677FF
#1677FF
rgb(16,142,233) 0%rgb(135,208,104) 100%
rgb(16,142,233) 0%rgb(135,208,104) 100%
#1677FF