opinion

ColorPicker

A swatch that opens preset colours plus the browser's own picker.

Label colourPresets, or any colour from the native input

Harbour rebrand

Sizes

Recent colours only

With eyedropper

Disabled

In context

Project coloursOne swatch per project

Project colours

Harbour rebrand

Brand

Tideline mobile

Product

Crew interviews

Research

Props

Prop	Type	Required	Default
`value`	`string \| undefined`	No	—
`defaultValue`	`string \| undefined`	No	DEFAULT_PRESETS[0]!
`onChange`	`((value: string) => void) \| undefined`	No	—
`presets`	`string[] \| undefined`	No	[ "#0066cc", "#2e7d32", "#d32f2f", "#f57c00", "#7b1fa2", "#00838f", "#212121", "#757575", ]
`size`	`"sm" \| "md" \| "lg" \| undefined`	No	md
`mode`	`"recent" \| "full" \| undefined`	No	full
`allowEyedropper`	`boolean \| undefined`	No	—
`aria-label`	`string \| undefined`	No	Pick a color
`disabled`	`boolean \| undefined`	No	—
`className`	`string \| undefined`	No	—

Picking a color from anywhere on screen: allowEyedropper

allowEyedropper adds a button that opens the real browser EyeDropper API — the user can sample any pixel on the entire screen, not just this page's own DOM, the same tool a real design app's color picker offers. Feature-detected at mount, not assumed: only Chromium-based browsers support it as of this writing, so the button simply doesn't render in a browser that can't back it (Firefox, Safari) — no broken button, no error.

data-rebar-* attributes

data-rebar-component="color-picker" on the trigger button; data-rebar-part="presets" on the swatch grid.

Migrating to Ant Design

Not codemod-covered — AntD's ColorPicker has a fuller HSB/alpha picker this component's preset-grid-plus-native-input approach doesn't attempt to match; a migration is a deliberate upgrade, not a rename.