Color picker · hex · rgb · hsl
A colour picker with a saturation square, hue and opacity strips, HEX / RGB / HSL fields, the screen eyedropper, swatches and recent colours — inline or as a field that opens a popover, all keyboard-driven.
Inline · drag the square and strips, or the arrow keys (Shift for bigger steps)
Brand preview#6366F1
Click the colour chip to copy it; the format button cycles HEX → RGB → HSL. Your picks are kept under “Recent”.
As a field · opens in a popover
Background
Label colour · no alpha
Optional
Usage
import { signal } from "./index.js";import { ColorPicker } from "./components/color-picker.js"; const color = signal("#6366f1"); // "#rrggbb", or "#rrggbbaa" once alpha < 1ColorPicker({ value: color }) // inline: square, hue + alpha strips, fields, swatches, recent // as a form field that opens a popoverColorPicker({ value: color, popover: true, label: "Background", clearable: true })ColorPicker({ value: color, alpha: false, format: "hsl", swatches: ["#f43f5e", "#22c55e", …] })// the eyedropper shows where the browser has one (Chromium); onChange while it moves, onCommit when let go