ColorPicker

ColorPicker accepts hex, rgba, hsla, hsba, and oklch CSS color strings. Its panel includes a color-space area, channel sliders, format tabs, an eyedropper, and an editable copy field. format controls the output string; colorSpace="oklch" keeps palette interaction in native OKLCH channels, so changing the area or sliders does not round-trip through sRGB. defaultFormat sets the initial format when format is uncontrolled. Use formats to limit the copy tabs; the selected format is included automatically.

import { ColorPicker } from '@manti-ui/react';

export default function ColorPickerBasic() {
  return <ColorPicker label="Accent color" defaultValue="#7c3aed" />;
}

Sizes

size sets the trigger's height, padding, type, and swatch. The panel keeps its own canvas; its channel controls use the same size channel as the trigger.

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Optional field label.
`value`	`string`	—	Controlled value as a CSS color string.
`defaultValue`	`string`	`'#7c3aed'`	Initial CSS color value for uncontrolled usage. Hex, rgba, hsla, hsba, and oklch strings are accepted.
`format`	`ColorPickerFormat`	`'rgba'`	Output format used by the trigger, editable value field, selected copy tab, and onValueChange callback.
`defaultFormat`	`ColorPickerFormat`	`'rgba'`	Initial output format when format is uncontrolled. The selected format is always included in the copy tabs.
`colorSpace`	`ColorSpaceId`	—	Color space used by the interactive palette. `oklch` keeps area and channel changes in native OKLCH values.
`formats`	`readonly ColorPickerFormat[]`	`['hex', 'rgba', 'hsla']`	Formats shown in the copy tabs. The selected format is included automatically when it is not in this list.
`onFormatChange`	`(format: ColorPickerFormat) => void`	—	Called when a copy tab changes the selected color format.
`onValueChange`	`(value: string) => void`	—	Called whenever the value changes; emits a CSS color string in the selected format.
`showValueText`	`boolean`	`true`	Show the formatted value text (e.g. rgba(...)) next to the swatch in the trigger. Set to false to show only the color swatch.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger size: height, padding, type, and swatch. The panel receives the same size channel.
`placement`	`Placement`	`'bottom-start'`	Placement of the panel relative to the control.
`disabled`	`boolean`	—	Disable the control.
`name`	`string`	—	Form field name for the hidden input.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="color-picker"][data-part="root"]`	The field wrapper.
`label`	`[data-scope="color-picker"][data-part="label"]`	The field label.
`trigger`	`[data-scope="color-picker"][data-part="trigger"]`	The button that opens the picker; shows the current swatch and value.
`value-swatch`	`[data-scope="color-picker"][data-part="value-swatch"]`	The current-color preview chip in the trigger.
`positioner`	`[data-scope="color-picker"][data-part="positioner"]`	Positions the floating panel.
`content`	`[data-scope="color-picker"][data-part="content"]`	The translucent picker panel.
`area`	`[data-scope="color-picker"][data-part="area"]`	The two-dimensional color selection area; in OKLCH, its axes are chroma and lightness.
`area-background`	`[data-scope="color-picker"][data-part="area-background"]`	The hue-tinted backdrop of the area.
`area-thumb`	`[data-scope="color-picker"][data-part="area-thumb"]`	The draggable area handle.
`channel-slider`	`[data-scope="color-picker"][data-part="channel-slider"]`	A color-space channel slider track wrapper.
`channel-slider-track`	`[data-scope="color-picker"][data-part="channel-slider-track"]`	The gradient track of a channel slider.
`channel-slider-thumb`	`[data-scope="color-picker"][data-part="channel-slider-thumb"]`	The draggable channel-slider handle.
`transparency-grid`	`[data-scope="color-picker"][data-part="transparency-grid"]`	The checkerboard behind the alpha slider.
`copy-row`	`[data-scope="color-picker"][data-part="copy-row"]`	Row holding the format tabs (a nested Manti Tabs) and the eyedropper Button; a Manti Clipboard below it shows the color in the selected format.

Tokens

Token	Controls
`--manti-color-picker-height`	height
`--manti-color-picker-padding-x`	padding x
`--manti-color-picker-swatch-size`	swatch size
`--manti-color-picker-panel-width`	panel width
`--manti-color-picker-area-height`	area height

Last updated 13 September 2026