Color Picker
Full-featured color picker with HSL canvas, eyedropper, and multiple formats for React
Color Picker preview
Scroll to load preview
A 2D saturation/lightness canvas, hue slider, alpha control, and eyedropper that samples colors from your screen. Output in HEX, RGB, CSS rgba(), or HSL. Compound components let you build exactly the picker you need. Great for theme builders, design tools, or brand editors.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this component for you — no copy-paste, no CLI:
use shadcnio to install the color-picker component into my projectRelated Components
FAQ
Was this page helpful?
Sign in to leave feedback.