logoMogu Design

⌘ K
  • Design
  • Development
  • Components
  • 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
Custom Trigger Event
Color Format
Preset Colors
API
Color
FAQ
Questions about color assignment

ColorPicker

CheckboxDatePicker

Components providing color selection, Available since 5.5.0.

When To Use

Used when the user needs to customize the color selection.

Examples

API

This component is available since antd@5.5.0.

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

Color

PropertyDescriptionTypeDefault
toHexConvert to hex format characters, the return type like: 1677ff() => string-
toHexStringConvert to hex format color string, the return type like: #1677ff() => string-
toHsbConvert to hsb object() => ({ h: number, s: number, b: number, a number })-
toHsbStringConvert to hsb format color string, the return type like: hsb(215, 91%, 100%)() => string-
toRgbConvert to rgb object() => ({ r: number, g: number, b: number, a number })-
toRgbStringConvert to rgb format color string, the return type like: rgb(22, 119, 255)() => 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.

Basic Usage

Basic Usage.

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

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

export default Demo;
Clear Color

Clear Color.

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

export default () => <ColorPicker allowClear />;
Custom Trigger Event

Triggers event for customizing color panels, provide options click and hover.

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

const Demo = () => <ColorPicker trigger="hover" />;

export default Demo;
Preset Colors

Set the presets color of the color picker.

expand codeexpand code
TypeScript
JavaScript
import { ColorPicker } from 'mogud';
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: [],
      },
    ]}
  />
);
controlled mode

Set the component to controlled mode.

expand codeexpand code
TypeScript
JavaScript
import { ColorPicker, theme } from 'mogud';
import type { Color } from 'mogud/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 { Button, ColorPicker, theme } from 'mogud';
import type { Color } from 'mogud/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;
Color Format

Encoding formats, support HEX, HSB, RGB.

expand codeexpand code
TypeScript
JavaScript
import { Col, ColorPicker, Row, Space } from 'mogud';
import type { Color, ColorPickerProps } from 'mogud/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>
  );
};
HEX: #1677ff
HSB: hsb(215, 91%, 100%)
RGB: rgb(22, 119, 255)