This palette reader measures the colours already in your picture instead of guessing new ones. Drop in a product shot, a moodboard, or a poster, and it returns the dominant colours as HEX codes ranked by how much of the visible image each one covers. It runs in the browser, so the file never leaves your device. Click a colour to copy it, click the image to pin an exact accent, then export a share card or CSS variables in the same order.
3, 5, or 8 coloursHEX and coverage %Manual accent samplingPNG card and CSSFree, no account
Choose a JPG, PNG, or WebP
Up to 25 MB and 24 megapixels. The file is decoded in this tab and never leaves the device.
Colours
A ceiling, not a quota: fewer distinct colours come back unchanged.
Choose an image to see its colours here.
CSS variables
Choose an image to generate the variables.
Same order as the swatches and the exported card.
A flat graphic resolves cleanly because there is nothing between the fills. The three fills come back in the order they cover the canvas, so the 70 per cent field is the primary, the 20 per cent band is the secondary, and the 10 per cent mark is the accent. Ask for eight and you still get three — the toolbar count is a ceiling, not a quota.
#D32F2F · #00897B · #ECD48C
3 colours · flat fills · no transparency
The empty area around a cut-out is not a colour, and treating it as one is how a palette ends up 60 per cent white or black. Pixels below the visibility threshold are skipped, so the shares describe the carton alone. Only the near-zero alpha fringe where the cut-out meets the old background counts as background too, which is why no pale halo colour appears in the row.
#E8E1D5 · #A89880 · #2F3B44 · #C2553F · #F2F0EB
5 colours · PNG with alpha · edges excluded
Textured posters are mostly mid-tone texture, so the loudest colour can still be the smallest one. Clicking it on the image pins it to the front of the row, where it stays through every re-extraction and every count change. Locked colours are never re-sorted by coverage, because the reason you picked it is that coverage was working against you.
#E4573D · #8C8478 · #C9C2B4 · #3D3A36 · #EDE7DC
5 colours · one locked accent · textured base
The direct answer
Each swatch is one colour that a meaningful share of the visible pixels actually are, ordered from the largest share to the smallest. The percentage under a swatch is that colour’s share of the non-transparent pixels, so the row reads as a summary of the image rather than a mood board drawn from it.
The reading starts from every pixel that is visible, then groups pixels that are perceptually close into one colour. Grouping uses a redmean distance, which weights green more heavily than red or blue because the eye resolves green detail best, and corrects the red term depending on how red the pair is. Two shades a couple of units apart land in the same group; two shades a designer would call different do not. What survives is a short list of genuinely distinct colours, each carrying the pixel count of everything grouped into it.
Ordering is by coverage, descending, which is the part most palette tools skip. A fixed five-swatch row in discovery order tells you what a thumbnail happened to contain first, not what the image is mostly made of. Here the first swatch is the field, the last swatch is the detail. When two colours cover exactly the same number of pixels, the darker one is listed first and the hex breaks any remaining tie, so the same image always produces the same row.
The count you choose caps the list; it does not pad it. A three-colour graphic asked for eight returns three, a solid colour block returns one, and a fully transparent file returns a message instead of an empty card. Small accents are the one case the automatic reading cannot solve, because a hundred coral pixels in a photograph are statistically noise. Clicking that spot on the image adds it as a locked colour, which is placed first and kept through every re-extraction.
Choose an image, set the count to 3, 5, or 8, click a HEX to copy it or click the image to sample, then export a palette PNG and CSS variables. The exports keep the on-screen order, so what you paste into a stylesheet matches the card you hand to someone else.
Reuse works best when you keep the palette small and give each colour a job. Assign the largest share to a background or a primary surface, the second to text or a supporting panel, and hold the smallest one back for a single accent — a button, a rule, a highlight. A five-colour palette with one clear field, one legible text tone, and one restrained accent will outlive a twelve-colour row every time.
Sampled colours are worth checking against the surface they came from. A shadowed fold of fabric is a real pixel but a poor brand colour; a highlight on gloss is the same. Sample the flat, evenly lit part of what you are after, then let the automatic shares tell you whether that colour is actually prominent or only vivid. When the answer has to be exact — a logo, a licensed brand value — type the known HEX into your design tool rather than trusting any extractor, this one included.
Select a JPG, PNG, or WebP. Everything is decoded locally, so a client mock-up stays on your machine. Start at 5 colours: it is enough for a field, a secondary tone, and three supporting shades, and it is the count most brand and layout decisions actually need.
Clicking a swatch copies its HEX and shows a confirmation you can see, or a failure message if the browser refused clipboard access. Clicking the image samples the original file at that point rather than the reduced working copy, so a single-pixel accent is recoverable. The sample is pinned with a lock and can be removed again.
The PNG export is a 1200 by 630 card with every swatch and its HEX printed on it, using black or white text whichever stays readable on that colour. The CSS block lists the same colours in the same order as custom properties, so pasting it into a stylesheet reproduces the card exactly.
A campaign photo is approved and the landing page has to sit next to it. Pull five colours, assign the largest two to the page surfaces, and use the accent for links so the page and the photograph read as one piece rather than a stock template next to a picture.
A packshot already contains the colours a product page needs: the carton, the shadowed side, the printed accent. Extracting from the real photograph keeps the on-page swatches honest about what the product looks like under its own lighting.
A reference image is often the only brief a stakeholder can give. Turning it into HEX values gives the build something exact to point at, and gives the next review a shared vocabulary instead of "more like the second one".
A single photograph can seed a small set of tokens: a surface, an ink, a muted tone, an accent. Exporting the CSS block means those tokens arrive already named and ordered, which is a faster starting point than sampling by eye and typing hex values one at a time.
Four routes answer the same question and disagree in ways that matter. One measures the image locally and ranks what it finds, one returns a fixed row from a reduced thumbnail on someone else’s server, one gives you a single pixel with no ranking at all, and one is a designer choosing swatches by eye.
A ranked palette from the visible pixels, read on your own device, with an accent you pick yourself and CSS you can paste.
Choose a file, set 3, 5, or 8, read the swatches by coverage, click a swatch to copy it or click the image to lock an exact accent, then export the card or the CSS variables. No account, no upload, no credits.
It reports what the pixels are. It cannot tell you which of them is the right brand colour, and it will not design the layout the palette goes into.
Open the palette readerA quick row of swatches when any five colours will do and the image is not sensitive.
Upload the file to a server, wait for a fixed count to come back, copy the hexes one at a time. The count is usually locked and the ranking is whatever the reducer produced.
Your source leaves your machine, the count is not yours to choose, and a fixed row means a three-colour image comes back padded with near-duplicates that were never really there.
Grabbing one exact pixel while you are already working on a canvas.
Open the image in the editor, switch to the eyedropper, click one spot, and read a single value from the colour panel. Repeat for every colour you want.
No ranking, no shares, and no second opinion. You get the pixel under the cursor, which may be a highlight, a compression artefact, or the one spot on the image that is least representative.
Brand-accurate work where a person has to judge what the colour is meant to be.
A designer reads the image, decides which tones carry the intent, adjusts them for contrast and print, and documents the result in a brand file.
It is the only route that understands intent, and it is also the slowest and the least repeatable. A quantizer beats it on a forty-image sweep; it beats the quantizer whenever the answer has to be right rather than representative.
Use this page when you need the measurable colours quickly and want the count and the accent under your control. Use a designer when the palette has to carry a brand decision, and use the eyedropper when you already know the one pixel you want. The honest split is that a quantizer is a good first draft and a poor final word.
Flat colour, clean exports, and a subject that fills the frame are the easy cases. A three-fill graphic, a product photographed on a plain sweep, or a brand illustration with a handful of deliberate colours will come back sorted correctly with no manual work at all, and the shares will match what the eye says they should be.
Three pages on IMG AI touch colour, and each one does a different job. Pick by what you want to leave with.
| The problem | Color Palette from Image | AI Recolor Image | AI Poster Generator |
|---|---|---|---|
| Best for | Reading the colours a picture already contains | Changing the colour of one named element in a photo | Making a new poster from a brief and exact text |
| What you leave with | HEX codes, coverage shares, a palette PNG, CSS variables | A new image with one recoloured element | A finished poster PNG at a chosen size |
| How colour is chosen | Measured from the pixels, or sampled by hand | A swatch or any exact HEX you type | Art direction and palette presets in the brief |
| Where it runs | Entirely in your browser, nothing uploaded | On IMG AI with a credit cost per image | On IMG AI with a credit cost per poster |
| What it will not do | Repaint, restyle, or invent a colour | Report a palette or export CSS | Guarantee an exact brand hex in the render |
Reading a palette and repainting an element are separate jobs on purpose. This page never submits a recolour task and never spends credits, and AI Recolor Image stays a deliberate, priced action you take when the palette has told you which shade you want.
The browser decodes the file, draws it into a hidden canvas, and reads the pixels from there. No copy is uploaded, no URL is created, no task is recorded, and no account is involved, so closing the tab leaves nothing behind. See the privacy policy for how the rest of the site handles data.
For interface and layout work, three to five is usually enough: one field or background, one tone for text and surfaces, and one or two accents. Five is the default here because it covers that structure without asking you to invent a job for every swatch. Go to eight when you are documenting a photograph with real variety, and stay at three when you are reading a flat graphic. A larger palette is not a better one; it is a longer list of decisions you still have to make.
Muddy palettes usually come from two things: the source, and the count. A photograph of a shaded scene contains a lot of low-saturation mid-tones that sit close together, so a five-colour reading of it returns five brownish greys that are technically distinct and visually similar. Try a lower count to force the reading to be more decisive, sample a deliberate accent by hand, or start from a source with clearer colour separation. Muddy is often an accurate report on a muddy image.
Only if the image genuinely contains that hex and you sample the right pixel. A logo exported as a JPEG has been through lossy compression, so its nominal brand colour arrives as a spread of nearby values and the extractor reports the average of what survived, not the value that went in. Use a PNG or a lossless source, click the flat centre of the area rather than an edge, and if the requirement is exact, take the official value from the brand file instead. This tool measures images; it does not know your brand.
Yes, and transparency is handled rather than ignored. Pixels below the visibility threshold are excluded from the count entirely, including the soft fringe where a cut-out meets its old background, so a product on a transparent canvas returns the product’s colours with shares that add up to the visible area. Clicking a transparent pixel while sampling is refused with a message instead of returning a meaningless value. A file that is transparent everywhere has no palette to report and says so.
A color picker returns the single pixel under your cursor. A palette is a ranked summary of the whole visible image: which colours exist, and how much of the picture each one accounts for. The distinction matters because the loudest colour in a photograph is often a tiny highlight, while the colour that actually defines the image covers half the frame. Sampling is still useful, and this page offers it, but it answers a different question than extraction does.
The right tool depends on whether you need a measurement or a decision. If you need to know what colours a specific image contains and in what proportion, an extractor that ranks by coverage and lets you set the count is the honest answer, and that is what this page is. If you are choosing a palette from scratch, a generator that proposes combinations is more useful. If the output has to satisfy a brand system, a designer with the source files beats both. There is no single best tool, only a best next step.
Move on once you know which colour you want to use.
Choose a file, set the count, copy a HEX or lock an accent, and take the card or the CSS variables with you.
Open the palette reader