How to Extract a Color Palette from Any Image

You found an image with colors you want. Here is how to get them into hex.

Step 1: Drop the image

Open the image-to-palette tool. Drag a file in, click to browse, or paste from your clipboard with Cmd/Ctrl + V. Works on JPG, PNG, and WebP.

Everything runs in your browser. The image does not get uploaded anywhere, which is handy if it is a client screenshot or anything else you would rather not send to a server.

There is also a button for this in the top bar of the mesh gradient generator, in case you are already in the editor.

Step 2: Pick how many colors

A slider goes from 2 to 8. Drag it until the palette feels right.

Logos and UI screenshots usually look good at 3 to 5. Photos and posters benefit from more, since they have more variation to capture. The slider updates in real time, so it is quick to try a few.

Step 3: Use the palette

Three things you can do with the swatches.

Copy the hex codes. One button, comma-separated. Paste into Tailwind, CSS variables, Figma, wherever.

Open it in the mesh gradient generator. The primary button sends the palette to the editor, preloaded. From there you can animate it, tweak the distortion, and export as a 4K image, MP4, or CSS. As far as I know, no other palette extractor does this part, which is the main reason we built the integration.

Save it. If you are signed in, the heart on the palette card saves it to your library. Each saved palette gets its own page you can share or come back to.

Which images work best

Logos and brand screenshots are the easiest. The source already has a small, intentional palette, so the tool just finds it. Same for app screenshots and UI references.

Photos with strong directional lighting work well, especially anything that has been color graded already. Product shots, cinematic stills, that kind of thing.

Phone snapshots are hit or miss because the lighting is usually uneven. Cropping in tighter on the part with the colors you actually want tends to fix it.

Posters and album covers are reliable. They were designed with a specific palette in the first place.

Collage-style mood boards do not work well, because they are made of images that each have their own palette. Pick one image from the board rather than the whole thing.

When the extractor struggles

A few cases where the results can feel off.

Low-contrast or near-monochrome images make the clusters collapse into very similar tones. If your source is mostly grays with subtle warmth, you might get five shades of almost the same gray. Boosting saturation in the source first helps. And if shades of a single color is actually the look you are after, skip the photo and start from a monochromatic gradient palette directly.

Pure gradient images do not have distinct anchors to cluster around, so the result can feel arbitrary.

Images with one dominant color and tiny accents tend to absorb the accents into the main cluster. The workaround is to ask for more colors than you want, then drop the extras in the editor.

If a palette feels off, try a different crop or a different image. Extraction is fast enough that throwing two or three at it costs nothing.

Keep exploring

• The image-to-palette tool if you skipped to the end
• The mesh gradient generator for what to do with the palette
• Browse community palettes when you do not have an image to start from
• The color directory for looking up specific hex values
• How to create mesh gradients for the next step