React color picker tutorial

This guide builds a controlled React color picker from a few lines of code. You will keep the value in useState, update the preview while someone drags, and save the final color when the interaction ends.

Install

npm install chroma-panel

No provider is required. The component loads its own styles, so you can render it as soon as the package is installed.

Add a color picker to a React app

Use ColorInput when the picker belongs in a form, settings page, or toolbar. It renders a color swatch button and opens the panel in a responsive popover.

import { useState } from "react";
import { ColorInput } from "chroma-panel";
 
export function AccentColorPicker() {
  const [color, setColor] = useState("#3366cc");
 
  return (
    <ColorInput
      value={color}
      onChange={(next) => setColor(next.hex)}
      aria-label="Accent color"
    />
  );
}

value makes the component controlled. If you do not need the value in React state, replace value with defaultValue and remove onChange.

Handle onChange and save after the drag

onChange runs while the pointer or keyboard changes the color. It is useful for a live preview. onChangeComplete runs once at the end, which makes it a better place for storage, undo history, analytics, or a network request.

<ColorInput
  value={color}
  onChange={(next) => setColor(next.hex)}
  onChangeComplete={(next) => saveTheme({ accent: next.hex })}
/>

Both callbacks receive hex, RGB, HSL, HSV, alpha, and CSS string values. Read the format your app stores. See controlled and uncontrolled state for the full event model.

Put the picker on the page

Use ChromaPanel when the color picker should stay visible. It is the same picker without the trigger and popover.

import { ChromaPanel } from "chroma-panel";
 
<ChromaPanel
  value={color}
  onChange={(next) => setColor(next.hex)}
  modes={["wheel", "sliders", "palettes"]}
/>;

Pass only the modes your task needs. A design tool may need sliders and image sampling, while a theme setting may need only approved palette swatches.

Submit the color in a form

Give ColorInput a name to include its value in FormData. required, disabled, and form.reset() work as they do on other form controls.

<form action={saveProfile}>
  <label htmlFor="profile-color">Profile color</label>
  <ColorInput
    id="profile-color"
    name="profileColor"
    defaultValue="#3366cc"
    format="hex"
    required
  />
  <button type="submit">Save</button>
</form>

Read the forms guide for validation, reset behavior, and React Hook Form options.

Choose a starting point

• Use ColorInput for a popover or dropdown color picker.
• Use ChromaPanel for an inline panel or a color picker inside a modal.
• Use the wheel for visual picking and sliders for exact RGB, HSL, HSV, or opacity values.
• Use palettes for brand colors and image mode to pick colors from an uploaded image.
• Use GradientEditor when the value is a linear or radial gradient instead of one color.

For framework setup, continue with Next.js, Vite, or Remix.