Colour Palette Extractor
Pull the main colours out of an image, as HEX and RGB.
Drop an image here
Or choose a file, or paste a screenshot. The colours are read on your device and the picture is never uploaded.
Reading the colours…
That didn't work.
Your image never leaves your device.
Keyboard shortcuts
- / or ⌘K
- Search every tool
- ⌘↵
- Run this tool, from anywhere on the page
- ⌘S
- Download the result
- ?
- Open and close this list
About the Pathine Colour Palette Extractor
Drop in an image and get the colours it is actually made of, as HEX, RGB and HSL, each one a click to copy. Useful when you have a photograph, a screenshot or a logo and need the palette that goes with it.
Which colours come back depends entirely on how they are chosen, and the obvious methods do badly. Counting the most common pixels returns five near-identical blues on a landscape, because most of the frame is sky. Median cut — the textbook answer — splits the colour space at each region's population midpoint, which lands inside the sky too, so it fails the same way. This tool clusters instead, which optimises for representative colours rather than equal-sized groups, so a small but distinct colour keeps its own place in the palette.
Colours are read from a downscaled copy in your browser — 160 pixels on the long edge, which is ample to characterise a photograph and keeps a 40-megapixel file from locking up a phone. The image itself is never uploaded.
When you'd reach for it
Building a palette from a photograph
A single reference image is the fastest way to a colour scheme that already works, because the colours in a good photograph are related to each other in ways a colour wheel will not tell you.
Matching a brand you have no guidelines for
A logo as a PNG and no brand document is a common situation. Pulling the exact HEX values off the file beats guessing with an eyedropper.
Design tokens for a new project
Export the palette as CSS custom properties and it drops straight into a stylesheet, already named and ready to use.
Checking what an image will do to a layout
Seeing the dominant colours and their share of the pixels tells you whether a hero image will fight the interface sitting on top of it.
How to extract colours from an image
-
Add an image
Drop it here, paste a screenshot, or choose a file. JPG, PNG, WebP and AVIF all work.
-
Choose how many colours
Between three and twelve. Five or six is the useful range for most palettes; more than that and the colours start to resemble each other.
-
Copy what you need
Click any value to copy it — HEX from the swatch itself, or RGB and HSL from the row beside it. Each colour also shows what share of the image it accounts for.
-
Or take the whole set
Copy every HEX at once, or download the palette as CSS custom properties ready to paste into a stylesheet.
Common questions
How does it choose the colours?
k-means clustering. Every colour in the image is a point in three dimensions, and the tool finds the set of centres that best represents them, then reports each centre and how much of the image belongs to it. The starting points are chosen by picking whichever colour is farthest from everything selected so far, which is what lets a small, distinct colour — one yellow sun in a blue sky — claim a slot of its own.
Will I get the same palette every time?
Yes. Many clustering tools seed randomly and give you a slightly different palette on each run, which is maddening if you copied a value yesterday and want it again. The starting points here are derived from the image itself, so the same image always produces the same answer.
Why are the colours slightly different from an eyedropper?
An eyedropper reports one exact pixel. These are averages across a region of colour space, so they represent the image as a whole rather than one point in it. For a flat graphic the two agree; for a photograph the average is usually the more useful number.
What do the percentages mean?
The share of the image's pixels that fell into that colour's group. It is a good guide to which colour should dominate a design and which should be an accent.
Does it handle transparency?
Mostly-transparent pixels are skipped rather than averaged in. Including them would drag every colour toward whatever happens to sit behind the image, which is not a colour in the picture at all.
Is my image uploaded?
No. It is drawn to a canvas in this browser tab and the pixels are read there. Nothing is transmitted, and the tool keeps working with the network disconnected.