Image Search by Color & Chromatic Palette Matcher

Standard Euclidean RGB distance treats red, green, and blue as a uniform geometric cube ($D = \sqrt{\Delta R^2 + \Delta G^2 + \Delta B^2}$). However, the human optical system is non-linear and significantly more sensitive to green luminance changes than blue hue variations.

CIE $L^*a^*b^*$ solves this by converting non-linear sRGB values through the linear CIE XYZ matrix into a 3D perceptual color space: $L^*$ (Perceptual Lightness $0-100$), $a^*$ (Green to Red opponent axis), and $b^*$ (Blue to Yellow opponent axis). The resulting Euclidean metric $\Delta E_{76} = \sqrt{\Delta L^{*2} + \Delta a^{*2} + \Delta b^{*2}}$ reflects genuine human visual discrimination:

• $\Delta E < 2$: Imperceptible color difference to the average human observer.
• $\Delta E < 10$: Highly accurate chromatic match (ideal for brand consistency and print audit).
• $\Delta E < 20$: Harmonious tone within the same perceptible color family.

To enable instant search across hundreds of high-resolution images in browser memory without UI lag:

1. Each incoming photo is loaded into an in-memory HTML5 Canvas 2DContext downsampled to a 64×64 pixel grid (4,096 pixels).
2. Pixels are quantized into 15-bit color buckets (shifting 5 bits per channel) to group subtle sensor noise into unified dominant color clusters.
3. The top 5 dominant colors and their exact compositional surface percentages (0.1% to 100%) are indexed and cached in memory.

Zero image bytes or color data are ever uploaded to any external server. All color conversions, distance metrics, rendering, and ZIP archiving occur strictly inside your local browser instance via pure JavaScript (ES6+ FileReader, Canvas, Blob, and pure in-memory PKZIP streams).