logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.5.1
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic Usage
controlled mode
Clear Color
Custom Trigger
Color Format
Preset Colors
API
Color
FAQ
Questions about color assignment

ColorPicker

CheckboxDatePicker

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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

Basic Usage.

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

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

export default Demo;
Clear Color

Clear Color.

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

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

Encoding formats, support HEX, HSB, RGB.

expand codeexpand code
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.

expand codeexpand code
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.

expand codeexpand code
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.

expand codeexpand code
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].

PropertyDescriptionTypeDefault
formatFormat of colorrgb | hex | hsbhex
onFormatChangeCallback when format is changed(format: 'hex' | 'rgb' | 'hsb') => void-
valueValue of colorstring | Color-
defaultValueDefault value of colorstring | Color-
onChangeCallback when value is changed(value: Color, hex: string) => void-
allowClearAllow clearing color selectedbooleanfalse
presetsPreset colors{ label: ReactNode, colors: Array<string | Color> }[]-
childrenTrigger of ColorPickerReact.ReactNode-
triggerColorPicker trigger modehover | clickclick
openWhether to show popupboolean-
onOpenChangeCallback when open is changed(open: boolean) => void-
disabledDisable ColorPickerboolean-
placementPlacement of popuptop | topLeft | topRight | bottom | bottomLeft | bottomRightbottomLeft
arrowConfiguration for popup arrowboolean | { pointAtCenter: boolean }true

Color

PropertyDescriptionTypeDefault
toHexConvert to hex format characters() => string-
toHexStringConvert to hex format color string() => string-
toHsbConvert to hsb object() => ({ h: number, s: number, b: number, a number })-
toHsbStringConvert to hsb format color string() => string-
toRgbConvert to rgb object() => ({ r: number, g: number, b: number, a number })-
toRgbStringConvert 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.

HEX: #1677ff
HSB: hsb(215, 91%, 100%)
RGB: rgb(22, 119, 255)
#1677ff