← ui-lab

Color Area

The saturation/lightness square of a color picker: a 2-D pad where a single pointer position sets two values at once — horizontal maps to saturation, vertical to lightness. The two axes are exposed as role="slider" controls with aria-valuenow, each operable with the arrow keys; dragging the pad moves both.

Preview

Saturation: 50
Lightness: 50

Installation

npx shadcn@latest add https://ui.publictheta.com/r/color-area.json

Conformance

This component conforms to the @publictheta/ui-spec color-area specification. Run the suite against any implementation with pnpm conformance.