Image Color Extractor
Extract dominant color palettes from any photo or image. Inspect HEX, RGB, HSL values, and percentage share, and copy with one click.
Private by architecture:
All processing is 100% client-side memory. Your data never leaves this browser tab.
Image & Extracted Palette
Select or load an image to extract its color palette.
Dominant Swatches
About This Tool
The Image Color Extractor analyzes photos, illustrations, and UI designs to identify their most prominent color harmonies.
Using fast 5-bit color quantization and Euclidean color distance clustering, the algorithm groups millions of pixels into distinct color buckets right inside your browser. No image data ever leaves your device.
Key Features
- Quantized color clustering: Identifies visually distinct dominant tones without returning repetitive identical hues.
- Top 3 to 12 colors: Adjust the palette count from a focused 3-color scheme to an exhaustive 12-color system.
- HEX, RGB, and HSL values: Click any swatch or card to copy CSS-ready color notations directly to your clipboard.
- Pixel percentage distribution: See the exact visual surface area share represented by each dominant color tone.
- CSS variables and JSON export: Copy the complete palette as CSS custom property variables or JSON arrays.
Frequently Asked Questions
How are colors extracted from the image?
The image is drawn to an offscreen Canvas. Pixel RGBA values are quantized into color buckets, filtered for transparency, and clustered by Euclidean distance.
Does the tool upload my photo to any server?
No. The entire analysis is executed locally inside your browser tab via JavaScript and Canvas.
Why are transparent pixels excluded?
Transparent background pixels in PNGs and WebPs do not contribute visible color, so pixels with alpha below 50% are discarded.
Can I export the palette to code?
Yes. Use the Copy CSS Variables or Copy JSON buttons to paste color tokens directly into your stylesheets or config files.
