Components providing color selection, Available since 5.5.0.
Used when the user needs to customize the color selection.
Basic Usage.
import { ColorPicker } from 'antd';
import React from 'react';
const Demo = () => <ColorPicker />;
export default Demo;
Clear Color.
import { ColorPicker } from 'antd';
import React from 'react';
export default () => <ColorPicker allowClear />;
Triggers event for customizing color panels, provide options click and hover.
import { ColorPicker } from 'antd';
import React from 'react';
const Demo = () => <ColorPicker trigger="hover" />;
export default Demo;
Set the presets color of the color picker.
import { ColorPicker } from 'antd';
import React from 'react';
export default () => (
<ColorPicker
presets={[
{
label: 'Recommended',
colors: [
'#000000',
'#000000E0',
'#000000A6',
'#00000073',
'#00000040',
'#00000026',
'#0000001A',
'#00000012',
'#0000000A',
'#00000005',
'#F5222D',
'#FA8C16',
'#FADB14',
'#8BBB11',
'#52C41A',
'#13A8A8',
'#1677FF',
'#2F54EB',
'#722ED1',
'#EB2F96',
'#F5222D4D',
'#FA8C164D',
'#FADB144D',
'#8BBB114D',
'#52C41A4D',
'#13A8A84D',
'#1677FF4D',
'#2F54EB4D',
'#722ED14D',
'#EB2F964D',
],
},
{
label: 'Recent',
colors: [],
},
]}
/>
);
Set the component to controlled mode.
import { ColorPicker, theme } from 'antd';
import type { Color } from 'antd/es/color-picker';
import React, { useState } from 'react';
const Demo: React.FC = () => {
const { token } = theme.useToken();
const [color, setColor] = useState<Color | string>(token.colorPrimary);
return <ColorPicker value={color} onChange={setColor} />;
};
export default Demo;
Triggers for customizing color panels.
import { Button, ColorPicker, theme } from 'antd';
import type { Color } from 'antd/es/color-picker';
import React, { useMemo, useState } from 'react';
const Demo: React.FC = () => {
const { token } = theme.useToken();
const [color, setColor] = useState<Color | string>(token.colorPrimary);
const bgColor = useMemo<string>(
() => (typeof color === 'string' ? color : color.toHexString()),
[color],
);
const btnStyle: React.CSSProperties = {
backgroundColor: bgColor,
};
return (
<ColorPicker value={color} onChange={setColor}>
<Button type="primary" style={btnStyle}>
open
</Button>
</ColorPicker>
);
};
export default Demo;
Encoding formats, support HEX, HSB, RGB.
import { Col, ColorPicker, Row, Space } from 'antd';
import type { Color, ColorPickerProps } from 'antd/es/color-picker';
import React, { useMemo, useState } from 'react';
export default () => {
const [colorHex, setColorHex] = useState<Color | string>('#1677ff');
const [colorHsb, setColorHsb] = useState<Color | string>('hsb(215, 91%, 100%)');
const [colorRgb, setColorRgb] = useState<Color | string>('rgb(22, 119, 255)');
const [formatHex, setFormatHex] = useState<ColorPickerProps['format']>('hex');
const [formatHsb, setFormatHsb] = useState<ColorPickerProps['format']>('hsb');
const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb');
const hexString = useMemo(
() => (typeof colorHex === 'string' ? colorHex : colorHex.toHexString()),
[colorHex],
);
const hsbString = useMemo(
() => (typeof colorHsb === 'string' ? colorHsb : colorHsb.toHsbString()),
[colorHsb],
);
const rgbString = useMemo(
() => (typeof colorRgb === 'string' ? colorRgb : colorRgb.toRgbString()),
[colorRgb],
);
return (
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
<Row align="middle">
<Space>
<Col>
<ColorPicker
format={formatHex}
value={colorHex}
onChange={setColorHex}
onFormatChange={setFormatHex}
/>
</Col>
<Col>
HEX: <span>{hexString}</span>
</Col>
</Space>
</Row>
<Row align="middle">
<Space>
<Col>
<ColorPicker
format={formatHsb}
value={colorHsb}
onChange={setColorHsb}
onFormatChange={setFormatHsb}
/>
</Col>
<Col>
HSB: <span>{hsbString}</span>
</Col>
</Space>
</Row>
<Row align="middle">
<Space>
<Col>
<ColorPicker
format={formatRgb}
value={colorRgb}
onChange={setColorRgb}
onFormatChange={setFormatRgb}
/>
</Col>
<Col>
RGB: <span>{rgbString}</span>
</Col>
</Space>
</Row>
</Space>
);
};
This component is available since
antd@5.5.0.
| Property | Description | Type | Default |
|---|---|---|---|
| format | Format of color | rgb | hex | hsb | hex |
| value | Value of color | string | Color | - |
| defaultValue | Default value of color | string | Color | - |
| allowClear | Allow clearing color selected | boolean | false |
| presets | Preset colors | { label: ReactNode, colors: Array<string | Color> }[] | - |
| children | Trigger of ColorPicker | React.ReactNode | - |
| trigger | ColorPicker trigger mode | hover | click | click |
| open | Whether to show popup | boolean | - |
| disabled | Disable ColorPicker | boolean | - |
| placement | Placement of popup | top | topLeft | topRight | bottom | bottomLeft | bottomRight | bottomLeft |
| arrow | Configuration for popup arrow | boolean | { pointAtCenter: boolean } | true |
| onChange | Callback when value is changed | (value: Color, hex: string) => void | - |
| 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 | - |
| 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 | - |
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.