Why Chroma Panel

chroma-panel is a React color picker library for the cases where a saturation square and a hex field are not enough. It puts five picking modes, an eyedropper, image sampling and a form-ready input in one package, with no runtime dependencies and TypeScript types included. This page is about the decision, not the feature list. The comparison page already holds the versions, sizes and download counts for the alternatives, so they are not repeated here.

Choose it when

• People need more than one way to pick. The panel ships five modes — wheel, sliders, palettes, image and pencils — behind a tab bar, and the reader switches between them. Pass modes to show a subset, in the order you list them.
• You need an eyedropper. It is part of the panel. The button renders only where the browser has the API, so you do not have to hide it yourself. To put one somewhere else, use useEyedropper, which gives you a supported flag and a pick() call.
• You need to pick colors out of an image. Someone drops in a photo, a logo or a screenshot, and image mode shows its dominant colors as swatches.
• The color has to submit with a form. ColorInput takes a name and behaves like an input: it submits with the form, it responds to form.reset(), and it takes part in native validation. See forms.
• You want preset swatches. Palettes mode takes named groups of swatches through palettes, with a search box above them. Pencils mode is a 120-color grid you can replace with pencils.
• You want zero runtime dependencies and types in the box. The package has no dependencies. react and react-dom are peer dependencies, so your copy is the one that gets used, and no @types package is needed. React 16.14 and newer, including 19. MIT.
• A color has to survive a round trip. The panel keeps the full HSVA value rather than a hex string, so hue does not disappear at the extremes.

import { ColorInput } from "chroma-panel";
 
<ColorInput name="brand" defaultValue="#3366cc" format="rgba" required />;

Choose something else when

• You need a plain hex picker and 4.9 kB matters. react-colorful is smaller, has no dependencies and ships its own types. If a saturation area, a hue slider and a hex field cover the job, take it.
• You want ready-made Sketch or Photoshop-style pickers. react-color ships 13 of them. chroma-panel has one look, which you restyle with custom properties rather than swap.
• You are building for React Native. Not supported. The components render DOM elements, react-dom is a peer dependency, and the popover goes through createPortal.
• You need OKLCH or LCH input. parse accepts hex, rgb(), hsl(), hwb(), the transparent keyword, and color names once you call registerNamedColors. That is the whole list — see parsing. There is no way to hand the panel an oklch() string today.
• You want a package with years of downloads behind it. This one is new. The first publish was September 14, 2026, and the current version is 0.1.3, so the usual signals — issue history, download counts, blog posts — are not there yet.

What the extra size buys

Two figures, both gzipped, measured as the increase in a Vite production build with React external:

The 14.1 kB is the floor: the panel shell, the color engine, the popover, the text field and one mode. The 8.1 kB on top of it is the other four modes. That is what a react-colorful alternative costs you here, and it buys the hue wheel with its brightness slider, per-channel sliders for RGB, HSL and HSB, searchable palettes, image sampling, and the 120-color pencils grid.

You do not have to take all of it. Import the shell and only the modes you render, as entry points shows. Tree shaking alone will not drop a mode, because each one registers itself when its file loads, so the saving comes from importing fewer entry points.

Why HSVA state matters

HSV loses information in two places. At zero saturation there is no hue left, and at zero brightness there is neither hue nor saturation. A picker that keeps its state as RGB or hex hits this every time someone drags brightness down to black and back up: the hue they picked comes back as red. This package keeps the full HSVA value and merges each change into it instead of replacing it, so the color you started with is the color you get back. The about page covers the decision, and the same engine is exported if you want it outside the panel.

Next steps

• Quick start — install it and render a picker.
• Comparison — the numbers for all four libraries, and how to switch from react-colorful.
• FAQ — the short answers, including bundle size, Next.js and eyedropper support.