@rc-component/color-picker

_{Part of the Ant Design ecosystem.}

🎨 A compact color picker panel for React.

English | 简体中文

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.