A product photo on a plain background
A photo of a red mug on a white table
A palette led by the mug's red and the background's near-white, plus any secondary tones (a logo, a shadow) large enough to register.
Image Color Palette Extractor
Pull the dominant colors out of an image as hex, RGB, HSL and ready-to-use CSS variables.
Was this tool useful?
About this tool
Matching a design's color scheme to a photo usually starts with eyeballing hex codes from a screenshot — this extracts the actual dominant colors instead, ready to paste as CSS variables or plug into a design tool.
How to use it
- Upload an image and pick how many colors to extract.
- Copy any swatch's hex, RGB or HSL value, or copy the whole palette as CSS custom properties.
Examples
Common problems
- A color clearly visible in the image doesn't show up in the palette.
- Colors are grouped by frequency, not by visual prominence — a small but vivid detail (a tiny logo) can lose out to a much larger area of a duller color. Increasing the color count usually surfaces it.