@rc-component/color-picker

_{Part of the Ant Design ecosystem.}

🎨 A compact color picker panel for React.

Highlights

Supports controlled and uncontrolled color values.
Accepts string, number, RGB, RGBA, HSB, HSBA, and Color inputs.
Provides hue and alpha controls with change and drag-complete callbacks.
Exposes Color helpers for hex, RGB, and HSB conversions.

Install

npm install @rc-component/color-picker

Usage

import ColorPicker from '@rc-component/color-picker';
import '@rc-component/color-picker/assets/index.css';

export default function App() {
  return (
    <ColorPicker
      defaultValue="#1677ff"
      onChange={(color, info) => {
        console.log(color.toHexString(), info?.type);
      }}
    />
  );
}

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

ColorPicker

Property	Description	Type	Default
defaultValue	Default color value	`ColorGenInput`	-
disabled	Whether the color picker is disabled	boolean	false
disabledAlpha	Whether to hide the alpha slider	boolean	false
panelRender	Custom panel renderer	`(panel: React.ReactElement) => React.ReactElement`	-
prefixCls	Component class name prefix	string	`rc-color-picker`
value	Current color value	`ColorGenInput`	-
onChange	Callback when color changes	`(color: Color, info?: { type?: 'hue' \| 'alpha'; value?: number }) => void`	-
onChangeComplete	Callback when a drag operation finishes	`(color: Color, info?: { type?: 'hue' \| 'alpha'; value?: number }) => void`	-

Color

Method	Description	Type
toHexString	Convert to hex color string	`() => string`
toHsb	Convert to HSB object	`() => { h: number; s: number; b: number; a: number }`
toHsbString	Convert to HSB color string	`() => string`
toRgb	Convert to RGB object	`() => { r: number; g: number; b: number; a: number }`
toRgbString	Convert to RGB color string	`() => string`

Development

npm install
npm start

The dumi site runs at http://localhost:8000 by default.

npm test
npm run tsc
npm run lint
npm run compile
npm run build

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/color-picker is released under the MIT license.

color-picker