I am looking for an algorithm or a code to find similar pixels (pixels that have similar colors) in client side and change the color of just those pixels. I searched a lot but couldn't find any formula for finding similar pixels. The thing that I want to make is like Magic Wand tool in Photoshop. So with this tool we can colorize some part of a product to make the custom color. Also we have some color restriction in production and we can just use some colors. I tried to find a logic with some formula like: finding euclidean distance of each pixel in compare with its neighbors' pixels with canvas and java script and compare the amount. But its not working well. The weakness is every picture has pixels with similar colors but different color shades. This algorithm is not very smart in finding different color shades. But in Photoshop we can select an area with same color with magic wand tool and then expand that area to the similar color shades with "similar" option.
2 Answers
What do you have so far? It would be helpful if you shared relevant code you've written so far (i.e. for searching through pixels, comparing pixel colors...)
If you haven't already, you may want to familiarize yourself with floodfill algorithms. This will be the basis of your traversal algorithm.
Color comparison, as I understand it, is not exactly a solved problem. A three dimensional euclidean distance measurement is not a bad idea and is a simple solution to implement. This article suggests "[computing] the absolute difference between each component in the chosen color versus the current color. We say the difference between two colors is the largest difference between the individual color components."
However, humans do not perceive color differences as differences in red, green and blue features.
Another page you'd be interested in reading: How to compare two colors for similarity/difference. One answer for that question suggests computing the HSL values of the color, then using the formula: avghue = (color1.hue + color2.hue)/2 distance = abs(color1.hue-avghue)
If you want to get into some color theory, Delta-E could provide you with some insight into color differences.
Your solution might be to let your users wave the magic wand !
So instead of selecting 1 color by clicking with the magic wand, how about letting the user drag the magic wand across multiple pixels.
Accumulate any unique colors the user drags across.
Then do a color-change based on that accumulated group of colors rather than 1 color.
Yes, it's not as automatic as Photoshop's magic wand tolerance setting, but substituting the human eye/brain can't be all bad !
@Austin is right about color theory vs the human eye not coordinating well. The Euclidian method will do mathematical color matching...but the human eye is very picky about how it perceives color.
You mention "different color shades"...
You might look into presenting your images in HSL color format to make color comparison easier.
Instead of color-mixing (like rgb does), HSL breaks colors into Hue (color), Saturation (depth) and Lightness (well, lightness).
In HSL all hues (colors) are arithmetically grouped together so you can request all blue colors from a specified blue plus the 10 nearest blue hues.
