forms contract

ColorPicker

Color selection with HEX/RGB/HSL tabs and a saturation/value canvas. Used in admin tooling and theming UIs.

Variants

  • inline
  • popover

Sizes

  • md
  • lg

Example

<ColorPicker value={color} onChange={setColor} alpha={false} contrastAgainst="#ffffff" />

Usage rule

HEX / RGB / HSL tabs let the user switch input modes; the underlying value is always normalised to RGB.

The full ColorPicker contract has 4 more rules, plus the do-not patterns. Get the full recipe.

Get the ColorPicker contract in your project.