ColorPicker

Hex colour picking with a saturation area, hue and alpha sliders, presets and the EyeDropper API.

import { ColorPicker } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Entry

Basic

Loading preview

APIs

ColorPicker properties

alpha: boolean
Defaults to false.
children: ReactElement<unknown, string | JSXElementConstructor<any>>
className: string
defaultValue: string
disabled: boolean
onChange: (hex: string) => void
onChangeComplete: (hex: string) => void
presets: string[]
showText: boolean
size: 'small' | 'large' | 'middle'
Defaults to "middle".
style: CSSProperties
value: string

Values are lowercase hex strings; with alpha they are always 8 digits. onChange fires while dragging, onChangeComplete when the pointer is released or an input commits, so write to a store in onChangeComplete. Pass a single element as children to use your own trigger.

Migrating from antd ColorPicker

Color objects → hex strings; onChangeComplete={(c) => c.toHexString()} → onChangeComplete={(hex) => …}.
disabledAlpha is the default; set alpha to enable it.
presets={[{ label, colors }]} → presets={colors}.
RGB / HSL inputs, gradients and format are not supported.