Color Palette Extractor MCP: Palettes, Themes and Tokens From an Image

What is Color Palette Extractor MCP?

It is a local Node.js MCP server that turns an image into a usable color palette. It finds the colors, checks them against WCAG, assigns design roles, and exports the result in several formats, all without the image ever leaving the machine.

Window detection sets it apart on screenshots: an app window and the wallpaper behind it are extracted as two separate palettes instead of one blended set of colors.

What changes in an agent's output

• build_palette_folder runs the whole pipeline in one call: detect the app window, extract app and wallpaper palettes, derive the matching dark or light theme, render previews, write five export formats, and generate an HTML design-system guide with a dark/light toggle.
• brand_mode treats a clean brand sheet differently from a UI screenshot: brand exports ship as the tokens to use, with an inverted preview clearly labeled as reference only, not a recommended theme.
• score_accessibility reports WCAG AA/AAA contrast ratios between chosen palette pairs, and suggest_role assigns background, text, accent, surface or muted roles for a stated purpose.
• harmonize builds analogous, triadic, complementary, split or tetradic variants from a single seed color, and compare_palettes scores the perceptual difference between two palettes.

How the setup works

1. Clone the repository and build it: npm ci then npm run build inside the project.
2. Wire the built server into an MCP client by pointing it at the compiled entry point with node.
3. Set PALETTE_OUTPUT_DIR to a fixed, writable path so deliverables land somewhere predictable instead of wherever the client happened to start from.
4. Optionally set CHROME_PATH if the design-guide screenshot step should use a Chrome or Chromium binary outside the default location.

Who Color Palette Extractor MCP is for

Best for

• Turning one screenshot or brand image into a themed, exportable palette with contrast scores already checked.
• Agents that need UI roles and ready-made CSS variables, SCSS, Tailwind or Figma tokens from a single source image.

Not for

• Generating a full 50 to 950 tonal scale from one seed color instead of extracting a palette from an image, work Tailwind Shades MCP Server already does with its own tools.
• Building a brand, neutral and semantic palette system with contrast targets from scratch, a task Color System Skill handles instead of starting from an image.
• Reading colors and fonts directly from a live website rather than a saved image, a job Visual Brand Extractor Skill takes on with its own brand config output.
• Turning a screenshot into a design.md and token write-up rather than a themed, exportable palette, work AnyDesign Skill already covers end to end.

Security and requirements

• Node 18 or newer is required; CI runs on Node 18 and 22.
• image_url downloads reject private, loopback and link-local hosts, re-validate every redirect, time out after 10 seconds, and are capped at 25 MB.
• The headless-Chrome screenshot step is spawned with an argument array rather than a shell, and every dynamic value in the HTML guide is escaped before rendering.

Connect Color Palette Extractor MCP: Palettes, Themes and Tokens From an Image to your AI client

git clone https://github.com/aka-kika/color-palette-extractor-mcp.git
cd color-palette-extractor-mcp
npm ci
npm run build

1. Clone and build

   Clone the repository, then run npm ci for a reproducible install matching CI, and npm run build. npm test runs the 18 unit tests covering color math and the SSRF guard.

2. Wire it into your MCP client

   Add the config above (Claude Desktop or any client that accepts a mcpServers block), pointing args at the absolute path to the built dist/server.js.

3. Set the output location

   PALETTE_OUTPUT_DIR controls where build_palette_folder writes its deliverables. It defaults to <cwd>/output; set a fixed path when the client is always-on.

4. Point to Chrome if needed

   CHROME_PATH names the Chrome or Chromium binary used for the design-guide screenshot. Without it, the guide is still written, just without the screenshot image.

5. Run it locally for development

   npm run dev runs the server directly from source without a separate build step.

Client configuration

{"mcpServers": {"color-palette": {"command": "node", "args": ["/absolute/path/to/color-palette-extractor-mcp/dist/server.js"]}}}

What you can do with it

• One-call deliverablebuild_palette_folder produces previews, five export formats, a written summary and an HTML design-system guide from a single call.
• Window-aware extractionA screenshot's app window and its wallpaper are separated into two palettes instead of one blended read.
• Brand modeTreats a clean design-system sheet as a brand palette, shipping its exports as tokens to use while labeling any inverted preview as reference only.
• WCAG contrast scoringscore_accessibility checks chosen color pairs against WCAG AA and AAA thresholds.
• Role suggestionssuggest_role assigns background, text, accent, surface or muted roles for a stated purpose.
• Multi-format exportexport_palette writes CSS variables, SCSS, Tailwind, Figma tokens, JSON or ASE from the same palette.
• Harmonize and compareharmonize builds related color schemes from one seed, and compare_palettes scores the perceptual gap between two palettes.
• Local and hardenedImage data never leaves the machine; downloads are SSRF-guarded, the screenshot step avoids a shell, and HTML guide values are escaped before rendering.

Tools it exposes

Frequently asked questions