Image Color Palette Extractor
Pull the dominant colors out of any image — hex, RGB, and CSS variables
Drag & drop an image, or click to upload
About this tool
The Image Color Palette Extractor analyzes an uploaded image and pulls out its most dominant colors, ranked by how much of the image they cover. Drop in a photo, screenshot, or design mockup and get back a ranked palette of HEX and RGB values — plus a ready-to-copy block of CSS custom properties. Under the hood, the image is downscaled onto a canvas and every sampled pixel is bucketed into a coarse RGB grid so that near-identical shades count as the same color, then buckets are sorted by frequency. This gives a genuinely representative palette rather than just the first few unique pixel values. Everything happens in-browser via the Canvas API — the image itself is never uploaded anywhere.
When to use it
- →Pulling a brand color palette out of a logo or existing marketing image
- →Generating a matching UI theme from a hero photo or product shot
- →Extracting CSS custom properties directly from a design mockup screenshot
- →Checking what colors actually dominate a photo before using it in a design
Tips
- ◆Increase the color count slider if the image has subtle variation you want captured — the default 6 favors the most visually dominant shades.
- ◆Semi-transparent pixels are excluded from analysis, so palettes extracted from PNGs with transparency reflect only the visible content.
- ◆Use the CSS Variables export to paste extracted colors directly into a stylesheet as `--color-1`, `--color-2`, etc.
Frequently asked questions
How are the dominant colors determined?
The image is sampled on a canvas and each pixel's color is grouped into a coarse RGB bucket so visually similar shades count together, rather than treating every slightly different pixel as a unique color. Buckets are then ranked by how many pixels fall into them.
Does image size affect extraction speed or accuracy?
The image is downscaled internally before sampling, so large images process quickly without materially changing the resulting palette — the dominant colors of a downscaled version match the full-resolution image closely.
Is the image uploaded to a server for analysis?
No. Extraction runs entirely client-side using the Canvas API's pixel data. The image file never leaves your browser.