Pull a palette out of any image.
Drop an image, get its dominant colors. Copy individual hex codes with one click, or export the whole palette as CSS variables, SCSS, Tailwind config, or Figma tokens. Runs entirely in your browser — we never see your image, which matters when that image is a confidential mood board.
Color, explained.
How does the extraction work?
We sample pixels across the image, then run a median-cut quantization algorithm to group similar colors into clusters. The output is the most dominant color in each cluster. More colors means more subtle differences between swatches.
Which palette size should I pick?
5 colors for a tight brand palette. 8 colors for general design work (matches most design systems). 12 colors when the image has a lot of distinct regions you want to capture faithfully.
What's the difference between the export formats?
CSS / SCSS — ready-to-paste variables. Tailwind — config for your theme.extend.colors. Figma tokens — JSON matching the Figma Tokens plugin format. Pick the one matching your workflow.
Does the order mean anything?
Colors are sorted by frequency — the first color in the palette is the most dominant in the image, and so on. For brand work, the top 2-3 colors are usually what you care about.
Can I use this on photos I don't own?
Technically yes — colors aren't copyrightable. But using someone else's palette verbatim for a commercial project is tacky. We recommend extracting to understand a look, then making it your own.
Why is one of my colors slightly off?
Quantization is approximate. If a cluster contains both warm and cool red, the median color will be somewhere in between. Try a larger palette size — more clusters means less averaging.