Wheel
Pick hue around the wheel and saturation from the center.
chroma-panel v2.0.0
React color picker components for accessible product UI
chroma-panel is a React color picker with a wheel, a color square, harmonies, channel sliders, palettes and image sampling. Use it as a form input or place the panel on the page.
npm install chroma-panel27.5 kB gzippedzero dependenciesTypeScriptMITReact 16.14+
Start with your stack
Each guide uses the same components you install from npm.
Start with ReactBuild a controlled color picker with useState and save the value when the user is done.Use shadcn/uiMap the picker to your shadcn/ui tokens and open it from your own popover.Use Material UIPlace the panel inside an MUI Popover without nesting two popups.Pick from an imageUpload, drop or paste an image, extract its palette and sample one pixel.Edit gradientsBuild linear and radial gradients with color stops you can move from the keyboard.Work with CSS colorsParse, convert and format hex, RGB, HSL, OKLCH, Lab and Display P3 colors.
React color picker components: wheel, harmonies, sliders and palettes
Classic
Set saturation and brightness in one square, then adjust hue.
Harmony
Find complementary, analogous, triadic and tetradic colors.
Value
Type exact hue, saturation, brightness, RGB and opacity values.
Palettes
Search the built-in palettes or pass your own brand colors.
Image
Drop in a photo to extract its palette or sample one pixel.