Overview
ColorPicker provides an intuitive color selection interface with a spectrum picker, preset colors, and recently used colors. Built with react-colorful for smooth interactions.
Key Features
- Full spectrum color picker with saturation and hue controls
- Hex input with validation for precise color entry
- Preset color palette based on Tailwind colors
- Recent colors stored locally (up to 5)
Examples
Interactive Demo
Click the color swatch to open the picker. Select colors from the spectrum, presets, or enter a hex value.
Selected Color
#3B82F6
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | required | Current hex color value (e.g., #3B82F6) |
onChange | (color: string) => void | required | Callback when color changes |
presets | string[] | Tailwind 500s | Array of preset hex colors (defaults to Tailwind 500s) |
disabled | boolean | false | Disable color picker interactions |
Usage
import { ColorPicker } from '@/ui/components';
// Basic usage
const [color, setColor] = useState('#3B82F6');
<ColorPicker
value={color}
onChange={setColor}
/>
// With custom presets
<ColorPicker
value={color}
onChange={setColor}
presets={['#FF0000', '#00FF00', '#0000FF']}
/>
// Disabled state
<ColorPicker
value={color}
onChange={setColor}
disabled
/>