Chroma Panel

Search documentation

Find a page or section

Known limits and open questions, not dated promises.

chroma-panel is on 0.x. The current version is 0.1.3, first published on September 14, 2026. There is no published roadmap, so this page does not give you one. What follows is what the package does today, where it stops, and which of those stopping points are open questions rather than settled design. Nothing here is a commitment, and no dates are implied.

Decisions get made on the issue tracker. If you want one of these to move, that is the place to say so.

Known limits today

Each item below is documented elsewhere in these docs. The links go to the page that covers the behavior in full.

The eyedropper is Chromium-only

It uses the browser's EyeDropper API, which today means Chromium browsers. showEyedropper defaults to true, but the button renders only where the API exists, so nothing breaks in Firefox or Safari — the control is simply not there. If you build your own trigger, check supported first:

import { useEyedropper } from "chroma-panel";
 
export function PickButton() {
  const { supported, pick } = useEyedropper();
 
  if (!supported) {
    return null;
  }
 
  return <button onClick={() => void pick()}>Pick a color</button>;
}

See useEyedropper. Whether a fallback exists for other browsers is an open question; nothing has been announced.

Image sampling needs two browser APIs

It needs createImageBitmap and OffscreenCanvas. Both are present in every browser that clears the minimum versions below, so in practice this is not a separate floor. See image mode.

The minimum browsers are from 2024

Chrome 123, Firefox 120 and Safari 17.5. The stylesheet uses light-dark(), which is the newest thing in it and therefore sets the floor. Below those versions the CSS does not apply and the panel renders unstyled. Whether that floor ever drops is an open question — see browser support for what each feature contributes.

Parsing does not cover OKLCH or LCH

parse accepts hex in 3, 4, 6 and 8 digits, rgb(), rgba(), hsl(), hsla(), hwb() and the transparent keyword. Color names work only after you call registerNamedColors, because the table is a separate entry point. That is the whole list: an oklch() or lch() string returns null today. See parsing.

React Native is not supported

The components render DOM elements, react-dom is a peer dependency, and the popover goes through createPortal. There is no React Native build and none has been announced.

Do not read this page as a plan

Every heading above describes the package as it is on 0.1.3. None of it says anything about what a later version will do.

Before 1.0

The package follows semantic versioning, and the releases page lists what counts as a breaking change: documented props, entry point exports, and the --cp-* custom properties and data-cp-* attributes. On 0.x that is the aim rather than a guarantee, so read the notes for a release before you take it, and pin the patch range if you would rather review changes first.

npm install chroma-panel@~0.1.3

Anything not listed in the API reference — internal class names, for instance — can change in a patch. The changelog is the record of what actually shipped.

Have a say

The repository has issues turned on. GitHub Discussions is not enabled, so an issue is the one place to raise something.

  • A bug: open an issue with the version, the browser, and the smallest component that reproduces it.
  • A feature: describe the use case and show the code you are writing now, along with what you want to write instead. A request that arrives as a title — "add OKLCH support" — leaves the maintainer guessing at what you actually need. The same request with a component in it does not.
  • A question: the FAQ covers the common ones. If yours is not there, an issue works for that too.