# @rc-component/color-picker > React Color Picker Latest version **3.1.1** (published 2026-02-27) · MIT license · 0 weekly downloads ## Install ```sh npm install @rc-component/color-picker pnpm add @rc-component/color-picker yarn add @rc-component/color-picker bun add @rc-component/color-picker ``` ## Health **Score 65/100 (B)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 3.1.1 | | Published | 2026-02-27 | | First published | 2023-03-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 74.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 454 | | Maintainers | zombiej, afc163, madccc, peachscript, chenshuai2144 | | Keywords | react, react-component, react-mentions, color-picker | ## Links - npm: https://www.npmjs.com/package/@rc-component/color-picker - Repository: https://github.com/react-component/color-picker - Homepage: http://github.com/react-component/color-picker - Issues: http://github.com/react-component/color-picker/issues - npm.io page: https://npm.io/package/@rc-component/color-picker ## Dependencies (3) - [clsx](https://npm.io/package/clsx.md) ^2.1.1 - [@rc-component/util](https://npm.io/package/@rc-component/util.md) ^1.3.0 - [@ant-design/fast-color](https://npm.io/package/@ant-design/fast-color.md) ^3.0.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 3.1.1 (latest) — 2026-02-27 - 3.1.0 — 2026-01-14 - 3.0.3 — 2025-11-28 - 3.0.2 — 2025-09-19 - 3.0.1 — 2025-03-21 - 3.0.0 — 2025-03-21 - 2.0.1 — 2024-08-07 - 2.0.0 — 2024-07-30 - 1.9.0 — 2024-07-24 - 1.8.3 — 2024-07-22 - 1.8.2 — 2024-07-22 - 1.8.1 — 2024-07-20 - 1.8.0 — 2024-07-19 - 1.7.1 — 2024-07-18 - 1.7.0 — 2024-07-18 - … 26 more at https://npm.io/package/@rc-component/color-picker/versions ## README # @rc-component/color-picker React Color Picker. [![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [npm-image]: http://img.shields.io/npm/v/@rc-component/color-picker.svg?style=flat-square [npm-url]: http://npmjs.org/package/@rc-component/color-picker [github-actions-image]: https://github.com/react-component/color-picker/actions/workflows/main.yml/badge.svg [github-actions-url]: https://github.com/react-component/color-picker/actions/workflows/main.yml [coveralls-image]: https://img.shields.io/coveralls/react-component/color-picker.svg?style=flat-square [coveralls-url]: https://coveralls.io/r/react-component/color-picker?branch=master [codecov-image]: https://img.shields.io/codecov/c/github/react-component/color-picker/master.svg?style=flat-square [codecov-url]: https://codecov.io/gh/react-component/color-picker/branch/master [david-url]: https://david-dm.org/react-component/color-picker [david-image]: https://david-dm.org/react-component/color-picker/status.svg?style=flat-square [david-dev-url]: https://david-dm.org/react-component/color-picker?type=dev [david-dev-image]: https://david-dm.org/react-component/color-picker/dev-status.svg?style=flat-square [download-image]: https://img.shields.io/npm/dm/@rc-component/color-picker.svg?style=flat-square [download-url]: https://npmjs.org/package/@rc-component/color-picker [bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/color-picker [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/color-picker ## install [![@rc-component/color-picker](https://nodei.co/npm/@rc-component/color-picker.png)](https://npmjs.org/package/@rc-component/color-picker) ## Development ``` npm install npm start ``` ## Example http://localhost:8000 ## Usage ```js import ColorPicker from '@rc-component/color-picker'; import '@rc-component/color-picker/assets/index.css'; export default () => ; ``` ## API | Property | Description | Type | Default | | :-- | :-- | :-- | :-- | | value | Value of color | string \| `Color` | - | | defaultValue | Default value of color | string \| `Color` | - | | onChange | Callback when `value` is changed | `(value: Color, type: hue \| alpha) => void` | - | | onChangeComplete | Callback when `drag` is stop | `(value: Color, type: hue \| alpha) => void` | - | | disabled | Disabled ColorPicker | boolean | false | | disabledAlpha | Disabled alpha slider | boolean | false | | panelRender | Custom panel render | `(panel: React.ReactElement) => React.ReactElement` | - | ### Color | Property | Description | Type | Default | | :-- | :-- | :-- | :-- | | toHexString | Convert to `hex` format color string, like `#ffffff` | `() => string` | - | | toHsb | Convert to `hsb` object, like `{ h: 0, s: 0, b: 0, a: 0 }` | `() => ({ h: number, s: number, b: number, a number })` | - | | toHsbString | Convert to `hsb` format color string, like `hsba(0, 0%, 0%, 0)` | `() => string` | - | | toRgb | Convert to `rgb` object, like `{ r: 0, g: 0, b: 0, a: 0 }` | `() => ({ r: number, g: number, b: number, a number })` | - | | toRgbString | Convert to `rgb` format color string, like `rgba(0, 0, 0, 0)` | `() => string` | - | ## Test Case ``` npm test or npm run coverage ``` ## License @rc-component/color-picker is released under the MIT license. --- _Source: https://npm.io/package/@rc-component/color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._