# Comparison

> Compare React color picker libraries side by side: chroma-panel, react-colorful, react-color and @uiw/react-color, by size, features and upkeep.

Source: https://chroma-panel.jscrate.dev/react/overview/comparison
Last updated: 2026-09-16

This page compares four React color picker libraries: chroma-panel,
[react-colorful](https://github.com/omgovich/react-colorful),
[react-color](https://github.com/casesandberg/react-color) and
[@uiw/react-color](https://github.com/uiwjs/react-color). On September 16,
2026, every number was checked against npm, Bundlephobia and each project's own
README. This page is part of the chroma-panel docs, so each figure links to its
source at the end.

## At a glance

|                                  | chroma-panel    | react-colorful | react-color                     | @uiw/react-color |
| -------------------------------- | --------------- | -------------- | ------------------------------- | ---------------- |
| Latest version                   | 0.1.3           | 5.8.1          | 2.19.3                          | 2.10.3           |
| License                          | MIT             | MIT            | MIT                             | MIT              |
| Runtime dependencies             | 0               | 0              | 7                               | 20               |
| TypeScript types                 | Included        | Included       | Separate (`@types/react-color`) | Included         |
| Bundle size, gzip (Bundlephobia) | 22.0 kB         | 4.9 kB         | 38.4 kB                         | 16.0 kB          |
| Weekly downloads (Sep 5–11)      | Not counted yet | 4,320,849      | 1,483,381                       | 129,521          |
| First publish                    | Sep 14, 2026    | Aug 5, 2020    | Aug 17, 2015                    | Jul 1, 2021      |
| Last publish                     | Sep 16, 2026    | Sep 1, 2026    | Oct 28, 2020                    | May 24, 2026     |

How to read the table:

- **Bundle size** is Bundlephobia's gzip figure for each package's main entry,
  at the version listed, with 1 kB counted as 1,000 bytes. It measures
  everything that entry exports, not what a tree-shaken app ships.
  react-colorful's README quotes 3.1 kB for a single picker. Each
  @uiw/react-color picker is also published as its own, smaller package.
- **chroma-panel's own figures use a different method**: the increase in a Vite
  production build, gzipped, with React external. That gives 22.2 kB for all
  five modes and 14.1 kB for the shell plus one mode. The
  [about page](https://chroma-panel.jscrate.dev/react/overview/about) explains the measurement.
- **Weekly downloads** are npm's count for September 5–11, 2026. chroma-panel
  was first published on September 14, after that window closed, so npm has no
  count for it yet.
- **@uiw/react-color's 20 dependencies** are its own `@uiw/*` packages. It also
  lists `@babel/runtime` as a peer dependency.

## Features

"Yes" means the project's README or docs describe the feature. "Not documented"
means you won't find it there as of September 16, 2026. You may still be able
to build it yourself.

| Feature                            | chroma-panel                           | react-colorful             | react-color                  | @uiw/react-color                |
| ---------------------------------- | -------------------------------------- | -------------------------- | ---------------------------- | ------------------------------- |
| Color wheel                        | Yes                                    | Not documented             | Not documented               | Yes (`Wheel`)                   |
| Saturation/brightness area         | Yes (`ColorArea`, for custom modes)    | Yes                        | Yes                          | Yes (`Saturation`)              |
| Per-channel sliders                | Yes (RGB, HSL, HSB)                    | Hue and alpha only         | Hue and alpha only           | Hue, alpha and shade only       |
| Alpha                              | Yes                                    | Yes                        | Yes                          | Yes                             |
| Hex/RGB/HSL text input             | Yes (hex, `rgb()`, `hsl()`, `hwb()`)   | Hex only (`HexColorInput`) | Yes (`EditableInput`)        | Yes (hex, RGBA, HSLA)           |
| Preset swatches or palettes        | Yes (palettes, 120-color pencils grid) | Code recipe only           | Yes (several swatch pickers) | Yes (`Swatch` and others)       |
| Eyedropper                         | Yes (`EyeDropper` API, Chromium only)  | Not documented             | Not documented               | Yes (`Chrome` picker, same API) |
| Pick colors from an image          | Yes                                    | Not documented             | Not documented               | Not documented                  |
| Popover or form input component    | Yes (`ColorInput`)                     | Popover is a code recipe   | Not documented               | Not documented                  |
| TypeScript types                   | Included                               | Included                   | Separate package             | Included                        |
| Keyboard and screen reader support | Yes (native range inputs)              | Yes (follows WAI-ARIA)     | Not documented               | Not documented                  |
| Contrast helpers                   | Yes (WCAG 2.1 and APCA)                | Not documented             | Not documented               | Not documented                  |
| Zero dependencies                  | Yes                                    | Yes                        | No (7)                       | No (20)                         |
| Last publish                       | Sep 14, 2026                           | Sep 1, 2026                | Oct 28, 2020                 | May 24, 2026                    |

## When to choose each

### react-colorful

Choose react-colorful when bundle size matters most. It is the smallest of the
four, has no dependencies, ships its own types and follows the WAI-ARIA
guidelines. It is also by far the most downloaded, and its latest release came
out on September 1, 2026. You get a saturation area, a hue slider, optional
alpha and a hex input. You build a popover or swatches yourself, from the
recipes in its README.

### react-color

Choose react-color when you want a ready-made look. It ships 13 pickers styled
after Sketch, Photoshop, Chrome and others, plus building blocks for your own.
Its latest release, 2.19.3, came out on October 28, 2020. It has seven
dependencies, and its types come from the separate `@types/react-color` package.
Weigh that before you start a new project with it.

### @uiw/react-color

Choose @uiw/react-color when you want many small pickers you can install one
at a time. Sketch, Chrome, Wheel, Swatch, Slider and others each have their
own package. Its Chrome picker includes an eyedropper and hex, RGBA and HSLA
inputs. The main package depends on 20 of those packages, so if you need only
one picker, install that picker's package instead.

### chroma-panel

Choose chroma-panel as a react-colorful alternative when you need an
eyedropper, image sampling, palettes and a form-ready input in one package.
`ColorInput` submits with its form, resets with `form.reset()` and supports
native validation. See [forms](https://chroma-panel.jscrate.dev/react/handbook/forms). The
[eyedropper](https://chroma-panel.jscrate.dev/react/utils/use-eyedropper) works only in Chromium browsers, and
[image sampling](https://chroma-panel.jscrate.dev/react/modes/image) extracts a palette from a photo someone
drops in. chroma-panel is new: it was first published on September 14, 2026,
the latest version is 0.1.3 from September 16, and it has no download history
yet. If a hex picker is all you need,
react-colorful is smaller.

## Switching from react-colorful

In react-colorful, `onChange` receives the color string. In chroma-panel,
`onChange` receives a `ColorChangeResult` object, so read `result.hex` from it.

A react-colorful hex picker:

```tsx
import { useState } from "react";
import { HexColorPicker } from "react-colorful";

export function Picker() {
  const [color, setColor] = useState("#aabbcc");

  return <HexColorPicker color={color} onChange={setColor} />;
}
```

The closest chroma-panel equivalent is the inline `ChromaPanel`:

```tsx
import { useState } from "react";
import { ChromaPanel, type ColorChangeResult } from "chroma-panel";

export function Picker() {
  const [color, setColor] = useState<string>("#aabbcc");

  const handleChange = (result: ColorChangeResult): void => {
    setColor(result.hex);
  };

  return (
    <ChromaPanel
      value={color}
      onChange={handleChange}
      modes={["wheel"]}
      showAlpha={false}
      showTitleBar={false}
    />
  );
}
```

What changes:

- `color` becomes `value`, and `onChangeEnd` becomes `onChangeComplete`.
- `showAlpha={false}` matches `HexColorPicker`, which has no alpha. For
  `HexAlphaColorPicker`, leave alpha on and read `result.hexa`.
- The wheel mode shows a disc with a brightness slider, not a square. Leave
  `modes` out to show all five modes.
- Importing from `chroma-panel` still bundles all five modes. To ship only the
  wheel, import from `chroma-panel/panel` and `chroma-panel/wheel`.
- For a swatch button that opens the picker, use `ColorInput` with the same
  `value` and `onChange`.

The [quick start](https://chroma-panel.jscrate.dev/react/overview/quick-start) covers both components and the
smaller import.

## Sources

- chroma-panel, checked September 16, 2026:
  - [npm registry, latest version](https://registry.npmjs.org/chroma-panel/latest)
  - [npm registry, publish dates](https://registry.npmjs.org/chroma-panel)
  - [npm weekly downloads](https://api.npmjs.org/downloads/point/last-week/chroma-panel)
  - [Bundlephobia size](https://bundlephobia.com/api/size?package=chroma-panel@0.1.3)
  - [About: size and compatibility](https://chroma-panel.jscrate.dev/react/overview/about)
- react-colorful, checked September 16, 2026:
  - [npm registry, latest version](https://registry.npmjs.org/react-colorful/latest)
  - [npm registry, publish dates](https://registry.npmjs.org/react-colorful)
  - [npm weekly downloads](https://api.npmjs.org/downloads/point/last-week/react-colorful)
  - [Bundlephobia size](https://bundlephobia.com/api/size?package=react-colorful@5.8.1)
  - [README](https://raw.githubusercontent.com/omgovich/react-colorful/HEAD/README.md)
- react-color, checked September 16, 2026:
  - [npm registry, latest version](https://registry.npmjs.org/react-color/latest)
  - [npm registry, publish dates](https://registry.npmjs.org/react-color)
  - [npm weekly downloads](https://api.npmjs.org/downloads/point/last-week/react-color)
  - [Bundlephobia size](https://bundlephobia.com/api/size?package=react-color@2.19.3)
  - [npm registry, @types/react-color](https://registry.npmjs.org/@types%2Freact-color/latest)
  - [README](https://raw.githubusercontent.com/casesandberg/react-color/HEAD/README.md)
  - [Docs: picker APIs](https://raw.githubusercontent.com/casesandberg/react-color/HEAD/docs/documentation/03.04-individual.md)
  - [Docs: helper components](https://raw.githubusercontent.com/casesandberg/react-color/HEAD/docs/documentation/04.02-helpers.md)
- @uiw/react-color, checked September 16, 2026:
  - [npm registry, latest version](https://registry.npmjs.org/@uiw%2Freact-color/latest)
  - [npm registry, publish dates](https://registry.npmjs.org/@uiw%2Freact-color)
  - [npm weekly downloads](https://api.npmjs.org/downloads/point/last-week/@uiw/react-color)
  - [Bundlephobia size](https://bundlephobia.com/api/size?package=@uiw/react-color@2.10.3)
  - [README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color/README.md)
  - [Chrome picker README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-chrome/README.md)
  - [Chrome picker eyedropper source](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-chrome/src/EyeDropper.tsx)
  - [Sketch picker README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-sketch/README.md)
  - [Wheel README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-wheel/README.md)
  - [Swatch README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-swatch/README.md)
  - [Shade slider README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-shade-slider/README.md)