Chroma Panel

Search documentation

Find a page or section

Why the color survives a round trip, and what the package weighs.

Why the color survives a round trip

HSV has two places where information disappears. At zero saturation there is no hue to speak of, and at zero brightness there is neither. Pickers that keep their state as RGB or hex hit this constantly: drag brightness to black and back up, and the hue you picked comes back as red.

This one keeps the full HSVA value and merges changes into it instead of replacing it, so dragging to an extreme and back returns the color you started with.

Reading hex when you need precision

hex is rounded to 8 bits per channel. Store hsva and pass it back to value if a color has to survive a round trip unchanged.

Size

Measured as the increase in a real Vite production build, gzipped, with React external.

What you importAdded to your app
all five modes22.2 kB
shell plus one mode14.1 kB

dependencies is empty. react and react-dom are peer dependencies, so the copy already in your app is the one that gets used.

Compatibility

React16.14 and newer, including 19
React DOMRequired. The popover renders through createPortal
BrowsersChrome 123, Firefox 120, Safari 17.5
TypeScriptTypes included, no @types package needed
ModulesESM and CommonJS
Server renderingSafe. Browser-dependent files are marked 'use client'

See browser support for what sets the floor.

Licence

MIT, by Sohail Khan.