Get the dominant colours of an image

For matching a page to a photograph, or recovering a brand’s colours from a logo when nobody can find the style guide.

Loading the tool…

How it works

  1. Drop one or more images.
  2. Choose how many colours you want.
  3. Copy the result as CSS variables (for web pages) or as JSON.

Why nothing is uploaded

Every operation on this page is done by code running inside your browser tab, using the same engine that renders web pages. The file is read from disk into your tab’s memory, transformed there, and written back out as a download. It is never sent anywhere — not to us, not to a third party.

Verify it yourself

  1. Open your browser’s developer tools (F12) and select the Network tab.
  2. Load your file and run the tool.
  3. The only requests you will see fetch the tool’s own code — and, for a few heavy tools, their open-source engine from a public CDN — plus one small page-view ping to loreatec.jp (page address and title, nothing more). None of them carry your file.

Proof it stays local →

Frequently asked questions

How are the colours chosen?

Similar colours are grouped together and the groups are ranked by how much of the image they cover, so the first colour is the one you would call the background. The result is always the same for the same image, which matters when you are settling on brand colours.

Why is the palette a bit muted?

Because each swatch is the average of its group. A photo with a bright red logo on a large grey wall is mostly grey, and the ranking says so. Ask for more colours to bring the smaller accents out.

Can I get the exact colour of a logo?

For a flat graphic, yes — the areas are uniform so the average is the real value. For a photograph of a printed logo, no: lighting shifts every pixel, and the result is a close approximation.

Is transparency handled?

Transparent pixels are ignored rather than counted as white, so a PNG logo on no background gives the logo’s colours instead of a palette dominated by white.