4

First off, I don't mean google image search!

I would like to give users the ability to select a hex color value and then have a search programatically return (from specified sites/directories online) images where the dominant color is the color they specified (or close to it).

Is there a technology that can do this? I'd prefer PHP/MySQL, but I'd be willing to use other languages if it would be simpler.

EDIT

Taking several suggestions, I managed to find this: http://www.coolphptools.com/color_extract which does a decent job at extracting the most common colors from the image.

The next step is calculating distance from the extracted colors to the color being searched for. I have no issue implementing it except I'm unclear on the best way to calculate the color distance?

I've scoured this site and google for a concrete answer, but come up dry. The tool above extracts colors into hex color codes. I am currently converting this to RGB and using those.

Should I attempt to convert RGB to Y'UV? I'm attempting that by using:

sqrt(((r - r1) * .299)^2 + ((g - g1) * .587)^2 + ((b - b1) * .114)^2)

(based on an answer here: RGB to closest predefined color)

It's not very accurate. What should I swap that color distance formula with so it calculates accurate color distance (to the human eye)?

Community
  • 1
  • 1
Jeremy Penrod
  • 331
  • 1
  • 4
  • 18
  • If you're open to more languages than PHP, you might consider removing the tag, many people ignore (do not see) questions tagged php. – Wesley Murch May 23 '11 at 17:20
  • Can you be more specific? What have you tried so far? Where exactly is your problem? Getting a list of all images on a site/directory? Loading those images? Or do you need help finding the dominant color and compare it to the reference color? – bjoernz May 23 '11 at 17:23
  • Thanks wesley, I've updated the question to show I prefer PHP, hence the tag. – Jeremy Penrod May 23 '11 at 17:24
  • bjoernz, I can crawl the sites/directories I need and get the image URLs and all other info I need, but I need help finding the dominant color of the images. Is it necessary to download a temp copy of the image to perform the analysis? – Jeremy Penrod May 23 '11 at 17:26
  • I would think that you need to download the pictures, because you need to access the pixels to determine the dominant color. – bjoernz May 23 '11 at 17:29
  • @Jeremy Penrod -- Yes, you need a temporary copy and to make this perform you will need a caching system. Also, you will need to read the transparent color for image formats that support it, in case match spectrum includes the transparent color. I think you should rephrase your question to the important problem: how does one assert a dominant color in GIF, PNG or JPEG images? And implement infrastructure yourself. – Mel May 23 '11 at 17:35

2 Answers2

1

Interesting. The first problem is: "What is the dominant colour of an image?" Maybe the one most pixels have. What do you do with similar shades of the same colour? Would you cluster around similar colours?

I would implement it this way: Grab all images inside your search paths. Cluster the colors used in each of them and the biggest cluster is the dominant color. You will have to play around a bit with cluster sizes and number of clusters. If this color is within a certain range of hue, saturation and brightness of your searched color it is a match.

Hyperboreus
  • 31,997
  • 9
  • 47
  • 87
  • Thanks for the response. Sounds like a good algorithm to handle the images. Is there a library/existing code chunk/tutorial you know of to help me write that into a working function? I'd like to avoid reinventing the wheel if something exists that could speed up the process. – Jeremy Penrod May 23 '11 at 17:32
  • Hm, google for clustering algorithms or tesselation. Density maps maybe. – Hyperboreus May 23 '11 at 17:33
  • The following tool seems to do the trick: [http://www.coolphptools.com/color_extract](http://www.coolphptools.com/color_extract) Now, do you happen to know the best way to get color distance? – Jeremy Penrod May 26 '11 at 01:40
  • It may be necessary to exclude the background colour during the dominant pixel counting to get 'human perceived' results. – karmakaze May 26 '11 at 01:58
0

Firstly, I wonder how can you crawl over the sites/directories to search for a particular image color, unless you have a big list of websites. If it isn't related to your question then just ignore it.

Back to your question, I personally think this is an interesting question as well. Since it requires quite a few research, I just want to point out some ideas for you to reference.

What you need to do is to get user-specified hex colors and convert them into RGB colors, because most of the image functions in PHP that I know only work with RGB. Now, if you have a list of directories that you can search for, then just crawl over them and use some basic functions to get hold of the desired webpage' contents (e.g. file_get_contents, or cURL). Once you have the contents of a specific page, you will need to use DOM functions to get images' URLs from that page (you can work it out yourself, using: getElementsByTagName() and getAttribute()). Now assuming that you are holding a list of image URLs, now you need to get their colors and try to match them with your user-specified colors (remember to convert everything into RGB).

In PHP we have a very convenient GD library that works with images. If your server support GD2 then you can have a look at imagecolorclosest(). This function "Returns the index of the color in the palette of the image which is "closest" to the specified RGB value". Note that the function only returns the closest match (not exactly match), so you have to do some comparisons to choose the right images (I believe this is easy because you now have RGB colors with very handy values to work with, say, using some subtraction and adjustment method).

Moreover, not only the images, when you have a specific page content, you can try to search for the color scheme of that page (by getting its "background-color" value), there are quite a few details that you can get and play around with :) Of course, an image's color is somehow related to its page's styling scheme colors, think logically wider.

If I'm saying something not clear, don't hesitate to comment on my reply :)

Happy coding.