How do I get a color palette from an image?

Drop an image and the dominant colors appear as swatches within a moment, each with its HEX and RGB values. You can choose how many colors to extract, copy any single swatch, or copy the whole set at once. It all runs in your browser, so the image is never uploaded.

How are the palette colors chosen?

The tool samples the image and groups near-identical shades together, then ranks the groups by how much of the image each one covers. The result is the handful of colors that actually dominate the picture, ordered from most to least common, rather than a random selection.

How many colors can I extract?

Pick from 4 up to 12. Four gives you the core palette for a quick scheme; ten or twelve captures more of the subtle in-between tones. Changing the count re-runs the extraction instantly so you can compare.

What does the percentage next to each color mean?

It is the share of the image that color group covers, so you can tell the difference between a dominant background tone and a small accent. Higher percentages are the colors that define the overall feel of the image.

Can I copy the palette for CSS or design tools?

Yes. Pick a format (HEX, RGB, HSL or the modern OKLCH) and each swatch copies that notation with one tap, while 'Copy all' puts the whole palette on your clipboard as a comma-separated list you can paste into a stylesheet, a design tool, or a notes file.

Is my image uploaded to extract the palette?

No. The image is decoded and sampled entirely in your browser. Nothing leaves your device, so you can pull palettes from private or client images safely.

Color Palette from Image

Color palette from image

Drop an image and get its dominant colors as a clean set of swatches, each copyable in HEX, RGB, HSL or the modern OKLCH. Choose how many colors to pull, from 4 up to 12, switch the format, and copy the whole palette at once. It runs in your browser, so the image is never uploaded.

Files never leave your device
Runs in your browser
Free, no signup

How it works

1
Drop an image
Add a JPG, PNG, WebP, GIF or AVIF. It is sampled in your browser to find its colors, with no upload.
2
Pick how many colors
Choose 4 to 12 swatches. The extraction re-runs instantly so you can compare a tight scheme against a richer one.
3
Copy the palette
Copy any swatch's HEX, or grab the whole set at once for your stylesheet, design tool or notes.

What the palette tool gives you

Dominant colors, ranked

Swatches are ordered by how much of the image each color covers, so you can see at a glance which tones lead and which are accents.

HEX, RGB, HSL or OKLCH

Switch the notation and every swatch copies in it with a tap, and the whole palette copies as a list, so it drops straight into code or a design file.

Read locally, never uploaded

The image is sampled in your browser and never sent anywhere, so palettes from private or client images stay on your device.

Where this helps

Brand

Brand and scheme building

Turn a hero image or product photo into a starting palette so your brand colors are drawn from the visuals you already use.

Design

Web and UI design

Lift a coordinated set of colors for backgrounds, buttons and accents that match a key image, then paste the HEX into your stylesheet.

Presentation

Slides and documents

Pull a palette from a cover image so charts, headings and highlights in a deck feel consistent with the imagery.

Inspiration

Mood boards and references

Extract the colors from a photograph or artwork as a reference set when you are gathering a direction for a project.

Tips that help

1
Watch where the percentages fall off
A sharp drop in coverage shows how many colors really carry the image. Below that, swatches are minor accents you can often skip.
2
Start small, then add
Begin with four to six for the core scheme, and only step up to ten or twelve when you need the subtle mid-tones for a richer result.
3
Copy all for a fast start
The copy-all option gives you the whole palette as a list, so building CSS variables or a swatch group is a single paste.
4
Need one exact color instead?
When you want a single precise value rather than the scheme, eyedrop it with the color picker instead of extracting a palette.

Building a color palette from an image: how extraction works and how to use it

A photograph or illustration already contains a palette; the trick is pulling it out cleanly. Automatic palette extraction turns any image into a short, ordered set of its dominant colors, ready for a brand scheme, a slide deck, a website, or a mood board. This guide explains how the extraction decides which colors matter, how many to pull, and how to put the result to work.

How the dominant colors are found

The image is sampled across its pixels, and similar shades are merged into groups so that a thousand near-identical blues count as one blue rather than a thousand separate entries. Each group is then ranked by how many pixels fall into it.

The colors you see are the top groups by coverage, averaged to a representative shade and ordered from most common to least. That ordering is what makes the result a palette rather than a list: the first swatch is the tone that defines the image, the last is a minor accent.

Because the grouping tolerates small differences, the palette stays readable. You get the handful of colors a person would name when describing the image, not every pixel variation the camera recorded.

Choosing how many colors to pull

Fewer colors give you the essence. Four or six swatches capture the core scheme, which is usually what you want for a brand palette, a two-tone layout, or a quick pairing of a background and an accent.

More colors capture nuance. Ten or twelve pulls in the in-between tones, the soft mid shadows and subtle highlights, which is useful for illustration references or when you want a richer gradient to work from.

There is no single right number, so the count is adjustable and re-runs instantly. Start at the default, then step up if the palette feels too flat or down if it feels noisy, and watch where the percentages drop off to see how many colors really carry the image.

Putting the palette to work

For the web, copy the HEX values straight into your stylesheet or design tool. The 'copy all' option hands you the whole set as a list, so building CSS variables or a swatch group is a paste rather than a retype.

For brand and presentation work, the ordered palette tells you the hierarchy: lead with the high-percentage colors and use the low-percentage ones as accents, so the result echoes the balance of the original image.

And if you only need one specific color rather than the whole set, the color picker lets you eyedrop an exact pixel. Palette extraction is for the scheme; the picker is for a single precise value.

Frequently asked questions

Honest answers to what people ask before using this tool.

Color palette from image

How it works

Drop an image

Pick how many colors

Copy the palette