Image Tools

Image Palette Extractor

Turn a photo, artwork or screenshot into a ready-to-use colour palette. Choose how many colours you want, see how much of the image each one covers, and export the palette straight into your code or design software.

  • Files stay on your device
  • No sign-up
  • Free to use

How to use Image Palette Extractor

  1. Drop an image onto the upload area or paste one.
  2. Choose how many colours to extract and how to order them. Tick the background option to skip near-white and near-black areas.
  3. Select a swatch to copy its HEX code, and check the proportion bar to see how the colours are balanced.
  4. Choose an export format, then copy the code, download the file or save a PNG palette card.

Image Palette Extractor features

3 to 12 colours

From a simple accent trio to a detailed palette for illustration work.

Coverage percentages

Every colour shows its share of the image, and the proportion bar visualises the balance.

Background filter

Skip near-white and near-black so studio backgrounds and shadows do not take over the palette.

Three sort orders

Most used first, rainbow order by hue, or light to dark for building tints and shades.

Code exports

CSS custom properties, SCSS variables, a Tailwind colour object or JSON with names and shares.

Design-tool exports

A .gpl palette for GIMP, Inkscape and Krita, plus a 1200 × 630 PNG palette card for sharing.

When to use Image Palette Extractor

  • Building a website colour scheme from a brand photo or hero image.
  • Creating a mood board palette for an interior, wedding or fashion project.
  • Studying the colour composition of paintings and film stills.
  • Importing a palette into GIMP, Inkscape or Krita for illustration work.
  • Generating Tailwind theme colours that match product photography.

Image Palette Extractor FAQ

How is this different from the Dominant Color Finder?

The Dominant Color Finder gives one representative colour per image and works in bulk. The Palette Extractor focuses on a single image and gives a complete, adjustable palette with proportions and export formats for design work.

Why do some colours I can see not appear in the palette?

Small details cover few pixels, so they may be merged into a larger similar colour. Increase the number of colours, or use the Image Color Extractor to pick a specific spot.

What is a .gpl file?

The GIMP Palette format, a simple text file listing colours. GIMP, Inkscape, Krita and several other programs can import it as a swatch palette.

Are the percentages exact?

They are calculated on a reduced copy of the image of up to 200 pixels on the longest side, which is accurate to within a percent or two for typical photos and much faster.

Is my image uploaded?

No. The palette is computed in your browser.

From pixels to a palette

Even a simple photograph contains tens of thousands of distinct colour values, because lighting, shadows and texture make every surface vary slightly. A palette reduces that complexity to a handful of representative colours, a process called colour quantisation. The approach here groups pixels with the k-means algorithm: it picks starting colours that are far apart, assigns every pixel to its nearest colour, moves each colour to the centre of its group, and repeats until the groups stop changing.

The percentages show something a list of colours alone does not: balance. Designers often refer to the 60-30-10 guideline, in which a dominant colour covers most of a composition, a secondary colour supports it, and an accent is used sparingly. A palette extracted from a photo you like reveals its real proportions, which you can reproduce in a layout so it feels as balanced as the source.

Backgrounds can distort a palette. A product photographed on white might return several near-white shades that crowd out the product’s own colours. The background filter removes very light and very dark clusters and recalculates the shares among the remaining colours, so the palette describes the subject rather than the studio.

Before using an extracted palette for text and interface elements, check contrast. Colours that look harmonious in a photo do not necessarily provide readable text; pair light palette colours with dark text and vice versa, and test combinations against accessibility guidelines.

Other useful tools