Components providing color selection, Available since 5.5.0
.
Used when the user needs to customize the color selection.
import { ColorPicker } from 'antd';
import React from 'react';
const Demo = () => <ColorPicker />;
export default Demo;
import { ColorPicker } from 'antd';
import React from 'react';
export default () => <ColorPicker allowClear />;
import { ColorPicker } from 'antd';
import React from 'react';
const Demo = () => <ColorPicker trigger="hover" />;
export default Demo;
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: [],
},
]}
/>
);
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;
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;
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.