Skip to content
Creativo Labs

Offline tool

Colour Palette Extractor

Pull the dominant colours out of an image with Color Thief. Everything runs in your browser — no upload, no API key, no network request.

Upload an image

Nothing is uploaded to a server — the colours are read on your own device.

Settings

How the palette is pulled out of the image.

How many swatches to pull from the image.

About extracting a colour palette

This tool reads an image and reports the colours that dominate it, as HEX, RGB and HSL, with a WCAG contrast figure beside each one. It runs entirely in your browser using Color Thief — the image is never uploaded, and no API key is involved.

The method is clustering: every pixel is grouped by colour and each group's representative becomes a swatch. That means the swatches reflect how much of the frame a colour occupies, which is not always the same as which colour you noticed first.

When this is the right tool

  • Building a palette from a reference photograph, a piece of packaging or a film still.
  • Matching a design to imagery it will sit alongside.
  • Pulling brand colours out of an asset when nobody can find the brand document.
  • Checking whether text will be legible on a colour before you commit to it.

How to use it

  1. Upload an image

    Nothing is sent anywhere — the file is read directly in the page and the extraction runs on your own machine.

  2. Choose how many colours

    Fewer swatches give a wider spread; more give finer distinctions. If two swatches come back nearly identical, ask for fewer.

  3. Crop first if the subject is small

    Extraction is driven by pixel count, so a small but striking element can be outvoted by a large background. Crop to the region you care about and extract from that.

  4. Copy or export

    Copy any swatch as HEX, RGB or HSL, or export the palette as JSON for code and as a rendered PNG for a document or a brief.

How it works

Method
Median-cut colour quantisation via Color Thief, run on a downscaled copy — quantising a full-resolution photograph pixel by pixel would block the page for seconds without changing the palette.
Colour space
sRGB throughout, which is what a screen uses. Saturated screen colours are exactly the ones ink cannot reproduce — what survives the trip to print.

Common questions

How many colours can I pull out?

Between 2 and 16, eight by default. The colours are the ones actually present in the image: the pixels are clustered perceptually and each swatch is then snapped back to a real colour in the photo, rather than an invented harmony built around one of them.

Are my images uploaded anywhere?

No. The image is decoded and sampled by your own browser, there is no API key and no network request. Closing the tab is all it takes to remove every trace of it.

What formats can I copy or export?

Every swatch gives you HEX, RGB and HSL with one click, and the whole palette exports as JSON for a design token file or as a PNG strip to drop into a mood board.

What is the contrast figure next to each colour?

The WCAG contrast ratio against black and white, so you can tell at a glance whether text will be readable on that swatch. 4.5:1 is the AA threshold for body text, 3:1 for large text.

Why do very similar shades sometimes appear twice?

Because they are genuinely both in the image — a gradient or a large soft-lit area occupies enough pixels to claim two slots. Asking for fewer colours merges them.

Which file types does it read?

JPG, PNG and WebP, plus EPS files — an EPS is read through its embedded JPEG preview, since no browser can decode PostScript artwork directly. A fully transparent image has no colours to read and is reported as such.

Guides on this

Longer answers to the questions this tool raises.

Related tools