Comparison

This page compares four React color picker libraries: chroma-panel, react-colorful, react-color and @uiw/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

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

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. The eyedropper works only in Chromium browsers, and image sampling 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:

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:

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 covers both components and the smaller import.

Sources

• chroma-panel, checked September 16, 2026:
  • npm registry, latest version
  • npm registry, publish dates
  • npm weekly downloads
  • Bundlephobia size
  • About: size and compatibility
• react-colorful, checked September 16, 2026:
  • npm registry, latest version
  • npm registry, publish dates
  • npm weekly downloads
  • Bundlephobia size
  • README
• react-color, checked September 16, 2026:
  • npm registry, latest version
  • npm registry, publish dates
  • npm weekly downloads
  • Bundlephobia size
  • npm registry, @types/react-color
  • README
  • Docs: picker APIs
  • Docs: helper components
• @uiw/react-color, checked September 16, 2026:
  • npm registry, latest version
  • npm registry, publish dates
  • npm weekly downloads
  • Bundlephobia size
  • README
  • Chrome picker README
  • Chrome picker eyedropper source
  • Sketch picker README
  • Wheel README
  • Swatch README
  • Shade slider README