Color Picker

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { ColorPicker, ColorPickerPanel } from "@tessinaui/ui";

{/* Inline panel */}
<ColorPickerPanel defaultValue="#711DC8" onValueChange={setColor} />

{/* Button-triggered popover */}
<ColorPicker value={color} onValueChange={setColor} />

{/* Contrast checker against white text, AA target */}
<ColorPickerPanel
  defaultValue="#711DC8"
  contrastCheck={{ against: "#FFFFFF", target: "AA" }}
/>

Examples

Default

The popover trigger with quick swatches.

Libraries

Named swatch groups render in a second tab.

Contrast check

The badge shows the live ratio; the dotted boundary on the canvas marks where the target threshold passes.

Controlled trigger

API Reference

ColorPickerPanel

ColorPicker (popover trigger)

Extends every ColorPickerPanel prop, plus:

ColorPickerSwatch

ColorPickerSkeleton

Types

interface ColorSwatchItem {
  value: string; // "#RRGGBB" | "#RRGGBBAA"
  name?: string; // accessible name
}

interface ColorLibrary {
  name: string; // group heading
  colors: ColorSwatchItem[];
}

interface ContrastCheckOptions {
  against: string;          // comparison color (hex)
  target?: "AA" | "AAA";    // default "AA"
  largeText?: boolean;      // 3.0 / 4.5 thresholds instead of 4.5 / 7.0
}

The color utilities hexToHsva, hsvaToHex, and contrastRatio are also exported for app-side use.

Notes

• Value model — the external format is a hex string, but the picker keeps an internal HSVA state: hue survives passing through black, white, and gray (a plain hex round-trip would collapse it).
• RTL & color geometry — the panel chrome (tabs, labels, inputs, swatches) mirrors with dir="rtl"; the canvas and rails deliberately stay LTR because color geometry (white left, red-origin rainbow) is a convention shared by every design tool.
• Contrast checking — translucent colors are measured as rendered, composited over the comparison color. The boundary curve is recomputed per hue via binary search on the WCAG luminance, which is monotonic in brightness.
• Browser support — the eyedropper uses the native EyeDropper API (Chromium only) and hides itself elsewhere.
• Keyboard — the canvas and both rails are sliders: arrows step by 1%, Shift-arrows by 10%, Home/End jump to the extremes; values are announced via aria-valuetext.
• Mobile — inputs and rail thumbs expand to 44px touch targets on small screens (WCAG 2.5.5) while desktop keeps the compact density.