Extract TOOLKIT

Image Palette Extractor

Automated browser-native color quantization. Extract dominant, vibrant, or balanced color schemes from any image with full optical statistics.

Client-Side Engine

Executed locally via HTML5 Canvas & Web API. Zero server upload.

↓

Drop Image Here, Paste (Ctrl+V), or Click to Browse

Client-side K-Means clustering. Images remain strictly on your local device.

WORKFLOW PROTOCOL

How to Use This Tool

Upload Image

Select any graphic, photo, or UI screenshot from your device, or drag and drop onto the upload dropzone.

Choose Mode & Count

Select between Dominant, Vibrant, Muted, Light, Dark, or Balanced clustering, and choose 3 to 12 colors.

Inspect Statistics

Review calculated image metrics including average luminance, darkest/lightest pixels, and dominant frequency percentages.

Export & Preview

Download a high-resolution PNG swatch sheet, copy CSS variables, or send the palette to the live UI Mockup Studio.

ALGORITHMIC ARCHITECTURE

How Browser-Based Color Quantization Operates

1. Downsampling & Spatial Sampling

To process large multi-megapixel photographs without freezing browser rendering threads, the image is rendered onto an offscreen canvas downscaled to a maximum dimension of \(150\times 150\) pixels while retaining spatial frequency.

Alpha transparency filters automatically discard transparent and semi-transparent pixels to avoid skewing luminance calculations.

2. K-Means Clustering in RGB Vector Space

Pixels are treated as 3-dimensional coordinate points \(P(R, G, B)\). The algorithm initializes \(K\) spread centroid seeds and iteratively assigns each pixel to its nearest Euclidean neighbor.

Upon convergence, clusters are sorted and weighted by frequency and chromatic saturation to deliver professional harmonic balance.

TECHNICAL EXPERTISE & METHODOLOGY

Frequently Asked Questions

How does the K-Means color clustering algorithm work?+

K-Means color quantization groups thousands of image pixel vectors in 3D RGB color space into K discrete cluster centroids. The algorithm iteratively recalculates cluster centers until convergence, extracting the mathematically dominant and representative tones of the composition.

What is the difference between Dominant and Balanced extraction?+

The Dominant mode ranks clusters purely by frequency (pixel volume), which can often be overwhelmed by background tones. The Balanced mode enforces minimum color distance thresholds across hue and saturation, ensuring a harmonically diverse palette that captures subtle accent highlights.

Can I export the extracted palette directly into CSS variables?+

Yes. You can instantly export the generated palette as CSS custom properties (:root variables), JSON objects, CSV data tables, or download a high-resolution graphical PNG swatch sheet.

INTERCONNECTED WORKFLOW