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 answer made me closer. I tried the DeltaE. DeltaE shows difference between colors however still my code is not as smart as Photoshop.When we take a picture with camera because of different lights in different angles, each pixel has different color so maybe background color is yellow but in some places it seems brown and in another pixel it is very similar to olive color. But in Photoshop Magic wand tool can select an area like a human did. – Iman Sedighi Aug 28 '13 at 13:09
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.
- 102,905
- 11
- 164
- 176
-
Actually the question is not to let users wave it or we decide. Imagine you have a piece of cloth. On that you have a design for border some flowers and a background color. If you want to let users to change the color of each section(means background color, flowers and border color) then we need to first detect each sections pixels. And one of the way for pixel detection is comparing the colors. – Iman Sedighi Aug 29 '13 at 09:52