Color Palette Extractor
Dominant Colors · Hex · RGB · HSL · CSS Variables · SCSS · JSON · SVG · PNG — 100% local, no upload
Drop any image and instantly extract its color palette using K-means++ clustering. Get hex codes, RGB values, HSL channels, color names, and usage percentages. Export to CSS custom properties, SCSS variables, JSON, SVG, or a PNG swatch sheet. Everything runs natively in your browser — your image never leaves your device.
Drop an image here or click to browse
JPEG · PNG · WebP · GIF · BMP · Processed locally
How color palette extraction works
The tool uses K-means++ clustering on the pixel colors of your image. After downsampling to a manageable canvas size, it samples pixels at regular intervals and groups them into k clusters where similar colors belong together. The centroid of each cluster becomes a palette color. The percentage shown reflects how many pixels fell into that cluster — it's a direct measure of how dominant that color is in the image.
Adjust the Colors slider (2–32) to control how many distinct colors you want to extract. Use Exclude near-white / near-black to filter background tones, and Minimum saturation to focus on vivid hues only.
Features
- K-means++ clustering (accurate)
- 2 to 32 colors configurable
- Fast / Balanced / Precise quality
- Sort by frequency, hue, luminance, saturation
- Exclude near-white / near-black
- Minimum saturation filter
- Hex, RGB, HSL values per color
- Automatic color naming
- Percentage of image per color
- Copy individual hex codes
- Export CSS custom properties
- Export SCSS variables
- Export JSON palette
- Export SVG color strip
- Export PNG swatch sheet
- 100% local — no data sent
Frequently asked questions
How many colors should I extract?
For a brand palette or logo, 4–8 colors is usually enough to capture all meaningful tones. For complex photographs, 12–16 gives a richer representation. Beyond 24, colors tend to repeat or become very similar. Start with 8 and adjust.
Why are my colors slightly different from pixel-perfect samples?
K-means computes an average centroid of a cluster — it represents the "typical" color of a group of pixels, not any single pixel. The result is perceptually accurate but not identical to any one pixel. Use a dedicated color picker if you need an exact pixel value.
How do I use the CSS export in my project?
The CSS export generates a :root block with custom properties (--color-1, --color-2…). Paste it into your stylesheet and reference any color with var(--color-1) anywhere in your CSS.
Can I extract colors from a transparent PNG?
Yes. Fully transparent pixels (alpha < 128) are automatically skipped, so the extraction only considers the visible parts of your image.
Is there a file size limit?
There is no enforced limit, but very large images (above ~20 MB) may take a moment to load. The tool automatically downsamples the image to 300 × 300 pixels before processing, so the actual analysis is always fast regardless of original resolution.