Colour
Extract a palette from an image
Drag a photo in and out come its dominant colours with the percentage each one covers. From two to twelve colours, each with its value ready to copy. The image never leaves your browser.
Your images and your colours never leave this page.
Why it matters that this is not uploaded
Two of these four tools work with images, and what gets dragged in here is hardly ever just any photo: it is a client's logo before launch, a screenshot of an internal dashboard, or an unpublished product shot. Sending that to a stranger's server to pull a colour out of it is a bad trade, and an unnecessary one: reading an image's pixels needs no server — the browser does it with the canvas it already ships with. Here there is nowhere to send it.
What people use it for
- Pulling a palette from a product shotSo the page, the background and the buttons match what is in the photo.
- Starting an identityA reference photo, its palette, and build from there.
- Choosing a presentation backgroundA colour already in the image always sits better than one brought in from outside.
- Matching a screenshotReproducing the colours of an interface you only have as an image.
- Documenting somebody else's brandGetting the colours out of a logo sent to you as a JPG, without the original file.
- Seeing whether a photo fitsChecking at a glance whether an image's tones sit with your palette.
How the colours are found
What does not work is the first thing anyone thinks of: averaging all the pixels. The average of a photo with blue sky and golden sand is neither blue nor golden, it is a muddy grey that appears nowhere in the image.
What happens here is that the colour space is split into boxes, the centre of each is taken, and then it is refined: every pixel is assigned to the colour it resembles most and every colour moves to the centre of its own pixels, a few times over, until they stop moving. That makes the colours that come out colours that are really in the photo, rather than averages between two.
The percentage shown is the share of pixels that resemble that colour more than any other. It is a measure of presence: how much of the image that tone covers, not how many times that exact value appears.
How many colours to ask for
Three or four gives the essence of the image: enough for a brand palette or for picking a background. Six or eight brings out the in-between tones, which is what you need if you are illustrating or composing. Above ten you tend to start getting variants that look much alike.
If you ask for more colours than the image actually has, you get the ones there are: an image of three flat colours gives three, even if you ask for twelve.
A note about photos
The image is scaled down before analysis, to about 500 pixels across. It is not a crop and it does not affect the result: a photo's dominant colours are the same at full size as scaled down, and doing it this way keeps the analysis instant even when you drag in a twenty-megapixel photo.
Frequently asked questions
Is my photo uploaded to a server?
No. The image is read with the browser's own canvas and the analysis happens right there. There are no accounts, no database and no request that carries your photo anywhere.
It matters because what gets dragged in here is usually an unpublished product shot, a client's logo or a screenshot of something internal. With the page loaded, disconnect from the internet and check.
What does the percentage mean?
How many of the image's pixels resemble that colour more than any other in the list. It is a measure of presence: how much surface that tone covers.
It is not how many times that exact value appears, which in a real photo would almost always be zero: in a photograph there are hardly any two identical pixels.
Why are the colours I can see not in the list?
Most often you are looking at a small, highly saturated detail — a red object in a corner — that covers very little surface. The extractor sorts by presence, so that red will appear near the bottom, or not at all if you asked for few colours.
Try raising the number of colours, or use the eyedropper in the picker, which lets you grab the exact pixel you want.
How many colours should I ask for?
Three or four for the essence of the image, which is what a brand palette needs. Six or eight if you want the in-between tones for illustrating or composing.
Above ten you tend to get variants that look much alike. And if you ask for more than the image has, you get the ones there are: an image of three flat colours gives three.
Does any image format work?
PNG, JPG, WebP, GIF, AVIF and BMP, up to 30 MB. If the image has transparency, the transparent areas do not count: only pixels you can see contribute colour.
The other colour tools
Picker and converter
Colour wheel with HEX, RGB, HSL, HSV, CMYK and CSS name in sync. With an eyedropper for any photo.
Palette generator
The 50 to 900 scale and the five classic combinations, ready to copy as CSS, Tailwind, JSON or an image.
Contrast checker
The contrast ratio, AA and AAA levels, and the closest colour that does pass when yours falls short.