react-studio-color-picker

Latest: 2.0.0 — version alignment with [email protected] (no API changes). See CHANGELOG.md.

Mozilla DevTools–style React color picker: saturation/value plane, hue and alpha sliders, RGBA inputs, eyedropper, and preset swatches.

Used by react-email-studio for inspector color fields. Standalone — use it in any React app.

Install

npm install react-studio-color-picker lucide-react

Peer dependencies: react, react-dom, lucide-react.

Usage

Color input (swatch + hex field + popover)

import { useState } from "react";
import { ColorInput, DEFAULT_COLOR_PICKER_THEME } from "react-studio-color-picker";

export function Example() {
  const [color, setColor] = useState("#6366f1");

  return (
    <ColorInput
      value={color}
      onChange={setColor}
      theme={DEFAULT_COLOR_PICKER_THEME}
      placeholder="transparent"
      allowTransparent
      allowAlpha
    />
  );
}

Inline picker panel

import { ColorPicker } from "react-studio-color-picker";

<ColorPicker
  value="#ef4444"
  onChange={setColor}
  width={260}
  showEyedropper
  showSwatches
/>

Popover only (custom trigger)

import { useRef, useState } from "react";
import { ColorPickerPopover } from "react-studio-color-picker";

function CustomTrigger() {
  const [open, setOpen] = useState(false);
  const [color, setColor] = useState("#6366f1");
  const btnRef = useRef<HTMLButtonElement>(null);

  return (
    <>
      <button ref={btnRef} type="button" onClick={() => setOpen(true)}>
        Pick color
      </button>
      {open && (
        <ColorPickerPopover
          value={color}
          onChange={setColor}
          anchorEl={btnRef.current}
          onClose={() => setOpen(false)}
        />
      )}
    </>
  );
}

Public API

Components

| Export | Description | |--------|-------------| | ColorPicker | Inline picker panel (no positioning) | | ColorInput | Swatch + hex input + popover | | InspectorColorInput | Alias for ColorInput | | ColorPickerPopover | Anchored popover panel | | ColorSwatchGrid | Preset swatch grid |

Constants & utilities

| Export | Description | |--------|-------------| | DEFAULT_COLOR_PICKER_THEME | Light theme tokens | | DEFAULT_SWATCHES | 16 preset hex colors | | TRANSPARENT_COLOR / TRANSPARENT | "" sentinel for transparent | | parseCssColor, formatCssColor | Parse/format #hex and rgba() | | hexToRgb, rgbToHex, rgbToHsv, hsvToRgb | Color space helpers | | isHexColor | Hex string validator |

Types

ColorPickerTheme, ColorPickerProps, ColorInputProps, ColorPickerPopoverProps, ColorSwatchGridProps, ColorPickerBaseProps, Rgba

Props reference

Shared (ColorPicker, ColorInput, ColorPickerPopover)

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | — | #hex, rgba(...), or "" for transparent | | onChange | (color: string) => void | required | Called on every change | | theme | ColorPickerTheme | light theme | Border, accent, surface tokens | | allowTransparent | boolean | true | Allow "" / transparent swatch | | allowAlpha | boolean | true* | Alpha slider + A input | | fallbackColor | string | #ffffff | Used when transparent disabled | | swatches | string[] | 16 presets | Custom swatch colors | | showSwatches | boolean | true | Preset grid | | showEyedropper | boolean | true | Browser eyedropper button |

* allowAlpha defaults to true when allowTransparent is enabled on ColorInput.

ColorPicker only

| Prop | Type | Default | |------|------|---------| | width | number | 240 | | className | string | — | | style | CSSProperties | — |

ColorInput only

| Prop | Type | Default | |------|------|---------| | placeholder | string | — | | emptyAsTransparent | boolean | false | | hexInputWidth | number | 120 | | disabled | boolean | false | | triggerLabel | string | Open color picker |

ColorPickerPopover only

| Prop | Type | Default | |------|------|---------| | anchorEl | HTMLElement \| null | required | | onClose | () => void | — | | width | number | 240 |

ColorPickerTheme

type ColorPickerTheme = {
  border: string;
  accent: string;
  text?: string;
  surface?: string;
  inputBg?: string;
  muted?: string;
};

Publish

From the monorepo root:

pnpm publish:all              # test → build → publish all packages
pnpm publish:all:dry-run      # verify tarball without uploading

See DEPLOYMENT.md. Publish react-studio-color-picker before react-email-studio (order is handled automatically).

License

MIT