ColorPicker

Components providing color selection, Available since 5.5.0.

When To Use

Used when the user needs to customize the color selection.

Examples

Basic Usage

Basic Usage.

controlled mode

Set the component to controlled mode.

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.

Disabled Alpha

Disabled color alpha.

Custom Trigger

Triggers for customizing color panels.

Color Format

Encoding formats, support HEX, HSB, RGB.

Custom Render Panel

Rendering of the free control panel via panelRender.

Trigger size

The trigger has three sizes: large, medium and small. If size is not set, the size will be medium.

Color change completed

The callback will be called only when the color selection is completed.

Disable

Set to disabled state.

Clear Color

Clear Color.

Custom Trigger Event

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

Preset Colors

Set the presets color of the color picker.

API

Common props ref：Common props

This component is available since antd@5.5.0.

Property	Description	Type	Default	Version
allowClear	Allow clearing color selected	boolean	false
arrow	Configuration for popup arrow	`boolean \| { pointAtCenter: boolean }`	true
children	Trigger of ColorPicker	React.ReactNode	-
defaultValue	Default value of color	string \| `Color`	-
disabled	Disable ColorPicker	boolean	-
disabledAlpha	Disable Alpha	boolean	-	5.8.0
destroyTooltipOnHide	Whether destroy popover when hidden	`boolean`	false	5.7.0
format	Format of color	`rgb` \| `hex` \| `hsb`	`hex`
open	Whether to show popup	boolean	-
presets	Preset colors	`{ label: ReactNode, colors: Array<string \| Color> }[]`	-
placement	Placement of popup	`top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`bottomLeft`
panelRender	Custom Render Panel	`(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode`	-	5.7.0
showText	Show color text	boolean \| `(color: Color) => React.ReactNode`	-	5.7.0
size	Setting the trigger size	`large` \| `middle` \| `small`	`middle`	5.7.0
trigger	ColorPicker trigger mode	`hover` \| `click`	`click`
value	Value of color	string \| `Color`	-
onChange	Callback when `value` is changed	`(value: Color, hex: string) => void`	-
onChangeComplete	Called when color pick ends	`(value: Color) => void`	-	5.7.0
onFormatChange	Callback when `format` is changed	`(format: 'hex' \| 'rgb' \| 'hsb') => void`	-
onOpenChange	Callback when `open` is changed	`(open: boolean) => void`	-
onClear	Called when clear	`() => void`	-	5.6.0

Color

Property	Description	Type	Default
toHex	Convert to `hex` format characters, the return type like: `1677ff`	`() => string`	-
toHexString	Convert to `hex` format color string, the return type like: `#1677ff`	`() => string`	-
toHsb	Convert to `hsb` object	`() => ({ h: number, s: number, b: number, a number })`	-
toHsbString	Convert to `hsb` format color string, the return type like: `hsb(215, 91%, 100%)`	`() => string`	-
toRgb	Convert to `rgb` object	`() => ({ r: number, g: number, b: number, a number })`	-
toRgbString	Convert 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.

API

Common props ref：Common props

This component is available since antd@5.5.0.

Property	Description	Type	Default	Version
allowClear	Allow clearing color selected	boolean	false
arrow	Configuration for popup arrow	`boolean \| { pointAtCenter: boolean }`	true
children	Trigger of ColorPicker	React.ReactNode	-
defaultValue	Default value of color	string \| `Color`	-
disabled	Disable ColorPicker	boolean	-
disabledAlpha	Disable Alpha	boolean	-	5.8.0
destroyTooltipOnHide	Whether destroy popover when hidden	`boolean`	false	5.7.0
format	Format of color	`rgb` \| `hex` \| `hsb`	`hex`
open	Whether to show popup	boolean	-
presets	Preset colors	`{ label: ReactNode, colors: Array<string \| Color> }[]`	-
placement	Placement of popup	`top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`bottomLeft`
panelRender	Custom Render Panel	`(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode`	-	5.7.0
showText	Show color text	boolean \| `(color: Color) => React.ReactNode`	-	5.7.0
size	Setting the trigger size	`large` \| `middle` \| `small`	`middle`	5.7.0
trigger	ColorPicker trigger mode	`hover` \| `click`	`click`
value	Value of color	string \| `Color`	-
onChange	Callback when `value` is changed	`(value: Color, hex: string) => void`	-
onChangeComplete	Called when color pick ends	`(value: Color) => void`	-	5.7.0
onFormatChange	Callback when `format` is changed	`(format: 'hex' \| 'rgb' \| 'hsb') => void`	-
onOpenChange	Callback when `open` is changed	`(open: boolean) => void`	-
onClear	Called when clear	`() => void`	-	5.6.0

Color

Property	Description	Type	Default
toHex	Convert to `hex` format characters, the return type like: `1677ff`	`() => string`	-
toHexString	Convert to `hex` format color string, the return type like: `#1677ff`	`() => string`	-
toHsb	Convert to `hsb` object	`() => ({ h: number, s: number, b: number, a number })`	-
toHsbString	Convert to `hsb` format color string, the return type like: `hsb(215, 91%, 100%)`	`() => string`	-
toRgb	Convert to `rgb` object	`() => ({ r: number, g: number, b: number, a number })`	-
toRgbString	Convert to `rgb` format color string, the return type like: `rgb(22, 119, 255)`	`() => string`	-

FAQ

Questions about color assignment

Namu Design

ColorPicker

Namu Design

ColorPicker

When To Use

Examples

API

Color

FAQ

Questions about color assignment

When To Use

Examples

API

Color

FAQ

Questions about color assignment

ColorPickerChangelog

ColorPickerChangelog

When To Use

Examples

API

Color

FAQ

Questions about color assignment

When To Use

Examples

API

Color

FAQ

Questions about color assignment

ColorPicker

ColorPicker