Skip to content
EVOA Toolbox

Image to Color Palette

Extract the dominant colours from any image, copy hex codes, pick exact pixels with an eyedropper and export the palette.

Processed locally in your browser. Your file is not uploaded.

Loading tool…

What this tool does

Drop in a photo, screenshot, logo or illustration and get its dominant colours with the share of the image each one covers. The image is scaled down to about 100 pixels on its longest side and clustered with a deterministic k-means algorithm, so the same image always gives the same palette. Transparent pixels are ignored, so logos with empty backgrounds are handled correctly.

Click a swatch to copy its hex code. Click anywhere on the image to pick the exact pixel colour at that spot, or use the native eyedropper (available in Chromium-based browsers) to pick any colour on your screen. Picked colours are added to the export alongside the extracted ones.

Export as CSS variables, Tailwind v3/v4 snippets, JSON or a PNG swatch strip. The image is decoded locally on your device and never uploaded.

How to use it

  1. 1Add an image (PNG, JPG, WebP, GIF, AVIF or SVG).
  2. 2Use the slider to choose how many dominant colours to extract.
  3. 3Click a swatch to copy its hex code.
  4. 4Click on the image, or use the eyedropper, to pick specific colours.
  5. 5Export the result in the format you need.

Supported formats

Input: PNG, JPG, WebP, GIF (first frame), AVIF and SVG. Output: CSS, Tailwind, JSON and PNG.

Privacy

This tool runs in your browser. The data you provide is processed on your device and is not sent to our servers.

Limitations

  • Dominant colours are averages of similar pixels, so they may not match any single pixel exactly. Use the eyedropper for exact values.
  • Very small accent colours may be merged into a larger neighbour when you ask for few colours.
  • The native eyedropper is not available in Firefox or Safari; clicking on the image works everywhere.
  • Colour management is not applied: values are as the browser decodes them (sRGB).

FAQ

How are the colours chosen?

Pixels are grouped into similar-colour buckets and then refined with k-means clustering. The result is the average colour of each cluster and the percentage of pixels it represents.

Why does the same image always give the same colours?

The algorithm uses a fixed seed, so results are repeatable. Changing the number of colours changes the clustering.

Does it work with transparent PNGs?

Yes. Fully or mostly transparent pixels are ignored so they do not show up as black or white in the palette.

Is my image uploaded?

No. It is decoded and analysed in your browser.

Related tools