ColorPicker
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface
ColorPicker
A color picker component with presets, hex input and popover placement. Ideal for theme customization, design tools and playgrounds.
Basic usage
Use value and onChange to control the selected color. The picker supports both preset swatches and manual hex input.
Primary color
Selected: #1890ff
Success color
Selected: #52c41a
Danger color
Selected: #f5222d
Sizes
Use the size prop to adjust trigger size for compact forms or more prominent pickers.
Small
Medium (default)
Large
Custom presets
Pass a presets array to define your own palette of labeled swatches.
Custom palette
Selected: #722ed1
Clear, disabled & placement
Enable a clear button, show Disabled pickers and control the popoverplacement.
Clearable color picker
Selected: #fa8c16
Disabled state
Popover placement
bottom-start (default)
top-start
bottom-end
Theme builder example
Combine multiple ColorPickers to build a small theme editor for buttons and badges.
Primary color
Secondary color
Error color
Manual only
Preview
Primary: #2563eb
Secondary: #52c41a
Error: #f5222d
Usage Guidelines
When to Use
- Theme customization
- Design tools
- User preferences
Accessibility
- Keyboard accessible picker
- Color values announced
Performance
- Canvas-based picker
- Throttled color updates
Common Mistakes
- Not validating color format
- No preset colors for quick selection
Frequently Asked Questions
Related Components
View allAsynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Accessible checkbox input with indeterminate state support and form integration
Accessible CheckboxGroup for multi-selection, and form integration
Hybrid input combining text search with dropdown selection, supporting filtering, custom rendering, and creation flows