Why do I get different palettes every time I run it?

K-means initializes with random starting centroids, so results vary slightly run-to-run — especially when multiple valid clusterings exist (e.g., an image with many greens and blues might split them differently on different runs). This tool uses k-means++ initialization which makes results more stable, but some randomness remains. If you want a specific palette, run extraction 2-3 times and pick the one that looks right.

Can I generate a palette from a moodboard with multiple images?

Extract a palette from each image individually, then manually combine the HEX values you like from each. For a single moodboard-style palette extraction, merge your reference images into one using our Combine Photos tool, then upload the merged image here. K-means will treat it as one image and return a unified palette.

Color Palette Extractor — Pull Colors from Any Image

Extract a brand-ready color palette in one click. Dominant, vibrant, muted, complementary, Material, and Tailwind modes. Export as CSS, Tailwind, SCSS, or JSON.

Runs in your browser — images never leave your device

Drop your image here or click to upload

JPG, PNG, WebP, GIF, BMP · Photos, logos, artwork, screenshots

Dominant · 5 colors

Got a palette? Now make the content.

Turn your brand colors into product photos, UGC videos, and ads.

Try It — 200 Credits for $10

How It Works

Upload Your Image

Drop any image — a photo, logo, screenshot, or artwork.

Choose Mode & Size

Pick a mode (Dominant, Vibrant, Muted, Complementary, Material, Tailwind) and palette size (5, 8, or 10 colors).

Copy or Export

Tap any swatch to copy HEX. Export the full palette as CSS variables, Tailwind config, SCSS, or JSON.

How Color Palette Extraction Works

This tool uses k-means clustering — the same algorithm behind Adobe Color, Coolors, and professional palette tools — to find the most representative colors in any image.

Every pixel in your image is a point in three-dimensional color space (red, green, blue). K-means clustering groups these millions of points into k clusters based on proximity — pixels with similar colors end up in the same cluster. The center of each cluster is a single color that represents that group of pixels. Those cluster centers are your palette. The cluster with the most pixels becomes the dominant color; the rest are ranked by population.

The extractor runs entirely in your browser using JavaScript. Large images are automatically downsampled to a 200-pixel square before clustering — this keeps extraction under a second even on 50-megapixel photos, without changing the result (the same clusters emerge at any resolution).

Why Different Modes Give Different Palettes

Each mode filters which pixels get fed into the k-means algorithm. Dominant mode uses every pixel — so backgrounds and neutral tones are included. Vibrant mode filters to pixels with high saturation (the color feels rich, not washed out), dropping whites, grays, and pastels. Muted mode does the opposite — only low-saturation pixels pass through, giving you soft, editorial palettes. The algorithm is the same; the inputs change.

Complementary, Material, and Tailwind Modes

Complementary mode runs dominant extraction, picks the top color, and generates a color-theory harmony palette around it (complementary, analogous, triadic). Material mode runs extraction, then snaps each result to the nearest official Material Design color. Tailwind mode does the same for Tailwind CSS's default palette. These modes are useful when you need a palette that fits a specific design system instead of an arbitrary color scheme.

What You Can Do With Extracted Palettes

Brand Identity

Extract a palette from a mood board, logo, or reference image to build your brand's color system. Export as CSS variables for your stylesheet, Tailwind config for your app, or plain HEX for your style guide.

Web & App Design

Build theme palettes for a website or app from reference screenshots or inspiration images. Tailwind and Material modes make the output drop-in ready for modern design systems.

UI Themes & Dark Mode

Extract two palettes from similar images (one bright, one muted) to build light/dark mode variants. Use the JSON export to generate tokens for design-to-code workflows.

Social Media & Content

Match your Instagram aesthetic, TikTok visual style, or brand photography palette. Pick a reference post, extract its colors, and reuse across thumbnails, stories, and graphics.

Art & Illustration

Study master painters, vintage posters, or reference photography. Extract palettes from artwork you admire and use them in your own illustrations or digital paintings.

Interior Design & Fashion

Pull palettes from photos of rooms, fabrics, or outfits to match paint, textiles, or accessories. The HEX values feed directly into paint matching tools and fabric ordering systems.

Palette Export Formats

Five export formats ready to drop into your workflow.

