Color Picker

Saturation × value surface plus hue and optional alpha sliders. Below the picker, a HEX / RGB / HSL toggle swaps the bottom input row — type a hex string, the three RGB channels, or H/S/L directly. Hand-rolled, no dependencies. Reuses the existing Popover for the trigger-swatch dropdown and Input for the text fields. Optional preset row and a native EyeDropper button when the browser supports it (Chrome and Edge today; elsewhere the button is not rendered).

a11y (built in): the saturation surface, hue rail and alpha rail are each role="slider" with tabindex="0" and an aria-label; arrow keys move them (Shift for the coarse step) and every change rewrites aria-valuenow on hue/alpha and aria-valuetext on the surface, so the value is readable without seeing the gradient. Each hex and numeric field carries its own aria-label, and the sync pass skips whatever field holds focus — a value is never reformatted mid-edit. In popover mode the trigger is a button[aria-haspopup=dialog][aria-expanded] and the panel a named role="dialog" that Esc or an outside click closes.

Usage: <div data-lb-color-picker data-lb-value="#7c3aed"></div>. Add data-lb-popover for the trigger-swatch dropdown variant, data-lb-alpha for the alpha slider (and an A column in RGB / HSL modes), data-lb-presets (CSV) for a preset row.

Default — inline with format toggle

Drag the surface to set saturation and brightness, the hue rail for color, or use the HEX / RGB / HSL toggle to type values in the format your codebase uses. Keyboard: arrow keys on each surface (Shift for the coarse step), Enter on the hex field, and the numeric fields apply as you type.

Popover trigger — data-lb-popover

Compact swatch button that opens the picker in a Popover. Same picker UI inside; the trigger lines up with form controls in a settings row.

With alpha — data-lb-alpha

Adds an alpha slider beneath the hue. Accepts rgba(…) or 8-digit hex (#rrggbbaa) on input. The trigger swatch shows the checkerboard so transparency reads even at small sizes.

With presets — data-lb-presets

A CSV of swatches under the picker — handy for brand palettes, status colors, or recently used.

Event listener — live output

Listens for lb-color-change and prints all four formats (hex, rgb, rgba, hsl) you can use in your application.

In a settings card

Popover variant in a typical settings row — label on the left, picker trigger on the right, hint underneath.