Color Picker Input

Select a Color

Opacity80%

Installation

Props

Prop	Type	Default	Description
`colors`	`string[]`	`[12 preset colors]`	Array of hex color codes for the swatches
`initialColor`	`string`	`"#3B82F6"`	Initial selected color
`initialOpacity`	`number`	`100`	Initial opacity percentage (0-100)
`onChange`	`(color: string, opacity: number) => void`	-	Callback when color or opacity changes

Examples

Custom Initial Values

<ColorPickerInput
  initialColor="#EC4899"
  initialOpacity={80}
  onChange={handleColorChange}
/>

With Custom Colors

const customColors = [
  "#000000",
  "#FFFFFF",
  "#FF0000",
  "#00FF00",
  "#0000FF",
  "#FFFF00",
  "#FF00FF",
  "#00FFFF",
];
 
<ColorPickerInput
  colors={customColors}
  onChange={(color, opacity) => console.log(color, opacity)}
/>;