Color Palette Extractor from Images

Designers constantly ask 'what are the colors in this photo?' and most tools answer with a black box. This project builds a color palette extractor that shows its work: upload any image (or use the built-in real photographs) and the app extracts dominant colors with two genuine algorithms — median-cut quantization and k-means clustering — running on the actual pixels in the browser. An eyedropper with a magnifier loupe samples any exact pixel, each swatch shows its share of the image, and harmony tools suggest complementary, analogous and triadic companions. Palettes export to ASE (Adobe Swatch Exchange), CSS variables and PNG strip formats. Because both algorithms are implemented from scratch and their intermediate steps are visualizable, the report can explain quantization and clustering honestly — no black boxes anywhere.

1. The user uploads an image or picks one of the built-in real photographs; it is drawn to an offscreen canvas for pixel access.
2. Optional downsampling (default 200 px on the long edge) keeps extraction fast while preserving color statistics.
3. Median-cut recursively splits the RGB color space at median boundaries until the requested color count is reached; each box's average becomes a swatch.
4. K-means (k = color count, k-means++ seeding) clusters the sampled pixels; centroids become the palette, with iteration count shown.
5. Pixels are assigned to their nearest swatch to compute each color's share of the image.
6. The eyedropper reads raw pixel data under the cursor with a loupe magnifier for precise sampling.
7. Export serializes the palette to ASE binary, CSS variables, or a rendered PNG strip for download.

Tech stack:

• JavaScript (ES6+)
• Canvas pixel processing
• Median-cut quantization
• K-means clustering
• HSV color math
• ASE/CSS/PNG exporters
• Single-file web app

• [Two real extraction algorithms] Median-cut quantization and k-means clustering, both implemented from scratch and run on the image's real pixels.
• [Eyedropper with loupe] Click any pixel to sample it exactly; the magnifier loupe shows a zoomed grid with the center pixel's hex value.
• [Usage shares] Every swatch shows what percentage of the image it represents, computed from the actual pixel assignment.
• [Harmony suggestions] Complementary, analogous and triadic companions generated from the dominant hues in HSV space.
• [Palette export] One-click export to ASE, CSS custom properties, and PNG strip — formats designers actually use.
• [Algorithm comparison view] Run median-cut and k-means side by side on the same image and compare their palettes and runtimes.
• [Adjustable color count] Extract 3–10 dominant colors; the algorithms re-run live as the slider moves.

• Single-file palette extractor app (working demo)
• From-scratch median-cut and k-means source code
• 4 built-in real photographs for testing
• ASE, CSS and PNG palette exporters
• Project report PDF (quantization theory, clustering, color spaces)
• PPT presentation for final review
• Viva Q&A preparation document

• Extraction quality depends on the image: near-monochrome photos yield near-monochrome palettes, which is correct behavior, not a bug.
• K-means is randomized (k-means++ seeding); repeated runs may differ slightly — the UI notes this.
• Very large images are downsampled before analysis; per-pixel-exact mode is available but slower.
• ASE export targets the common swatch format; exotic color modes (LAB swatches) are not included.
• Harmony suggestions are computed in HSV and are stylistic aids, not color-theory guarantees.
• Runtime figures are design targets on the developer's laptop, not measured claims across devices.