Color Palette Extractor
Drop a photo below to pull its dominant colors into a ready-to-use palette. Everything runs on your device — the image is never uploaded.
Drag and drop an image here, paste from your clipboard, or
How to extract colors from an image
The extractor shrinks your photo to a small sample, groups the pixels into clusters, and averages each cluster into one representative color. It then sorts the results by dominance (how much of the image each color covers) or by hue, depending on the sort mode you pick. Because the clustering happens on a downsampled copy, it runs instantly even for a 20-megapixel photo, and the transparent pixels are ignored so a cut-out PNG doesn't drag a phantom color into the results.
The color-count slider is the one control worth experimenting with. Around five to six colors gives you a usable interface palette; a higher count picks up subtle accents but also starts splitting shades that belong together. Hex, RGB, and HSL values are calculated for every swatch, so you can paste the format your design tool expects without a second conversion step.
Getting a clean palette
Photos with a clear, limited color story (a sunset, a product shot against a plain backdrop, a piece of branding) tend to produce the cleanest palettes. Very busy or low-contrast photos can produce muddier averaged colors — try lowering the color count if that happens, since fewer, broader groups tend to average out noise better.
Exporting as hex, CSS variables, Tailwind, or SCSS
Once the palette looks right, copy the format that matches your
workflow: plain hex codes for a design tool, CSS custom properties for
a stylesheet, a Tailwind config fragment for a component library, or
SCSS variables for a compiled setup. The palette order follows the sort
setting, so exporting after sorting by dominance keeps your "primary"
color first — which is usually what you want for naming variables like
--color-1.
From palette to production CSS
A palette extracted from a photo pairs naturally with the rest of the design tools here. Drop the colors into the CSS gradient generator to build a background, or use them for the highlight and shadow layers in the box shadow generator. Everything runs locally, so client work and unreleased product shots never leave your machine.
Frequently asked questions
How does this extract colors from an image?
It uses a technique called median-cut color quantization: every pixel in the image is grouped with visually similar pixels, those groups are split repeatedly until there are as many groups as the color count you asked for, and each group's average color becomes one palette swatch. It's the same general approach professional color-picker and design tools use.
Is this the same as an eyedropper tool that picks one pixel's color?
No — an eyedropper samples one exact pixel, which can land on noise, a highlight, or a shadow rather than the color you actually perceive as dominant. This tool averages across the whole image to surface the colors that best represent it overall, which is usually more useful for building a palette.
How many colors should I extract?
5-6 colors is a good default for a UI or brand palette. Use fewer (3-4) if you want just the core dominant colors, or more (up to 8) if you want finer-grained detail, like separate shades within the same color family.
Can I use the extracted colors directly for text on a background?
Check contrast before you do — this tool extracts colors based on visual dominance in the photo, not accessibility. Two extracted colors that look great together in a photo can still fail WCAG contrast requirements as text-on-background. Run any pairing you plan to use for text through a dedicated contrast checker first.
Does my image get uploaded anywhere?
No — the image is decoded and analyzed entirely in your browser using the Canvas API. Nothing is ever sent to a server, so there's no upload step and no size limit beyond what your device can handle.
What image formats can I upload?
Anything your browser can decode as an image — JPEG, PNG, WebP, GIF, and most others. If your browser can display it as part of a web page, this tool can extract colors from it.
Related reading
- How to Get the Hex Code of a Color From an Image (and Why It Looks Wrong)
Three ways to pick a color, the four reasons the result is a shade off, and how hex and RGB relate.