Color Picker
Inline color selector with colorspace canvas, hue slider, opacity slider, hex input, and a saved color swatch palette. Tabs: Solid / Gradient / Image.
import
{ ColorPicker } from "@pepulux/ui"Default inline picker
Full inline panel with all controls: canvas, hue, opacity, hex input, and saved swatches.
Saved
Color: #7f56d9 Opacity: 100%
Trigger-based — click swatch to open
Attach the picker to a trigger button. Close with the × or by calling onClose.
Without tabs (solid only)
Hide the Solid / Gradient / Image tab bar when only hex colors are needed.
Saved
Save custom colors
Click 'Add' to save the current color to the swatch palette. Pass onSaveColor to receive the saved value.
Saved
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | "#7f56d9" | Current hex color string (e.g. '#7f56d9') |
| onChange | (hex: string, opacity: number) => void | — | Called when color or opacity changes |
| onClose | () => void | — | Shows × button and calls this on close |
| savedColors | string[] | — | Initial saved color swatches (hex strings) |
| onSaveColor | (hex: string) => void | — | Called when user saves a new color via the Add button |
| showTabs | boolean | true | Show or hide the Solid / Gradient / Image tab bar |
| className | string | — | Additional CSS classes on the picker panel |