When the palette is the product's, use a fixed set of swatches. A Radio group or Segmented control over eight named colors keeps the product on its palette and gives each choice a name.
When the platform picker is enough, use <input type="color">. It works with every keyboard and screen reader. Choose ColorPicker for presets, transparency, a format switch, gradients or a trigger that matches your form.
When the color has a meaning, offer the meaning. Let the reader pick “Urgent”, not “#F5222D”.

The value is an object, not a string

Read the value with toHexString(). The callbacks pass a color object, not a string. Read it with .toHexString(), .toRgbString() or .toHsbString(). A string passed in works as it is.

value and defaultValue take a hex string, an { r, g, b } or { h, s, b } object, or a color object.
onChange(value, css) also passes the CSS string as its second argument.
Use onChangeComplete for expensive updates. onChange fires on every move while dragging. onChangeComplete fires once on release, which suits a network write or a theme rebuild.
In a form, store a string. Form.Item stores what onChange passes, which is a color object. Add getValueFromEvent={(color) => color.toHexString()} to keep a hex string.
The color object also has .isGradient(), .getColors(), .equals(other) and .cleared.
Keep one notation in your state and convert at the edges.

Format

format takes hex (the default), rgb or hsb. It sets the panel's fields and the text the trigger shows with showText.

defaultFormat sets the starting notation and leaves the rest to the reader. format controls it, so update it from onFormatChange.
Lock the notation with disabledFormat. It removes the switcher from the panel. Use it when your backend stores one notation.
The format changes how the color is shown, not the color, so do not update state from onFormatChange.

Presets

presets takes groups of { label, colors }, with an optional key and defaultOpen. Each group is a collapsible section headed by its label.

Name each group for what it is: “Brand”, “Status”, “Recent”. The label is the only text that tells two blocks of swatches apart.
Groups start open. Pass defaultOpen: false for a long list like “Recent”.
colors are the values the reader picks from, so literal hexes are fine there.
Offer presets and the free picker together: the colors you want first, the rest for the reader who needs it.

Clearing and alpha

allowClear is off by default. Clearing sets transparency to full and marks the value cleared, and the trigger shows a diagonal line instead of a swatch.

Turn it on only where “no color” is a value you can store.
onClear fires with onChange. Check .cleared to tell a cleared value from a color made fully transparent.
disabledAlpha removes the transparency slider and field. Use it where the color cannot be translucent, like a chart series.

The trigger, and controlling open

The default trigger is a swatch in a bordered box. children replaces it.

showText takes a function. true shows the value in the active format. A function receives the color and returns your own text, like the value in the format your app stores.
Passing children drops the built-in trigger. showText, size and aria attributes on the picker go with it, so label your own trigger.
trigger is click by default, or hover. Keep click, so the panel does not open as the pointer passes.
open with onOpenChange controls the panel. placement defaults to bottomLeft.
The panel renders in a popup outside the component and keeps your theme wherever it lands.

Gradient mode changes the shape of your value

mode is single by default and also takes an array. mode={["single", "gradient"]} adds a switch at the top of the panel.

A gradient changes the shape of your value. With mode={["single", "gradient"]} the reader can pick a gradient, and the value then holds color stops instead of one color. .getColors() returns them.
Pass a gradient value and the picker switches to gradient mode itself, so do not keep a separate mode flag.
Offer a gradient only where the output can show one.

Size, and reshaping the panel

size also comes from a ConfigProvider or a Space.Compact around it. Set it on the picker only when it differs from its neighbors.
panelRender receives the panel and an extra object with components.Picker and components.Presets, to reorder the two, add a heading or show only one.
Style the panel through classNames. The panel renders in a popup outside the component, so [&_.ant-color-picker-*] selectors on className do not reach it. Use classNames (root, body, content, description, popup.root), or panelRender to change its structure.

Collapse DataGrid

On This Page

Usage