Direct answer
Image palette extraction analyzes RGB pixel clusters across an image using Median Cut spatial color quantization, identifying dominant color centroids and exporting cohesive design tokens in HEX, RGB, and HSL.
How to use this tool
Upload Image
Drop an image file (PNG, JPEG, WebP) into the extraction viewport.
Select Target Cluster Count
Choose desired palette size (5 to 8 dominant color swatches) and tune alpha transparency filtering.
Inspect & Export Tokens
View extracted swatches sorted by pixel prominence and export as CSS variables, JSON tokens, or Tailwind color palettes.
How Median Cut Color Quantization Works
Median Cut is a spatial subdivision algorithm that encloses all image pixels in a three-dimensional RGB color cube. The algorithm repeatedly locates the color axis with the widest variation, sorts the pixels along that dimension, and bisects the cluster at the median until the target number of boxes is formed.
- Alpha Filtering: Fully transparent or low-opacity pixels are omitted to prevent background voids from diluting the palette.
- Centroid Averaging: Each final color box calculates its weighted pixel mean to derive a faithful representative opaque hue.
- Token Serialization: Swatches are automatically formatted as CSS variables (--palette-color-1 to --palette-color-N).
Practical examples
Extract Brand Theme from Marketing Photograph
Input: Image: mountain-sunset.jpg (1920x1080 pixels, landscape photography)
Output: Palette: 6 swatches — #1e293b (Navy), #f97316 (Sunset Orange), #fbbf24 (Amber), #0284c7 (Sky), #cbd5e1 (Mist), #475569 (Slate)
Extracts harmonious primary, accent, and neutral tones ordered by visual prominence.
Limitations
- High-contrast images with hundreds of competing accent colors may merge subtle highlight details into broader background clusters.
- Processing multi-megapixel images (e.g. 24 MP camera RAWs) downsamples pixels in browser memory for rapid interactive responsiveness.
Frequently asked questions
Can I copy the extracted colors as CSS variables?
Yes. One click exports the entire palette as ready-to-paste CSS custom properties, HEX color codes, or JSON objects.
Are uploaded photos sent to an external server?
No. All canvas pixel reading and Median Cut quantization calculations occur strictly within your browser. No image data is ever uploaded.
Authoritative References & Standards
- MDN Web Docs: Pixel Manipulation with HTML5 Canvas ↗ — Technical documentation for direct ImageData extraction, RGBA buffer access, and color analysis.