Zero uploads · 100% in-browser No sign-up · No watermarks · Free forever

Pull a colour palette from a photo

Drop an image and get its dominant colours as HEX, RGB and HSL, ready to paste into your CSS or design. Click any swatch to copy it. Great for matching a site to a hero photo. Nothing is uploaded.

Runs in your browser HEX, RGB and HSL Click a swatch to copy

Drop an image to extract its palette

JPG, PNG, WEBP, works best with photos and product shots

Real output

The palette from our test photo

These are the six dominant colours the tool pulled from a mountain-lake photo. The actual output, copied straight from the tool, not a mockup.

Six extracted swatches with hex codes 0E3C3A, 067D9E, 305349, 7A695E, 4B99B9 and 87B0C7, each with a percentage and RGB value
Each swatch shows its HEX, its RGB, and how much of the image it covers.

The two teals at 25 percent each are the water and the shadowed pine; the warm brown is the rock; the pale blues are the sky and its reflection. The percentages tell you which colours to build around and which are just accents.

How to use it

From photo to hex codes

1

Drop an image and read the swatches

Drag any photo onto the box and the palette appears instantly, sorted by how much of the image each colour covers. Use the slider to pull anywhere from four to twelve colours.

The colour palette tool with a photo loaded and its swatches extracted
The tool with a photo loaded and its palette extracted.
2

Copy what you need

Click any swatch to copy its HEX to your clipboard, or use Download palette as CSS to get all of them as variables ready to paste into a stylesheet. Every swatch also carries its RGB and HSL values.

How it works

How the colours are chosen

The tool does not grab a few random pixels. It scales the image down, reads thousands of pixels, and runs a median-cut algorithm: it repeatedly splits the cloud of colours along its widest axis until it has as many groups as you asked for, then returns the average colour of each group.

The result is sorted by coverage, so the colour at the top is genuinely the most present in the image, not just the brightest. That is why the percentages matter: they tell you which colours actually define the image and which are minor accents.

What it is for

What to do with the hex codes

  • Match a website to a hero image. Pull the palette from your main photo and use those exact colours for buttons, links and backgrounds so the page feels of a piece.
  • Build a brand or mood board. Extract from a reference image you love and use the top four to six colours as a starting palette.
  • Recolour a design to fit a photo. Grab the dominant tones and apply them to charts, slides or graphics that sit next to the image.
  • Pick readable text colours. Knowing the dominant background colour helps you choose text with enough contrast against it.
Honest limits

What this tool will not do

It reports dominant colours, not artistic ones

The most present colour is not always the most useful. A small vivid accent can define a design more than a large dull background. Use the percentages as a guide and trust your eye.

It does not build a full brand system

It gives you the raw colours. Turning them into a palette with tints, shades and accessible contrast pairs is still a design decision you make.

Very busy images give muddy averages

An image packed with many colours can average into dull greys and browns. It works best on photos and product shots with clear dominant tones.

FAQ

Frequently asked questions

How does it pick the colours?

It samples thousands of pixels from your image, groups them in colour space with a median-cut algorithm, and returns the largest groups sorted by how much of the image each one covers. Every colour comes with HEX, RGB and HSL so you can paste it straight into code or a design tool.

How do I copy a colour?

Click a swatch and its HEX is copied to your clipboard, with a checkmark to confirm. There is also a Download palette as CSS button that gives you all of them as ready-to-use variables.

How many colours should I pull?

Four to six is the practical maximum for a usable brand palette. Beyond that it gets hard to build a coherent design. The slider lets you choose from four up to twelve.

Why are some colours barely there?

Colours covering under about five percent of the image are usually noise or small accents. Treat the top few by percentage as your real palette and the rest as optional highlights.

Does it give me artistic or brand colours?

No. It reports the colours that are actually most present in the image, which is not always the most striking one. A tiny bright accent can matter more to a design than a large dull background, so use the percentages as a guide, not a rule.

Are my images uploaded anywhere?

No. The colours are read from the image directly in your browser through the Canvas API. Nothing is sent to a server, and it works offline once the page has loaded.

Related tools

Other tools you might need

Photo Filters

Adjust the colours and mood of a photo before pulling a palette.

Open tool

Image Crop

Crop to the part of a photo whose colours you want.

Open tool

Image Resizer

Resize a hero image once you have matched its colours.

Open tool

Image Converter

Convert the image to a web format for your project.

Open tool

Image Compressor

Shrink the image for the web once colours are set.

Open tool

Background Remover

Isolate a subject before reading its colours.

Open tool

Add Watermark

Brand an image using a colour from its own palette.

Open tool

EXIF Metadata Viewer

Inspect the other hidden data a photo carries.

Open tool
View all 23 tools
Related guides

Learn the why behind the results

View all guides