CSS Custom Properties

Pastes directly into your :root block. Reference with var(--color-1) anywhere in your stylesheet. Works in all modern browsers without build tools.

SCSS Variables

For projects using Sass. Defines $color-1 through $color-N, ready to use in mixins, functions, and nested rules. Drop into your _variables.scss file.

Tailwind Config

Copies a snippet ready to paste into theme.extend.colors in tailwind.config.js. This creates classes like bg-brand-500, text-brand-700 tied to your extracted palette. No manual class renaming — the palette is versioned with your codebase.

JSON

Structured format: each color with HEX, RGB, HSL, and population percentage. Ideal for feeding into design-token pipelines (Style Dictionary, Theo, Dynamics Theme Builder) or for storing palettes programmatically.

Plain HEX

Simplest output: one HEX code per line. Paste into any color picker, design tool, note, or chat. Universally compatible.

Features

6 Extraction Modes

Dominant, Vibrant, Muted, Complementary, Material, Tailwind.

5, 8, or 10 Colors

Pick the palette size that matches your design system.

5 Export Formats

CSS vars, SCSS, Tailwind config, JSON, plain HEX.

100% Private

Runs in your browser. Images never leave your device.

Instant

Extraction completes in under a second, even on large images.

Unlimited & Free

No limits, no sign-up, no watermarks.

Frequently Asked Questions

Is my image uploaded to a server?

No. Palette extraction runs entirely in your browser via the HTML5 Canvas API and JavaScript k-means clustering. Your image never leaves your device — we don't see it, store it, or process it server-side.

How does the palette extractor find colors?

It uses k-means clustering. The algorithm samples pixels from your image, groups them into k clusters based on color similarity, then returns the average color of each cluster. The cluster with the most pixels becomes the dominant color, and the rest are ranked by population. This is the same technique used by Adobe Color, Coolors, and most professional palette tools.

What is the difference between Dominant, Vibrant, and Muted modes?

Dominant pulls the most common colors with no filtering — includes backgrounds, skies, skin tones. Vibrant filters to high-saturation colors only, ideal for logos and bold brand palettes. Muted filters to low-saturation tones, ideal for pastel, editorial, or earthy color schemes. Try all three — the same image produces wildly different palettes.

What is Complementary mode?

Complementary mode extracts your image's dominant color, then generates a complete color-harmony palette around it: complementary (opposite on the wheel), analogous (adjacent), and triadic (three evenly spaced). It's a color-theory-aware palette instead of a raw extraction — useful for designers who want a harmonically balanced scheme based on a reference image.

What is Material and Tailwind mode?

Material mode maps each extracted color to the nearest Material Design color (Red 500, Blue 700, etc.). Tailwind mode maps to the nearest Tailwind CSS class (red-500, slate-700, etc.). Both are useful when you need a palette that fits an existing design system — copy the class names directly into your code.

How many colors can I extract?

Choose 5, 8, or 10 colors. Five is standard for most brand palettes. Eight works well for full design systems with primary, secondary, accent, and neutrals. Ten gives you the widest spread — useful for data visualization color scales or illustration palettes.

What export formats are supported?

