Extract 3 to 12 dominant colors from any image in your browser. Sort by frequency, hue, or brightness, view shades, and export to CSS, JSON, or PNG.
JPG, PNG, WebP, GIF, SVG — Extract dominant colors
Drop an image here or use the upload button.
Every memorable photograph, film still, or brand illustration carries an underlying color harmony that makes it work visually. Trying to recreate that atmosphere manually with a basic eyedropper often leads to muddied midtones or duplicated colors because a single photo contains thousands of slightly different pixel variations. Instead of sampling pixels one at a time, our Image Palette Generator analyzes the entire image structure in your browser and distills its true dominant color scheme in a single step.
Behind the scenes, the engine downsamples your uploaded image to a 150 px reference matrix, ignores transparent background pixels (where alpha is below 125), groups similar pixels into 15-bit RGB color buckets, and applies a color-distance filter so near-identical tones are merged into clean, distinct swatches—each complete with its exact percentage share of the image.
Once your image loads into the workspace, the Dominant colors sidebar gives you granular control over how the palette is calculated and organized:
3-color triad for minimalist UI branding, stick with the default 6-color balance, or slide up to 12 colors to capture subtle secondary accents in complex illustrations.-50% and -25% darker shades alongside the 0% base color and +25% and +50% lighter tints. Clicking any shade copies its HEX code straight to your clipboard.JPG, PNG, WebP, GIF, or SVG file onto the page.#14171F) and crisp white (#FFFFFF) for effortless reading.3 and 12, pick your preferred arrangement in the Sort by dropdown, and enable Show shades if you need hover states or background variations for UI design.Rather than making you copy and paste ten color codes one by one into your code editor or style guide, the Export panel generates ready-to-use files named after your original image:
-palette.css): Downloads a clean :root stylesheet block defining --color-1 through --color-N in your currently selected sort order, ready to drop straight into any web project.-palette.json): Exports an array of objects containing the hex string, rgb numeric array, and percentage float for programmatic themes and design-token pipelines.-palette.txt): Saves a lightweight line-by-line document listing each HEX code, rgb() value, and dominance percentage for project notes.-palette.png): Renders a crisp 200 × 200 px per-cell color grid image stamped with each swatch's HEX code and percentage—ideal for attaching to client moodboards or brand presentations.Combine your extracted palette with our other local browser utilities to complete your creative workflow:
-palette.png grid side by side using our Online Photo Collage Maker.No. All pixel quantization, color-distance filtering, and file exports happen 100% locally inside your web browser using the HTML5 2D Canvas API. Your private client mockups and photos never leave your device.
After grouping pixels into quantized color buckets and sorting them by frequency, the algorithm measures the Manhattan RGB distance between candidate colors. Any color bucket whose red, green, and blue values fall within a combined threshold of 55 units of an already-selected swatch is skipped on the primary pass, ensuring your palette captures distinct colors across the scene.
No. During pixel scanning, any pixel with an alpha opacity value below 125 (out of 255) is excluded from the total pixel count. If you upload a transparent PNG, WebP, or SVG logo, the percentages reflect only the visible artwork.
Yes. All four export buttons (JSON, CSS, Text, and PNG) respect your active Sort by selection—so if you sort by Brightness, --color-1 in your exported CSS file will be your darkest swatch and the last variable will be your lightest.