---
title: "Image Palette — Extract Color Palettes in Framer | FramerHub"
canonical_url: "https://framerhub.io/plugins/image-palette"
last_updated: "2026-06-15T14:46:34.301Z"
meta:
  description: "Free Framer plugin. Extract colors from images, generate semantic tokens, export as CSS/Tailwind/JSON, create Framer Color Styles. Install from marketplace."
  "og:description": "Free Framer plugin. Extract colors from images, generate semantic tokens, export as CSS/Tailwind/JSON."
  "og:title": "Image Palette — Extract Color Palettes in Framer"
---

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 **](https://www.framer.com/marketplace/plugins/image-palette) **See How It Works **

**Free Forever****Export Color Styles **

framer.com/plugins/image-palette

## **How the magic happens**

**Step 1**### **Select**

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

**Pri****Sec****Acc****Sur****Txt**

**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** | **Typical Use** |
| --- | --- | | **Primary** | **Headers, CTAs, primary links** | | **Secondary** | **Subheadings, secondary buttons** | | **Accent** | **Badges, active states, alerts** | | **Surface** | **Cards, sections, containers** | | **Text** | **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.**1**### **Drop an Image** Drag any product photo, illustration, or brand asset directly into the plugin window.**2**### **Smart Extraction** Our algorithm analyzes the pixel data to generate a cohesive, balanced 5-color palette instantly.**3**### **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 **](https://www.framer.com/marketplace/plugins/image-palette) ## **More from FramerHub **[<h3>**CMS Filter**</h3>The #1 most advanced CMS filter for Framer. Multi-select, active states, search, URL parameters, and beautiful animations.**CMS****Search**](https://framerhub.io/plugins/framer-cms-filter) [<h3>**Framer Form Kit**</h3>The #1 most advanced form builder for Framer. Multi-step, logic, validations, and more.**Forms****Logic****Multi-step**](https://framerhub.io/plugins/framer-form-kit) [<h3>**CMS Find & Replace**</h3>Find and replace text across your entire Framer CMS in one single click.**CMS****Utility**](https://framerhub.io/plugins/cms-find-replace)