Live Preview: https://colorpicker.framer.website/
About Color Picker
ColorPicker Pro is a fully featured, production-ready color picker for Framer. Select colors with a precise HSV canvas, adjust opacity with a live alpha slider, pick any color from your screen with the native eyedropper, and instantly get HEX, RGB and HSL values. Save your favorite colors, switch between dark and light themes, and receive real-time updates via the onChange callback. Built for designers who need a modern, interactive and highly customizable color tool.
Live HSV saturation-brightness canvas with smooth thumb
Hue slider with full spectrum gradient
Opacity (alpha) slider with checkerboard preview
Native EyeDropper tool to sample any color on screen
Real-time HEX, RGB and HSL (with alpha) values
One-click copy to clipboard
Color presets with active state highlight
Save up to 12 favorite colors with remove & clear-all
Dark & Light theme support + Demo Mode toggle
onChange callback returns hex, rgb, hsl and hsv objects
Fully responsive with container queries
Smooth entrance animations powered by Framer Motion
Extensive property controls: fonts, colors, radius, gap, initial values and more
Works out of the box — no extra setup required
Use Cases
Design system & component libraries
UI kit & style guide pages
Brand identity and color palette tools
SaaS product customization panels
Theme builder interfaces
Portfolio and agency websites
E-commerce product color selectors
Marketing landing pages with interactive demos
Creative tool showcases
Framer template and resource marketplaces
Mobile-friendly design applications
Educational color theory demonstrations
Keywords
color picker framer, hsv color picker, opacity slider, alpha channel, eyedropper tool, hex rgb hsl, color palette, save colors, dark light theme, framer color component, interactive color picker, modern color selector, onChange color, copy hex, color presets
Live Preview: https://colorpicker.framer.website/
About Color Picker
ColorPicker Pro is a fully featured, production-ready color picker for Framer. Select colors with a precise HSV canvas, adjust opacity with a live alpha slider, pick any color from your screen with the native eyedropper, and instantly get HEX, RGB and HSL values. Save your favorite colors, switch between dark and light themes, and receive real-time updates via the onChange callback. Built for designers who need a modern, interactive and highly customizable color tool.
Live HSV saturation-brightness canvas with smooth thumb
Hue slider with full spectrum gradient
Opacity (alpha) slider with checkerboard preview
Native EyeDropper tool to sample any color on screen
Real-time HEX, RGB and HSL (with alpha) values
One-click copy to clipboard
Color presets with active state highlight
Save up to 12 favorite colors with remove & clear-all
Dark & Light theme support + Demo Mode toggle
onChange callback returns hex, rgb, hsl and hsv objects
Fully responsive with container queries
Smooth entrance animations powered by Framer Motion
Extensive property controls: fonts, colors, radius, gap, initial values and more
Works out of the box — no extra setup required
Use Cases
Design system & component libraries
UI kit & style guide pages
Brand identity and color palette tools
SaaS product customization panels
Theme builder interfaces
Portfolio and agency websites
E-commerce product color selectors
Marketing landing pages with interactive demos
Creative tool showcases
Framer template and resource marketplaces
Mobile-friendly design applications
Educational color theory demonstrations
Keywords
color picker framer, hsv color picker, opacity slider, alpha channel, eyedropper tool, hex rgb hsl, color palette, save colors, dark light theme, framer color component, interactive color picker, modern color selector, onChange color, copy hex, color presets
