# ColorPicker

- Page: https://jiguang132.com/resources/arco-design/docs/color-picker
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Used for select and display colors

## Install

```bash
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](input#input)['size'] |`default`|-|
|className|Additional css class|string \| string[] |`-`|-|
|defaultValue|The initial input content|string \| [GradientColor](#gradientcolor)[] |`-`|-|
|historyColors|Color array of history colors|string[] |`-`|-|
|mode|Whether to use single color or gradient color mode|[ColorPickerMode](#colorpickermode) \| [ColorPickerMode](#colorpickermode)[] |`single`|-|
|presetColors|Color array of preset colors|string[] |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|triggerProps|All `Trigger` component props|Partial<[TriggerProps](trigger#trigger)> |`-`|-|
|value|The input content value|string \| [GradientColor](#gradientcolor)[] |`-`|-|
|onChange|Callback when the color value changes|(value: string \| [GradientColor](#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](#gradientcolor)[] }) => ReactNode) |`-`|2.60.0|

### GradientColor

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

### ColorPickerMode

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

---

Index of all JGuang resources: https://jiguang132.com/llms.txt