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.

TypeScript
JavaScript
import { ColorPicker } from 'antd';
import React from 'react';

const Demo = () => <ColorPicker />;

export default Demo;

Clear Color

Clear Color.

TypeScript
JavaScript
import { ColorPicker } from 'antd';
import React from 'react';

export default () => <ColorPicker allowClear />;

Color Format

Encoding formats, support HEX, HSB, RGB.

TypeScript
JavaScript
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>
  );
};

controlled mode

Set the component to controlled mode.

TypeScript
JavaScript
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;

Custom Trigger

Triggers for customizing color panels.

TypeScript
JavaScript
import { ColorPicker, Space, theme } from 'antd';
import type { Color } from 'antd/es/color-picker';
import React, { useMemo, useState } from 'react';

export default () => {
  const { token } = theme.useToken();
  const [color, setColor] = useState<Color | string>(token.colorPrimary);

  const bgColor = useMemo<string>(
    () => (typeof color === 'string' ? color : color.toHexString()),
    [color],
  );

  const divStyle: React.CSSProperties = {
    width: token.sizeMD,
    height: token.sizeMD,
    borderRadius: token.borderRadiusSM,
    backgroundColor: bgColor,
  };

  return (
    <ColorPicker value={color} onChange={setColor}>
      <Space>
        <div style={divStyle} />
        <span>{bgColor}</span>
      </Space>
    </ColorPicker>
  );
};

Preset Colors

Set the presets color of the color picker.

TypeScript
JavaScript
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: [],
      },
    ]}
  />
);

API

This component is available since [email protected].

Property	Description	Type	Default
format	Format of color	`rgb` \| `hex` \| `hsb`	`hex`
onFormatChange	Callback when `format` is changed	`(format: 'hex' \| 'rgb' \| 'hsb') => void`	-
value	Value of color	string \| `Color`	-
defaultValue	Default value of color	string \| `Color`	-
onChange	Callback when `value` is changed	`(value: Color, hex: string) => void`	-
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	-
onOpenChange	Callback when `open` is changed	`(open: boolean) => void`	-
disabled	Disable ColorPicker	boolean	-
placement	Placement of popup	`top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`bottomLeft`
arrow	Configuration for popup arrow	`boolean \| { pointAtCenter: boolean }`	`true`

Color

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

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: {hexString} </Col> </Space> </Row> <Row align="middle"> <Space> <Col> <ColorPicker format={formatHsb} value={colorHsb} onChange={setColorHsb} onFormatChange={setFormatHsb} /> </Col> <Col> HSB: {hsbString} </Col> </Space> </Row> <Row align="middle"> <Space> <Col> <ColorPicker format={formatRgb} value={colorRgb} onChange={setColorRgb} onFormatChange={setFormatRgb} /> </Col> <Col> RGB: {rgbString} </Col> </Space> </Row> </Space> ); };

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 { ColorPicker, Space, theme } from 'antd'; import type { Color } from 'antd/es/color-picker'; import React, { useMemo, useState } from 'react'; export default () => { const { token } = theme.useToken(); const [color, setColor] = useState<Color | string>(token.colorPrimary); const bgColor = useMemo<string>( () => (typeof color === 'string' ? color : color.toHexString()), [color], ); const divStyle: React.CSSProperties = { width: token.sizeMD, height: token.sizeMD, borderRadius: token.borderRadiusSM, backgroundColor: bgColor, }; return ( <ColorPicker value={color} onChange={setColor}> <Space> <div style={divStyle} /> {bgColor} </Space> </ColorPicker> ); };

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: [], }, ]} /> );

API

This component is available since [email protected].

Property	Description	Type	Default
format	Format of color	`rgb` \| `hex` \| `hsb`	`hex`
onFormatChange	Callback when `format` is changed	`(format: 'hex' \| 'rgb' \| 'hsb') => void`	-
value	Value of color	string \| `Color`	-
defaultValue	Default value of color	string \| `Color`	-
onChange	Callback when `value` is changed	`(value: Color, hex: string) => void`	-
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	-
onOpenChange	Callback when `open` is changed	`(open: boolean) => void`	-
disabled	Disable ColorPicker	boolean	-
placement	Placement of popup	`top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`bottomLeft`
arrow	Configuration for popup arrow	`boolean \| { pointAtCenter: boolean }`	`true`

Color

Property	Description	Type	Default
toHex	Convert to `hex` format characters	`() => string`	-
toHexString	Convert to `hex` format color string	`() => string`	-
toHsb	Convert to `hsb` object	`() => ({ h: number, s: number, b: number, a number })`	-
toHsbString	Convert to `hsb` format color string	`() => string`	-
toRgb	Convert to `rgb` object	`() => ({ r: number, g: number, b: number, a number })`	-
toRgbString	Convert to `rgb` format color string	`() => string`	-

FAQ

Questions about color assignment

Ant Design

ColorPicker

Ant Design

ColorPicker

When To Use

Examples

API

Color

FAQ

Questions about color assignment

When To Use

Examples

API

Color

FAQ

Questions about color assignment