Image Palette Generator
Generate a palette you can build with
From a photo to CSS variables, without inventing colours.
Your image never leaves your browser — the palette is worked out on your own device.
- Upload
- Drag
- Paste
- URL
Extracting is the easy half
Pulling six colours out of a photograph takes about four seconds. Turning those six into a palette you can actually build an interface or a brand from takes a few decisions, and they are the same few decisions every time. This page is the tool plus those decisions.
Let the percentages assign the roles
Every colour here carries the share of the image it accounts for, and that is a hierarchy handed to you for free. The colour at 35% is a ground, not an accent. The one at 4% is an accent, not a ground. Use them in roughly the proportions the image used them in and the result looks like the photograph; use them in equal measure and it looks like a swatch card.
If your colours come back at 22, 21, 20, 19 and 18 percent, the image has no hierarchy of its own — and a design built from it will not either unless you impose one.
Generate the shades you are missing
Six colours out of a photograph are six points, not a system. Open any swatch and you get lighter and darker steps, plus muted and saturated versions of it, all derived from that one colour rather than picked by eye. That is where hover states, borders, disabled text and tinted backgrounds come from — a scale built out of a colour you already committed to, instead of a seventh colour you did not.
Check the pairs before you commit
A palette that looks good and cannot carry text is not finished. The contrast between any two colours here is measured with the real WCAG 2.1 relative-luminance formula — not estimated, not eyeballed — so you find out which pairs clear 4.5:1 for body text and 3:1 for large text while you are still choosing, rather than after the design is built.
Take it out as code, not as a picture
- CSS custom properties — paste straight into a stylesheet or a token file.
- JSON — for a design-token pipeline or a script.
- ASE — opens as a swatch group in Illustrator and Photoshop.
- PNG and SVG — for a moodboard or a deck, plus a share card sized for Instagram and Pinterest.
Nothing is uploaded
Your image is decoded and analysed in your own browser tab. It is not sent to a server, which is why this is free, why there is no account, and why it stays fast on a photograph straight off a phone camera.