Native · system picker (pill)
Opens the OS color dialog — styled pill swatch, no popover.
Native · round
Custom · popover (hex / rgb / hsl)
Atelier saturation plane, hue slider, and format tabs.
Both · native + custom
System picker on the left, Atelier panel on the right.
Custom · round swatch
Custom · swatch only
Custom · panel format fields off
Disabled (both)
Error (custom)
Contrast ratio too low on surface.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme for swatch, panel, and sliders. |
| mode | Optional | "light" | "dark" | light | Color mode palette. |
| picker | Optional | "custom" | "native" | "both" | custom | custom — Atelier popover. native — `<input type="color">`. both — system swatch + popover. |
| variant | Optional | "swatch" | "field" | swatch | Swatch-only row or FieldShell with label, hint, and error. |
| swatchShape | Optional | "pill" | "round" | pill | Trigger silhouette — pill lozenge or circle. |
| value / onChange | Optional | string | — | Controlled hex color (#rrggbb). |
| formats | Optional | ("hex" | "rgb" | "hsl")[] | hex, rgb, hsl | Value formats available in the panel and inline field. |
| defaultFormat | Optional | "hex" | "rgb" | "hsl" | hex | Initial format tab and inline notation. |
| showFormatInputs | Optional | boolean | true | Format tabs and value fields inside the popover panel. |
| showInlineHex | Optional | boolean | false | Editable value field beside the swatch (uses active format). |
| ColorPickerPanel | Optional | component | — | Popover body only — saturation, hue, optional hex. |