Upload any image and this tool pulls out the colours it is actually made of — as HEX, RGB and CMYK codes you can copy straight into your CSS or your design file. Nothing is uploaded to a server: the whole thing runs in your browser, so it works on a slow connection and your image never leaves your machine.
or drop one here — JPG, PNG, WebP, GIF
Your image stays in your browser. Nothing is uploaded.
How to find the dominant colours in an image
- Choose an image — press the button above or drag a file onto it. JPG, PNG, WebP and GIF all work.
- Read the swatches — six colours appear, ordered by how much of the picture each one covers. The first swatch is the most dominant colour in the image.
- Copy a code — click any swatch and its HEX value goes to your clipboard. The RGB and CMYK values are printed underneath.
- Start over — press Reset to clear the image and try another.
HEX, RGB and CMYK: which one do you need?
The tool gives you all three for every colour, because they are for different jobs. They describe the same colour in three different languages.
| Format | Looks like | Use it for |
|---|---|---|
| HEX | #14315B | CSS, HTML, most design tools. Six characters: two for red, two for green, two for blue. |
| RGB | rgb(20, 49, 91) | Anywhere you need to adjust a channel by hand, or add transparency with rgba(). |
| CMYK | 78, 46, 0, 64 | Print. Screens mix light, printers mix ink, so the same colour needs different numbers. |
A practical warning about CMYK: a bright colour on screen often cannot be printed exactly. Screens emit light and can reach saturations that ink on paper cannot. If a printed colour looks duller than it did on your monitor, that is why — not a mistake in the conversion.
How the tool decides which colours are dominant
Most colour pickers do not explain this, so here is exactly what happens when you drop an image in. It is worth understanding, because it tells you when to trust the result and when not to.
- The image is drawn small. It is scaled so its longest edge is 160 pixels. A 4000-pixel photo has 16 million pixels to read; the scaled copy has about 25,000, and the proportions of colour in it are the same. This is why the result appears instantly even for a large file.
- Every pixel is sorted into a bucket. Each of red, green and blue is rounded to 16 levels instead of 256. Two pixels that differ by an amount no eye could see land in the same bucket and get counted together.
- The buckets are ranked by how many pixels fell into each. The busiest bucket is the most common colour in the picture.
- Near-duplicates are rejected. A colour is only kept if it is far enough from the ones already chosen. Without this rule, a photograph of a blue sky returns six blues that look identical — technically correct and useless. If the image genuinely has fewer than six distinct colours, the rule relaxes rather than returning three empty slots.
- Each swatch is the average of its bucket, not the corner of it, so the colour you copy is one that is really in the picture.
Transparent pixels are skipped entirely. A PNG logo on a transparent background returns the colours of the logo, not a muddy average of the logo and nothing.
Your image never leaves your browser
Most online colour extractors upload your file to a server, process it there and send the result back. This one does not. The image is drawn to a canvas element and read back by JavaScript running on your own machine — there is no upload, no endpoint, and nothing stored.
That matters if you are working with a client’s unreleased artwork, a screenshot with something private in it, or simply on a connection where uploading a 10 MB photograph would take a minute. It also means the tool keeps working if your connection drops after the page has loaded.
What to do with the colours you get
Build a palette from a photograph
Take the dominant colour as your background, the second or third as your primary accent, and the darkest of the six for body text. This is the quickest honest way to make a site feel like it belongs with its photography instead of fighting it.
Match a brand you cannot ask
If you have a logo as an image and no brand guidelines, dropping it in gives you the exact HEX codes rather than a guess from looking at the screen. Colours picked by eye are almost always a few values off, and the difference shows when the real logo sits next to your version of it.
Check your own design
Screenshot a page you have built and run it through. If the six colours that come back are not the six you chose, something in the design is louder than you intended — usually an image, an advert slot, or a stray border.
Set CSS variables
Copy the HEX values straight into custom properties and use them everywhere, rather than repeating colour codes through a stylesheet:
:root {
--brand: #14315B;
--accent: #B45309;
--surface: #F1F4F8;
--ink: #0C1220;
}
.button {
background: var(--brand);
color: #FFFFFF;
}One warning worth repeating: a colour lifted from a photograph is not automatically readable as text. Check the contrast between your text colour and your background before you ship it — WCAG asks for a ratio of at least 4.5:1 for body text. A beautiful muted beige on cream fails that badly, however good it looks in a mockup.
Common questions
Why did I get six shades of the same colour?
Because the image really is mostly one colour. The tool holds its choices apart, but if an image has only two or three genuinely distinct colours in it, the rule relaxes so the row still fills rather than showing you three blanks.
Does it work on a screenshot?
Yes, and screenshots usually give cleaner results than photographs. A screenshot has flat areas of exact colour; a photograph has lighting, shadow and camera noise spread across thousands of near-identical values.
Is there a file size limit?
Only whatever your browser can open. Since nothing is uploaded there is no server limit to hit, and the image is scaled down before any pixel is read, so a large file is no slower to analyse than a small one.
Why is the CMYK different from my design tool’s?
CMYK conversion depends on the colour profile a tool assumes for the paper and ink. This uses the standard arithmetic conversion, which is right for screen work and for getting close. For a commercial print run, take the HEX to your printer and let them convert against their own profile.
Does it cost anything?
No. There is no sign-up, no limit on how many images you run, and no watermark on anything.