Color palette from image
Extract a dominant color and a palette from any image, entirely in your browser, with exact hex, RGB, and HSL values you can copy as a hex list, CSS variables, or JSON. Your image never leaves your device: no upload, no account, no tracking, and no third-party requests at all.
Drop an image here, paste, or
JPEG, PNG, WebP, AVIF, GIF, BMP. Read in your browser, nothing uploaded.
Dominant color
Palette
What this tool does
Somewhere in an image you already have is a color you want to use somewhere else. The green in a logo you are matching. The blue of one particular sky. The three tones a screenshot of someone else's site turns out to be built from.
This tool reads the pixels and gives you the codes.
Drop in a photo, screenshot, logo, or piece of artwork and you get a dominant color plus a palette of four to twelve, each printed with its values as text. Click a swatch to copy that code, or take the whole set as a hex list, a :root block of CSS custom properties, JSON, or a labelled PNG.
One thing is worth saying before you start: the palette of an image is not a fact. It is an opinion produced by an algorithm.
A photograph can hold tens of thousands of distinct colors, and reducing those to six means deciding which differences matter. There is no objectively correct way to decide that. Different tools use different methods and all of them give different, defensible answers.
So treat the result as a starting point rather than a verdict.
How the palette is chosen
Your image is drawn into a working canvas no larger than 256 pixels on its longest side, then sampled down toward a target of ten thousand opaque pixels. That keeps a 40-megapixel photo about as quick as a thumbnail, and it means the numbers come from a slightly smoothed copy, since scaling down blends neighbouring pixels. Anything less than about half opaque is skipped, so a logo on a transparent background gives its real colors rather than a muddy edge.
The samples then go through median cut, a quantization method that dates back to 8-bit displays. Every sample starts inside one box in RGB space. The box with the most visual mass, its pixel count multiplied by its widest color spread, is sorted along that widest axis and split at the median. Repeat until there are as many boxes as colors you asked for.
Each swatch is the average of the pixels in its box, which means a swatch is often a color no single pixel in your image actually has. On a sunset photo, the orange swatch is the mean of several thousand different oranges: a color the image is about, rather than a color the image contains.
The dominant color is whichever box holds the most pixels, so it appears among the swatches too, only larger. If an image has fewer distinct colors than you asked for, you get fewer swatches, because nothing is invented to fill the grid. Ask a photo of a foggy beach for twelve colors and you will get twelve greys, and it will be right.
Values you can paste
Every swatch prints its hex code onto the color itself, in black or white depending on which gives the higher contrast against that swatch, with its RGB triplet as text just beneath. You should never have to identify a color by looking at it.
The dominant color adds HSL. HSL for every color in the palette is in the JSON export.
Copy hex list gives one comma-separated line. Copy CSS variables gives a :root block numbered --color-1 upward. Copy JSON gives hex, RGB, and HSL for each color. Download palette (PNG) gives a strip of swatches with the codes drawn onto them.
Copying is confirmed with a word rather than a color change: the swatch reads "Copied", then goes back to its hex. Changing the palette size re-splits the samples already in memory, so it happens at once, without re-reading the file.
Load it once, then disconnect
Nothing is uploaded.
That is true of every tool here, but this page can claim more than most. Once its own HTML, CSS, and JavaScript have arrived, it fetches nothing at all. No palette library, no CDN, no web font, no analytics. The quantizer is under a hundred lines of plain JavaScript that came with the page.
Which means the offline test genuinely works. Load the page, turn off your network, then drop in an image. It behaves exactly the same.
If you would rather watch than trust, open your browser's DevTools Network tab and add an image. The request list stops growing.
The full source is public on GitHub under the AGPL-3.0 licence, and the privacy page has almost nothing to list for this one.
Questions
Is there a free online color palette generator from an image?
Yes. This page is one.
Drop in a photo or a screenshot and it returns a dominant color and a full palette with hex, RGB, and HSL codes. It is a free online image color tool that runs entirely in your browser, with no upload, no install, and no account.
Once the page itself has loaded, it makes no further requests at all.
Can I get colors out of an image without uploading it?
Yes.
The file is decoded and sampled on your own device, and there is no account to create.
Open your browser's DevTools Network tab and add an image while you watch. Nothing new appears in the list.
Why is a swatch a color I cannot find in the picture?
Because each swatch is an average, not a sample.
Median cut sorts the pixels into boxes and reports the mean color of each box. If a box holds three thousand slightly different browns, the swatch is their average, which may be none of them exactly.
If you need a color that is literally present, ask for more colors: narrower boxes put each average closer to the pixels inside it. Cropping to the region you care about first works too.
Why does the palette change when I ask for more colors?
Because it is recomputed, not extended.
Eight is not the same six plus two. The extra splits divide boxes that already existed, so those boxes get new averages and several swatches shift. The order changes as well, since swatches are sorted by how many pixels they stand for.
Six and eight are both honest answers to the same image. They are just different answers.
Can I copy the palette as CSS variables?
Yes. "Copy CSS variables" puts a :root block on your clipboard with one custom property per color, --color-1 upward, in palette order.
"Copy JSON" gives the same colors as an array with hex, RGB, and HSL for each, which is easier to feed to a script.
If your browser blocks the clipboard API, the page falls back to an older copy method, and says so plainly if both are refused.
Can I pick the color of one exact spot?
No.
This tool reads the whole image and reports groups of similar pixels. It does not report the color under a cursor, so it is not an eyedropper.
If you need one specific region, crop the image down to it and read that. For a single pixel on screen, your operating system's own color picker is the better instrument.
Does it work on any image?
It works on any raster image your browser can decode: JPEG, PNG, WebP, AVIF, GIF, and BMP. For an animated GIF, the first frame is read.
SVG is not supported, because a vector file has no fixed pixels to sample until something decides what size to draw it at.
Very large files are fine, since the sampling runs on a downscaled copy rather than on the original.
Related tools
Crop Image | trim to the region whose colors you want. Photo Editor | crop, redact, and batch-edit images. Compress images | shrink file size without changing dimensions. Resize Image | change pixel dimensions to an exact size or percentage.