I've been building browser-based image tools for a while now, and color replacement is one of those features that seems simple on the surface but hides a lot of interesting problems. I want to write about the main one: why the obvious approach (RGB distance matching) fails on real photos, and how HSV fixes it. Plus some notes on shading preservation, edge detection, and where intelligent scissors fit in.

Why RGB matching fails on photos

When most developers implement "replace this color," the first instinct is something like:

const dist = Math.sqrt((r - r0)**2 + (g - g0)**2 + (b - b0)**2);

if (dist < threshold) replacePixel();