Get a Colour Palette From an Image — Free
Pull a colour palette out of any image. Drop a photo and get back the dominant colours with hex codes, RGB values, and the share of the frame each one occupies. It runs in your browser, so the image is never uploaded.
How to do it
- Drop the image you want to pull colours from.
- Choose how many colours you want in the palette.
- Read off the hex values — each swatch shows its own code.
- Copy the hex codes into your design tool.
How the colours are chosen
The tool clusters every pixel in the image by colour similarity and reports the centre of each cluster, defaulting to five. That is meaningfully different from picking the most frequent individual pixel values, which is what naive colour pickers do and why they return five nearly identical blues from a photo of the sea. Clustering groups all the similar blues together into one representative colour and leaves room in the palette for the sand and the sky. The result is a palette that matches what a person would say the image is made of.
Coverage is the number people ignore
Each colour comes with the percentage of the image it accounts for, and that figure is what turns a list of swatches into a usable palette. A colour covering 45 percent of the frame is a background and should be treated as one in any design that borrows from it. A colour covering 3 percent is an accent, and using it as a page background will look nothing like the source image felt. Designers who transplant palettes without respecting the proportions are the reason so many colour-matched sites look wrong.
What you can do with the output
Hex codes drop straight into CSS, design tools, and brand documents. The common uses are building a site theme around a photograph, matching a graphic to product imagery, deriving a slide-deck palette from a hero image, and checking what a competitor's site is actually built from. It is also useful in reverse: extracting the palette from your own logo when the original brand file has been lost and all anyone can find is a PNG on a slide from four years ago.
Photos versus graphics
Graphics with flat colour give exact results, because the clusters correspond to real design decisions someone made. Photographs give representative results, because the colours are continuous and any palette is a summary. A sunset does not contain five colours; it contains thousands, and the five returned are the best five-way division of them. That is the right answer for design work, but do not treat a photographic hex code as the true colour of an object — lighting, white balance, and JPEG compression all moved it before you ever saw it.
Limits
Input up to 5 MB in JPG, PNG, or WebP. The palette size defaults to five colours. Everything is computed in your browser, so a confidential mock-up or an unreleased design never leaves your device, and there is no upload wait.
Frequently asked questions
How does it decide which colours are dominant?
It clusters pixels by colour similarity and returns the centre of each cluster, rather than counting individual pixel values. That avoids returning five near-identical shades.
What do the percentages mean?
The share of the image each colour accounts for. A colour at 45 percent is a background; one at 3 percent is an accent. Respecting that ratio matters when reusing a palette.
Can I get the exact colour of an object in a photo?
Only approximately. Lighting, white balance, and compression all shift colour before you see it. Flat graphics give exact values; photographs give representative ones.
What formats does it output?
Hex codes and RGB values for each colour, along with its coverage percentage. Hex drops straight into CSS and design tools.
How many colours does it return?
Five by default, which is the practical size for a design palette. That is enough to capture a background, a mid-tone, and accents.
Is my image uploaded?
No. The clustering runs in your browser, which matters if you are analysing an unreleased design or a confidential mock-up.