Five formats: CSS custom properties (--color-1: #abc), SCSS variables ($color-1: #abc), Tailwind config snippet (ready to paste into tailwind.config.js), JSON, and plain HEX list. Click any format to copy or download.

Can I extract colors from a logo or brand image?

Yes — logos are one of the best use cases. Upload the logo, use Vibrant mode for saturated brand colors, and pick 5 colors. Extracted HEX values are typically within 1-2% of the original brand colors (vector logos give perfect results, photographed or anti-aliased logos may have slight edge artifacts). Export as CSS variables for your stylesheet.

How is this different from an eyedropper tool?

An eyedropper (like our Color Picker) reads the exact color of one pixel you click. A palette extractor algorithmically analyzes the entire image and returns the most representative colors. Use the eyedropper when you know the exact pixel you want. Use the palette extractor when you want a curated set of colors that represent the overall image.

What image formats are supported?

JPG, PNG, WebP, GIF, BMP — anything your browser can render. Transparent PNGs work: fully transparent pixels are excluded from the palette so your colors come from the actual content, not the background.

Is there a file size limit?

No enforced limit. Very large images (50+ megapixels) are automatically downsampled before k-means runs, so extraction stays fast regardless of source size. Downsampling doesn't affect palette quality — the resulting colors are identical because k-means finds the same clusters either way.

Does it work on mobile?

Yes. Fully responsive — iPhone, Android, iPad, any modern browser. Swatch cards are tap-to-copy on mobile, so you can build palettes on the go.

How do I extract a color palette in Photoshop?

Photoshop doesn't have a built-in automatic palette extractor. Workarounds: Image > Mode > Indexed Color with 'Adaptive' palette and 5-10 colors quantizes the image — you can then sample with the Eyedropper. Or use the 'Average Blur' filter on regions. This tool does the full k-means extraction in one click, no Photoshop setup.

How do I extract a palette in Figma or Sketch?

Figma: install the 'Image Palette' or 'Palettes' plugin, drop an image on the canvas, run the plugin. Sketch: use the 'Sketch Palettes' plugin. Both require installing plugins. This web tool works in any browser without installing anything and exports directly to CSS/Tailwind/SCSS — often faster than the plugin workflow.

What is k-means clustering in color extraction?

K-means is an unsupervised machine learning algorithm that partitions data points into k groups by similarity. For palette extraction: each pixel is a data point in 3D color space (R, G, B axes). The algorithm iteratively (1) assigns each pixel to the nearest centroid, (2) recomputes each centroid as the average of its assigned pixels, until centroids stop moving. The final k centroids are your palette.

Why do I get slightly different palettes each time?

K-means initializes with random starting centroids, so results vary slightly run-to-run — especially when multiple valid clusterings exist. This tool uses k-means++ initialization which makes results more stable, but some randomness remains. If you want a specific palette, click Regen 2-3 times and pick the result that looks right.

How do I use an extracted palette in CSS?

Copy the CSS Variables export into your :root block: :root { --color-1: #3b5bdb; --color-2: #fff5f5; ... }. Reference anywhere with var(--color-1). For Tailwind, copy the Tailwind Config export into theme.extend.colors in tailwind.config.js — gives you classes like bg-brand-500.

Can I extract a palette from a website screenshot?

Yes. Take a screenshot (Cmd+Shift+4 on Mac, Win+Shift+S on Windows, or a browser extension). Upload here, use Vibrant mode with 8 colors to get the site's primary brand colors plus accent shades. Faster than inspecting CSS variables site-by-site, especially for competitor research or design audits.

What makes a good color palette?

A strong palette has: (1) one dominant primary color for brand identity; (2) one or two secondary accents for contrast; (3) a neutral range (whites, grays, dark text) for backgrounds and body; (4) enough contrast between text and background (WCAG AA = 4.5:1 for normal text). Extracted palettes from photos may need minor lightness tuning to hit accessibility standards.

How do I find the dominant color of an image?

Use Dominant mode with 5 colors — the first swatch returned is the dominant color (largest cluster, most pixels). It's displayed larger than the others. For just one color, Dominant mode with 5 is still accurate because k-means doesn't change the top result much at different k values. Copy its HEX value directly.

Can I extract colors from a painting or artwork?

Absolutely — one of the most popular use cases. Fine art, vintage posters, and digital illustrations all work. Use Muted mode for impressionist or watercolor art, Vibrant mode for pop art or graphic illustration, Dominant mode for photographs of paintings. Artists use this to study color relationships in reference images.

What is the difference between analogous, complementary, and triadic palettes?

Analogous: three colors sitting next to each other on the color wheel — harmonious, calm. Complementary: two colors directly opposite — high contrast, energetic. Triadic: three colors evenly spaced 120° apart — vibrant, balanced. Complementary mode generates all three variations around your dominant color.

How do I save or bookmark a palette?

Export as JSON or CSS variables and save the text to a file, or copy the plain HEX list to a note. For sharing with a team, export as a Tailwind config snippet and paste into your shared config — the palette is then version-controlled alongside the codebase.

Can I generate a palette from multiple reference images?

Merge your references first with our Combine Photos tool, then upload the merged image here. K-means treats it as one image and returns a unified palette. Alternatively, extract each image separately and manually combine the HEX values you like.