Color Picker

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