Color Palette Extractor
Pull the dominant colors out of any photo as HEX and RGB, then export CSS variables. 100% free, no signup. Everything runs in your browser.
Loading the tool…
This free color palette extractor pulls the dominant colors out of any photo you give it. Upload an image, choose how many colors you want between 3 and 10, and the tool returns a row of swatches, each with its HEX and RGB values and a copy button beside both. When the palette is right, export it as ready-to-paste CSS custom properties or download a PNG palette strip for a mood board. The extraction runs entirely in your browser; your photo is never uploaded anywhere.
Under the hood it uses median cut, a well-established quantization algorithm that repeatedly splits the image's colors into boxes and averages each one, which is why the results feel representative rather than random. I built this after trying to eyedropper a sunset photo pixel by pixel and realizing I was sampling noise: individual pixels lie, but the distribution does not. It has since become the first step of every design I start, usually followed by fine-tuning shades in the color converter.
How to use
- Upload a photo in JPG or PNG format, or drag it onto the drop zone.
- Choose how many colors you want extracted, anywhere from 3 to 10.
- Wait a moment while the median cut algorithm finds the dominant colors; it is nearly instant on typical photos.
- Click the copy button next to any swatch to grab its HEX or RGB value.
- Export the whole palette as CSS variables if you are building a site, or as a PNG strip for mood boards and client decks.
- Try a different color count if the palette feels too broad or too narrow; fewer colors merge similar tones, more colors separate them.
Why use our color palette extractor?
Median cut sees the photo the way your eye does, as masses of color rather than individual pixels. An eyedropper on a beach photo might land on one weirdly green pixel of ocean; median cut averages whole regions, so the swatch you get is the blue you actually perceive. That difference is why extracted palettes feel true to the image while hand-picked ones often feel slightly off.
The two export formats cover both halves of design work. The CSS variables block drops straight into a stylesheet, named and ready, which turns a photo into a working theme in one paste. The PNG strip goes the other direction, into mood boards, brand decks and client emails, where a visual beats a code block.
Copy buttons on every swatch sound trivial and are not. Palette work is iterative: you grab one HEX, try it, come back, grab another. Making each value one click, in both HEX and RGB, keeps you in flow instead of retyping color codes and transposing digits, which I did constantly before building this.
Your photos stay private. Client work, unreleased product shots and personal photos all get dropped into tools like this, and none of them should have to travel to a server for what is fundamentally local math. The image is read onto a canvas in your browser, quantized there, and discarded when you leave.
A palette from a photo comes with built-in harmony. The colors in a landscape or a well-lit product shot already agree with each other because light made them together. Starting from that foundation beats assembling colors from a picker one at a time; just remember that text and background pairs still need a contrast check against WCAG contrast requirements before they ship.
Who is this tool for?
Designers and developers turn reference photos into working themes. A client says they want the site to feel like their shopfront or their product photography: upload the photo, export CSS variables, and the conversation moves from adjectives to actual hex values in five minutes.
Brand-adjacent work is the everyday case. Pull the palette from your logo or packaging shot and reuse the exact colors in slides, social graphics and your email template, instead of eyeballing something close. I use the extracted accent color directly in the OG image generator so my share cards always match the site.
Interior decorators, wedding planners and crafters extract palettes from inspiration photos. A photo of a room you love becomes six specific colors you can take to a paint store or a fabric search, with the PNG strip serving as a portable reference on your phone.
Artists and photographers study their own work with it. Extracting palettes across a series reveals the color habits you did not know you had, and pulling a strip from a favorite photograph is a fast way to build a grading reference for the next shoot. If you share those photos afterward, strip the location metadata first with the EXIF remover.
Frequently asked questions
No. The image is loaded onto a canvas element in your browser and the median cut algorithm runs locally in JavaScript. Nothing is transmitted or stored, so client photos and unreleased shots are safe here.
It is a classic color quantization method: all the image's pixels start in one box, the box is split repeatedly along its widest color axis, and each final box is averaged into one swatch. The result is a small set of colors that fairly represents the whole image.
Five or six suits most design work: enough to capture a dominant color, a couple of supports and an accent. Three gives you the essential mood of an image, while nine or ten is better for study and mood boards than for a usable interface palette.
Averaging regions mutes small vivid highlights; a sunset's brightest sliver of orange occupies few pixels and gets absorbed into a larger box. Extract more colors to separate those accents into their own swatches, then keep the vivid one deliberately.
Check contrast first. Photo-derived colors often sit in a pleasant middle range that fails accessibility contrast for body text. Take the palette into the color converter to darken or lighten a shade until the pair passes, then use it with a clear conscience.
JPG and PNG both work. Any normal photo size is fine; the tool samples the image efficiently, so even large photos from a modern phone process in about a second. If a file is enormous, shrinking it first with an image compressor changes nothing about the palette and speeds things up.
The CSS export is a text block of custom properties, one variable per color, ready to paste into a stylesheet. The PNG export is an image of the swatches side by side, made for mood boards, decks and sharing. Same palette, two audiences.