ColorPicker

Used for select and display colors

Install

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

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Basic usage.
Controlled mode: The color picker panel synchronizes the values in the input boxes when opened.
Size: ColorPicker defines four sizes (mini, small, default, large), which are 24px, 28px, 32px, and 36px.
Disabled: Set disabled to disable the selector.
DisabledAlpha: Set disabledAlpha to hide the slider and value for Alpha. If the defaultValue has alpha (like #165DFF80), then the alpha value is retained for the intial render. The alpha value is reset and locked to 100 once the user clicks on the palette.
Color forma: Set the format of the color value through format, supporting hex and rgb.
Gradient color: Set the color mode to single color or gradient color through mode.
Preset & History: The preset color and history color areas can be opened through showPreset and showHistory. Historical colors require users to control the display content themselves.
Custom trigger: You can customize the trigger element of the color picker, and the properties related to the color input box will be invalid.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

ColorPicker

Property	Description	Type	DefaultValue	Version
defaultPopupVisible	Whether the confirmation box is visible by default	boolean	`-`	-
disabled	disabled	boolean	`-`	-
disabledAlpha	Disable transparency channel	boolean	`-`	-
popupVisible	Whether the confirmation box is visible	boolean	`-`	-
showHistory	Show history colors	boolean	`-`	-
showPreset	Show preset colors	boolean	`-`	-
showText	Show color value	boolean	`-`	-
unmountOnExit	Whether to umount the node on hiding	boolean	`true`	-
format	Color value format	'hex' \| 'rgb'	`-`	-
size	The size of the input box	InputProps['size']	`default`	-
className	Additional css class	string \| string[]	`-`	-
defaultValue	The initial input content	string \| GradientColor[]	`-`	-
historyColors	Color array of history colors	string[]	`-`	-
mode	Whether to use single color or gradient color mode	ColorPickerMode \| ColorPickerMode[]	`single`	-
presetColors	Color array of preset colors	string[]	`-`	-
style	Additional style	CSSProperties	`-`	-
triggerProps	All `Trigger` component props	Partial<TriggerProps>	`-`	-
value	The input content value	string \| GradientColor[]	`-`	-
onChange	Callback when the color value changes	(value: string \| GradientColor[]) => void	`-`	-
onVisibleChange	Callback when popup shown or hidden.	(visible: boolean) => void	`-`	-
renderFooter	Customize the bottom content of the panel	() => ReactNode	`-`	2.62.0
triggerElement	The trigger element which executes the dropdown action.	ReactNode \| ((params: { value: string \| GradientColor[] }) => ReactNode)	`-`	2.60.0

GradientColor

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

ColorPickerMode

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