Trusted by 1.5k+ Framer Pros

Extract color palettes from
any image in Framer.

Select image layers. Get semantic tokens — primary, secondary, accent, surface, text. Export as Framer Color Styles, CSS Variables, Tailwind config, or JSON.

Install Free See How It Works

Free ForeverExport Color Styles

framer.com/plugins/image-palette

How the magic happens

Image Selected

Step 1

Select

Pick one or more image layers directly on your Framer canvas. High-res or low-res, doesn't matter.

PriSecAccSurTxt

Step 2

Generate

The plugin extracts the dominant colors and intelligently maps them to proper semantic roles.

Primary Color

Style

Secondary Color

Style

Accent Color

Style

Step 3

Apply

Create Framer Color Styles, copy developer formats (CSS/Tailwind), or apply directly to canvas layers.

Not just colors. A color SYSTEM.

It doesn't just pull 5 random colors. It assigns them functional roles so your generated palettes are actually usable in UI design.

Token	Role	Typical Use
Primary	Brand's main color	Headers, CTAs, primary links
Secondary	Supporting color	Subheadings, secondary buttons
Accent	Highlight / Attention	Badges, active states, alerts
Surface	Background layers	Cards, sections, containers
Text	Readable content	Body text, captions

Locking individual colors

Love the Primary color but hate the rest? Lock it. Click regenerate. The locked color stays while the rest adapt around it.

Everything you need.

Instant Generation
Processes images locally in your browser for immediate results without waiting.
Native Color Styles
Colors map neatly to your Framer project's native style tokens for immediate use.
Copy Hex Codes
Need colors somewhere else? Click any swatch to copy its HEX value instantly.

Palette to canvas in 3 steps.

Stop using external tools and copy-pasting hex codes manually.

Drop an Image

Drag any product photo, illustration, or brand asset directly into the plugin window.

Smart Extraction

Our algorithm analyzes the pixel data to generate a cohesive, balanced 5-color palette instantly.

Save to Styles

Review the palette and save the colors directly to your Framer Color Styles with a single click.

Try it for free.

Image Palette is the missing utility for Framer designers who care about cohesive branding. Try it out on your next client project.

Install Plugin

Extract color palettes from
any image in Framer.