# Why Chroma Panel

> When to choose this React color picker library over a react-colorful alternative, what the extra kilobytes buy you, and when another package fits better.

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

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](https://chroma-panel.jscrate.dev/react/overview/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`](https://chroma-panel.jscrate.dev/react/utils/use-eyedropper), 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](https://chroma-panel.jscrate.dev/react/modes/image) 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](https://chroma-panel.jscrate.dev/react/handbook/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.

```tsx
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](https://chroma-panel.jscrate.dev/react/utils/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:

| What you import     | Added to your app |
| ------------------- | ----------------- |
| all five modes      | 22.2 kB           |
| shell plus one mode | 14.1 kB           |

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](https://chroma-panel.jscrate.dev/react/utils/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.

> **Import a mode for the side effect**
>
> Write `import "chroma-panel/wheel"`, not a named import, or a bundler may drop
> it.

## 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](https://chroma-panel.jscrate.dev/react/overview/about) covers the decision, and the same engine is
exported if you want it outside the panel.

## Next steps

- [Quick start](https://chroma-panel.jscrate.dev/react/overview/quick-start) — install it and render a picker.
- [Comparison](https://chroma-panel.jscrate.dev/react/overview/comparison) — the numbers for all four
  libraries, and how to switch from react-colorful.
- [FAQ](https://chroma-panel.jscrate.dev/react/overview/faq) — the short answers, including bundle size, Next.js
  and eyedropper support.