Color Picker · Smallest

Default

A hex field with a swatch. Type a hex and press Enter, or open the swatch for a saturation square, a hue slider and an eyedropper.

Swatches

Preset colours under the picker, such as your palette tokens. The current colour is ringed.

import { useState } from "react";
import { ColorPicker } from "@smallest-inc/ui";

const BRAND_SWATCHES = ["#3B82F6", "#6366F1", "#A855F7", "#EC4899", "#EF4444", "#F97316", "#F59E0B", "#16A34A", "#14B8A6", "#0A0A0A"];

export default function ColorPickerSwatches() {
  const [accent, setAccent] = useState("#6366F1");

  return (
    <div className="w-full max-w-60">
      <ColorPicker aria-label="Accent color" value={accent} onValueChange={setAccent} swatches={BRAND_SWATCHES} />
    </div>
  );
}

Sizes

sm is 32px, for panels and toolbars. md is 36px, the same height as Input.

import { useState } from "react";
import { ColorPicker } from "@smallest-inc/ui";

export default function ColorPickerSizes() {
  const [panel, setPanel] = useState("#F97316");
  const [form, setForm] = useState("#F97316");

  return (
    <div className="flex w-full max-w-60 flex-col gap-3">
      <ColorPicker aria-label="Panel color" size="sm" value={panel} onValueChange={setPanel} />
      <ColorPicker aria-label="Form color" size="md" value={form} onValueChange={setForm} />
    </div>
  );
}

Secondary

A white field with a shadow, for neutral-50 and neutral-100 surfaces.

Best practices

When to use

Use when people set a brand or accent colour themselves: agent themes, widget colours, chart series.
Pass swatches when there is a palette to choose from; people then pick a sanctioned colour without leaving the field. Without a palette, keep the field and picker only.

Behavior

The swatch opens the picker; the hex field takes typing. A typed hex commits on Enter or blur, accepts 3 or 6 digits with or without #, and an invalid entry reverts.
onValueChange fires live while dragging the square or hue, always as uppercase #RRGGBB. Debounce saves if each change is expensive.
The eyedropper only appears where the browser supports it (Chromium). The hue is kept while the colour is grey, so dragging back up the square returns to it.
Use size="sm" (32px) in panels and toolbars and the default md (36px) in forms beside Input.

Content

Label the field with what the colour is for (“Brand color”, “Background”), not “Color”.

Accessibility

Pass aria-label; the swatch and both sliders take their names from it. The square moves with the arrow keys (Shift for bigger steps) and the hue with up and down.