How the palette is chosen
Counting distinct pixel colors does not work. A photograph of a blue sky contains thousands of blues that differ by one or two values, so the ten most common colors are ten shades of the same blue.
Instead each pixel is placed into a three-dimensional histogram with 32 levels per channel, grouping shades that a human eye reads as the same color. The busiest cells are then averaged back to the true mean color of the pixels inside them, so the result is an accurate color rather than a rounded-off one. Finally, any candidate too close to a color already chosen is skipped, which is what stops the palette returning five versions of the same blue.
For a deeper look at the algorithm behind dominant-color extraction and why different tools disagree, read how image color palette extraction works.
How to extract a color palette from an image
- Open your image. Drop a PNG, JPEG, WebP, GIF, BMP or AVIF onto the box above. Decoding happens locally, so a large photograph is handled as quickly as a small logo.
- Choose how many colors you want. Five suits a brand palette, eight is a good default, sixteen is useful for analysing a photograph in detail.
- Ignore greys if the subject is colorful. Photographs are often dominated by grey sky, black shadow and white highlight. Switching greys off surfaces the colors you actually care about.
- Copy or export. Click any swatch to copy its hex code, or export the whole palette as CSS custom properties or JSON.
What comes out
- Swatches you can click to copy, each labelled with its hex code and the share of the image it represents.
- Three color formats for every entry — hex for design tools, RGB for code, HSL for reasoning about lightness and saturation.
- Share of the image, so you can tell a dominant background from an accent that covers two percent.
- CSS export as ready-to-paste custom properties inside a
:rootblock. - JSON export carrying all three formats plus the share, for use in a build step or a script.
Swatch labels switch between dark and light text based on the measured luminance of the color behind them, so every code stays readable.
Supported images
Anything your browser can decode: PNG, JPEG, WebP, GIF, BMP and AVIF, including images with transparency — fully transparent pixels are skipped rather than counted as black, which is a common way for palettes from logos to come out wrong.
Images are sampled at a maximum edge of 260 pixels. A palette is a summary, and sampling at that size gives the same answer as reading every pixel of a 6000-pixel photograph while keeping the result instant. HEIC files from iPhones are not decodable by most browsers; export as JPEG first.
Why the image is never uploaded
Decoding uses a canvas inside your browser and the pixels never leave it. Once the tab closes, nothing remains.
This matters more than it sounds for design work. The images people extract palettes from are usually unreleased: a client's brand assets, a product shot under embargo, a competitor's material, a mockup that has not shipped. Uploading any of those to a palette website puts them on someone else's server.
What a palette does not tell you
Three honest limits:
- Frequency is not importance. The tool reports which colors cover the most pixels. A brand's accent color may appear in two percent of the image and still be the one that matters — the share column is there so you can spot exactly that.
- These are not the brand's official values. A color read back from a JPEG has been through compression and possibly a color-profile conversion, so it can sit a shade or two from the specified value. Use it as a very close starting point, not as the canonical hex.
- Color profiles are not applied. Values are read as the browser decodes them, which for a wide-gamut image may differ slightly from a color-managed editor.
For a logo on a white background, switching on “ignore greys” usually gets you closer to the real brand colors in one step.
Who extracts color palettes
- Designers — building a palette from a photograph, a moodboard or an existing brand asset.
- Front-end developers — exporting CSS custom properties straight from a comp.
- Presentation and document work — matching chart colors to an image already on the slide.
- Brand audits — reading the colors a competitor actually uses rather than the ones they publish.
- Anyone matching a color — finding the hex of something seen in a screenshot.
Reading color compared with reading other image data
This tool reads the pixels. The other image tools read what sits alongside them: the EXIF extractor reads the camera, date and location recorded in a photo, and image to text OCR reads the words pictured inside it. Three different questions about the same file.
If the image is embedded in a document rather than sitting on disk, pull it out first with the Office image extractor — extracting the original file rather than a screenshot of it matters here, because a re-compressed copy shifts the colors you are trying to read.
Color palette algorithm and edge cases
The extractor uses a modified median-cut algorithm to reduce the image's color space to the requested palette size, then selects the most visually representative color from each bucket. All processing uses the sRGB color space (IEC 61966-2-1), which is the encoding used by standard monitors and most JPEG and PNG files.
Three edge cases: (a) a photograph with a smooth gradient produces palette entries that are perceptually close to each other — the algorithm is correct, but if you want distinct brand colors, crop to the logo area rather than extracting from the full scene; (b) an image that contains fewer unique colors than the requested palette size returns fewer entries than requested — the algorithm cannot invent new colors; (c) PNG images with an alpha channel use transparency during quantisation — fully transparent pixels are excluded, so the background of a logo-on-transparent PNG does not appear as a color in the output.
For a deeper look at the statistics and perceptual reasoning behind the approach, read the guide on how image color palette extraction works.
Frequently asked questions
How do I get the hex code of a color from an image?
Drop the image above and each swatch shows its hex code, with RGB and HSL alongside. Click any code to copy it. The image is never uploaded.
Is there a free color palette extractor with no upload?
Yes. It runs entirely in your browser, so the image never leaves your device, and it is free with no signup, no watermark and no daily limit.
How do I get the hex codes from an image?
Drop the image onto this page. Every dominant color appears as a swatch labelled with its hex code — click any swatch to copy it.
Is my image uploaded to a server?
No. The image is decoded by a canvas inside your browser and never transmitted.
Why are all my colors nearly the same?
The image is genuinely dominated by one hue, which is common in photographs. Try switching on “Ignore greys”, or raise the color count to surface more of the range.
How do I get a brand's exact color?
Extract from the highest-quality source you have, ideally a PNG or SVG rather than a JPEG. Compression shifts colors slightly, so treat the result as very close rather than exact.
What does the percentage mean?
The share of sampled pixels that fell into that color group. It measures how much of the image a color covers, not how important it is to the design.
Can I export straight to CSS?
Yes. Download CSS variables writes a :root block of custom properties you can paste into a stylesheet.
Does it handle transparent PNGs?
Yes. Fully transparent pixels are skipped rather than counted as black, which is what makes palettes from logos come out wrong in simpler tools.
Why is the image sampled rather than read in full?
A palette is a summary. Sampling at a 260-pixel edge produces the same palette as reading every pixel of a huge photograph, and returns instantly.