<< MySQL charset hell | Home | Google: developers, developers, browsers ! >>

Just released: color-finder

ColorFinder is a small javascript library that detects the main color in an image. The algorithm is simple and flexible. By the way of a callback method, you can influence the results by favoring certain types of colors. You can find it here: http://pieroxy.net/blog/pages/color-finder/index.html You can also have a look at the GitHub repo.

Categories : JavaScript
Avatar: Andy

Re: Just released: color-finder

Very cool! Thank you. I'm working on an app that pulls in random background images and I need to put text on top of it. I always want the text to be legible and this will allow me to set the text color based on the background color. Would be cool if we could limit the sampling area via XY. Were I smarter, I'd fork it and be useful. :) Thanks for this!
Avatar: Ammargraph

thanks but it is just return 0 :(

Hi thanks for your script.but when I use it,it just return 0 for rgb. what can I do? I do everything like your example. please answer me on mail ya Ali
Avatar: pieroxy

thanks but it is just return 0 :(

Can you provide me with an URL where your test is running? That will be the easiest way for me to debug your problem.
Avatar: Ammargraph

thanks and URL

Hi again :-) thanks for your reply this is my test URL : http://onman.ir/colorfinder/ please help me ya Ali
Avatar: pieroxy

thanks and URL

Well, everything looks normal. The most prominent color in your image is black, hence the lib is reporting (0,0,0) as the color. Try to copy paste the URL of your image (http://onman.ir/colorfinder/sample.jpg) in the demo page. You will see that the most prominent color is in fact black, and you can skew the algorithm to favor saturated colors, bright colors, and other parameters which will bring back the blue of the sky. Why did you think that the algorithm was misbehaving?
Avatar: Ammargraph

I changed the image but it is still black :(

Hi very very thanks for paying attention to my problem :-) it is very nice of you. I change the image and test it.but it is still black.but same image in your demp page return red! please revisit : http://onman.ir/colorfinder/ ya Ali
Avatar: pieroxy

I changed the image but it is still black :(

Ah, I see. As mentioned in "The Basics" of the user guide, due to restrictions to the canvas object, this implementation only works if the images are located on the same domain as the page holding the script.

In your example, the page is hosted on onman.ir and the image (the new one) is hosted on www.theflowerstandchelsea.com so the script doesn't have the permission to actually read the pixels. Can you give it a try with another image on your own domain?

Avatar: Ammargraph

change to same domain image

I changed it take a look : http://onman.ir/colorfinder/
Avatar: pieroxy

change to same domain image

The problem you have now is that your code doesn't wait for the image to be loaded in order to launch colorfinder. Try to put the function call in a setTimeout("", 1000) and everything will be fine. Actually, just click in the URL bar and hit enter, the script works since the image is already in the cache.

Of course, checking the image load status (or registering a listener to it) is a much better solution.

Avatar: Etnik

Re: Just released: color-finder

This is the most accurate prominent color finder I've used. Great work! How would you find the most prominent color of multiple images using your code? I have 5 images and I want it to traverse each one and find the color.
Avatar: pieroxy

Re: Just released: color-finder

Well... Either paste your 5 images in one big image and launch the tool on it, or launch them one by one. You won't get the same results of course.
Home