Color Picker
Buttons
A comprehensive color picker with HSL sliders, preset swatches, hex/RGB/HSL format toggling, and copy-to-clipboard functionality. Features animated popover and real-time color preview.
Loading preview...
Customize
Label
Disabled
Show Alpha
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | '#E84E2D' | The selected color value in hex format (e.g., '#ff0000'). |
onChange | (color: string) => void | undefined | Callback fired when the color is changed. |
label | string | undefined | Label text displayed above the color picker button. |
disabled | boolean | false | Disables the color picker. |
showAlpha | boolean | false | Shows the alpha/opacity slider in the picker. |
presets | string[] | DEFAULT_PRESETS | Array of preset hex colors to display as quick selects. |
className | string | '' | Additional CSS classes. |