ColorPicker

Color picker with HSB area, hue + optional alpha sliders, hex/RGB/HSL text fields, eyedropper, and saved swatches; renders as a popover or inline panel.

stable
since v0.1.0
8.73 kB
forms
color

Preview

Open

tsx

import { ColorPicker } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <ColorPicker label="Brand colour" defaultValue="#6366F1" />;
}

Usage

import { ColorPicker } from "@arshad-shah/cynosure-react";

<ColorPicker label="Brand colour" defaultValue="#6366F1" />

defaultValue and value accept either a CSS color string or a React Aria Color instance.

Variants

popover (default) renders a swatch trigger that opens the panel in a Popover. inline drops the trigger and renders the panel in place.

Preview

Open

tsx

import { ColorPicker } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: 320 }}>
      <ColorPicker variant="inline" defaultValue="#6366F1" alpha eyedropper />
    </div>
  );
}

Sizes

sm, md (default), and lg scale the area, sliders, and panel.

Preview

Open

tsx

import { ColorPicker, Inline } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Inline gap="3" align="center">
      <ColorPicker size="sm" label="Small" defaultValue="#6366F1" />
      <ColorPicker size="md" label="Medium" defaultValue="#10B981" />
      <ColorPicker size="lg" label="Large" defaultValue="#EC4899" />
    </Inline>
  );
}

With alpha

Set alpha to add an alpha slider with a checker-pattern background and an A column in the text fields.

Preview

Open

tsx

import { ColorPicker } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <ColorPicker label="Overlay" defaultValue="hsba(220, 80%, 90%, 0.6)" alpha />;
}

Format

Pick the starting format with defaultFormat ("hex", "rgb", or "hsl"). Users can switch between them with the in-panel segmented control.

Preview

Open

tsx

import { ColorPicker } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ width: 320 }}>
      <ColorPicker variant="inline" defaultValue="#6366F1" defaultFormat="rgb" />
    </div>
  );
}

Saved swatches

Pass a controlled swatches array plus onSwatchesChange to render a saved-colors grid; users can save the current color and re-pick any saved swatch.

Preview

Open

tsx

import { ColorPicker } from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [swatches, setSwatches] = useState<string[]>([
    '#ef4444',
    '#f59e0b',
    '#10b981',
    '#0ea5e9',
    '#6366f1',
    '#ec4899',
  ]);
  return (
    <div style={{ width: 340 }}>
      <ColorPicker
        variant="inline"
        defaultValue="#ef4444"
        swatches={swatches}
        onSwatchesChange={setSwatches}
        maxSwatches={12}
      />
    </div>
  );
}

API

PropTypeDefaultDescription

label

ReactNode

"Pick a color"

Label rendered beside the swatch in popover mode. Pass `null` for an icon-only trigger.

className

string

—

style

CSSProperties

—

size

"sm"|"md"|"lg"

"md"

Size preset — affects panel width, area height, slider thickness, cell density.

variant

"popover"|"inline"

"popover"

`popover` renders a swatch trigger; `inline` drops the trigger and renders the body in place.

alpha

boolean

false

Show an alpha slider + checker pattern under the hue slider.

eyedropper

boolean

true

Show the browser eyedropper button when supported.

defaultFormat

"hex"|"rgb"|"hsl"

"hex"

Default format selected in the segmented control.

swatches

string[]

—

Controlled list of saved swatches (hex strings).

onSwatchesChange

((next: string[]) => void)

—

When provided, the picker shows a "save current" affordance that prepends the current color.

maxSwatches

number

—

Cap on swatches kept in the list when a save happens.

children

ReactNode

—

Escape hatch — replaces the entire popover/inline body.

value

string|Color

—

defaultValue

string|Color

—

onChange

((color: Color) => void)

—

Accessibility

Wraps React Aria’s ColorPicker, ColorArea, and ColorSlider primitives — full keyboard support with arrow keys, Page Up/Down, and Home/End on each thumb.
The eyedropper button uses the browser’s EyeDropper API when available; it’s hidden automatically on unsupported browsers.
Each format text field is a labelled input — aria-label on the picker trigger defaults to the label prop when it’s a string.
The trigger swatch reflects the current color including alpha when enabled.

Recipes

Use variant="inline" inside a settings panel where you don’t want a separate trigger.
Cap saved-color history with maxSwatches so the grid doesn’t grow unbounded.
Set eyedropper={false} when shipping to browsers that lack EyeDropper if you’d rather hide the slot than rely on auto-detection.
Pass a controlled value of type Color to read back any format via color.toString("rgb") / color.toString("hex").