# react-pick-color

> A modern color picker for react

Latest version **2.1.0** (published 2025-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-pick-color
pnpm add react-pick-color
yarn add react-pick-color
bun add react-pick-color
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2025-10-16 |
| First published | 2020-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 67.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Johannes Eslage |
| Maintainers | jeslage |
| Keywords | React, Colorpicker, Color |

## Links

- npm: https://www.npmjs.com/package/react-pick-color
- Repository: https://github.com/jeslage/react-pick-color
- Homepage: https://github.com/jeslage/react-pick-color#readme
- Issues: https://github.com/jeslage/react-pick-color/issues
- npm.io page: https://npm.io/package/react-pick-color

## Dependencies (1)

- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.6.0

## 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

- 2.1.0 (latest) — 2025-10-16
- 2.0.0 — 2023-08-13
- 1.0.4 — 2023-07-03
- 1.0.3 — 2023-05-02
- 1.0.2 — 2021-02-25
- 1.0.1 — 2021-02-05
- 1.0.0 — 2020-09-07

## README

![Screenshot](./assets/react-pick-color.jpg)
[Examples](https://react-pick-color.vercel.app)

# React Pick Color

Small color picker component for React written in TypeScript.

## Install

```sh
npm install react-pick-color
# or
yarn add react-pick-color
```

## Usage

```js
import React, { useState } from 'react';
import ColorPicker from 'react-pick-color';

const App = () => {
  const [color, setColor] = useState('#fff');

  return <ColorPicker color={color} onChange={color => setColor(color.hex)} />;
};
```

## Options

**`color`**

`string | { r: number, g: number, b: number, a: number } | { h: number, s: number, l: number, a: number }` | optional

The initial color as a hex string or rgba/hsla object.

---

**`onChange`**

`(color: { hex: string, rgb: object, hsl: object, alpha: number }) => void` | optional

onChange callback with the current color object.

---

**`presets`**

`array` | optional

---

**`combinations`**

`"analogous" | "monochromatic" | "splitcomplement" | "triad" | "tetrad" | "complement"` | optional

Provide `combinations` as a string or an array of `combinations`.

---

**`hideAlpha`**

`boolean` | optional | default: `false`

Hide the alpha range handler.

---

**`hideInputs`**

`boolean` | optional | default: `false`

Hide color inputs

---

**`theme`**

`{ background: string, inputBackground: string, color: string, borderColor: string, borderRadius: string, boxShadow: string, width: string }` | optional | default: `themes.light`

You can add a custom theme for styling the colorpicker component or choose one from the predefined themes.

**Custom Theme**

```js
import ColorPicker from 'react-pick-color';

const ThemedColorPicker = () => {
  return (
    <ColorPicker
      color="#3573CB"
      theme={{
        background: 'lightgrey',
        inputBackground: 'grey',
        borderColor: 'darkgrey',
        borderRadius: '8px',
        color: 'black',
        width: '320px'
      }}
    />
  );
};
```

**Predefined Theme**

`react-pick-color` exports a `dark` and a `light` theme.

```js
import ColorPicker, { themes } from 'react-pick-color';

const ThemedColorPicker = () => {
  return <ColorPicker color="#3573CB" theme={themes.dark} />;
};
```

## Roadmap

- [ ] Size optimization
- [x] Build little demo site or codesandboxes
- [ ] Remove tinycolor dependency
- [x] Add build pipeline
- [ ] Different CSS solution

---
_Source: https://npm.io/package/react-pick-color · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._