Colour Extractor

> System_Overview

Colour Extractor is a high-performance, client-side web utility engineered for UI/UX designers, digital artists, and frontend developers to extract, analyze, and curate harmonious color palettes directly from uploaded raster images.

Designed with privacy and low latency in mind, all image decoding, magnifying math, and palette clustering algorithms execute 100% in the client's browser without transferring user media to any external server.

> Core_Mechanics & Architecture

• Precision Magnifier Loupe & Canvas API

  Implemented a sub-pixel sampling lens that tracks the cursor over an HTML5 Canvas, extracting raw RGBA Uint8ClampedArray pixel buffers via getImageData() with high-DPI scaling support.

• Instant RGB / HEX / HSL Conversion & Copy

  Engineered real-time mathematical color space transformations, giving developers one-click clipboard copying for CSS HEX codes, Tailwind classes, and normalized RGBA floats.

• Saved Palette Curation & Export

  Equipped with a local storage palette builder where users can lock preferred swatches, generate contrast ratios against black/white text, and export complete palettes as JSON/CSS variables.

> Code_Snippet: Canvas Pixel Sampling

// Canvas Pixel Extraction & HEX Formatter (JavaScript)
function samplePixelColor(canvas, ctx, mouseX, mouseY) {
    const pixel = ctx.getImageData(mouseX, mouseY, 1, 1).data;
    const [r, g, b, a] = pixel;
    const hex = "#" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
    
    updateColorInspectorUI({ r, g, b, a, hex });
    renderMagnifierLoupe(canvas, mouseX, mouseY);
}

> Learnings_&_Impact