ColorPicker

A two-dimensional color area with hue and alpha sliders, a format field and swatches.

Import
import { ColorPicker } from '@texuli/primitives/color-picker';
Pattern
Slider (WAI-ARIA APG)
Size budget
4.0 KiB gzip for @texuli/primitives/color-picker
Reference
packages/primitives/docs/prim-color-picker.md

Live demo

Loading the ColorPicker demo…

Anatomy

ColorPicker anatomy: each box holds the parts inside it.
  • ColorPicker.Root
    • ColorPicker.Areatwo-axis slider
    • ColorPicker.Hue
    • ColorPicker.Alpha
    • ColorPicker.FormatInput
    • ColorPicker.Swatch

Behavior checks

tests/behavior/scenarios/color-picker.spec.ts checks the ColorPicker scenario in the browser (1 checks) on Chromium, WebKit and the Pixel 7.

  • supports keyboard, pointer and touch input with an accessible name and no axe violations

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/color-picker (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).