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: https://pieroxy.net/blog/pages/color-finder/index.html You can also have a look at the GitHub repo.

Tags : color, dominant, finder, image, javascript, web

Responses[13]

Posted by pieroxy on June 20, 2013 9:19:00 AM PDT #

Re: Just released: color-finder

Comment from Andy on October 21, 2013 2:01:13 PM PDT #

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!

thanks but it is just return 0 :(

Comment from Ammargraph on May 8, 2014 12:43:43 AM PDT #

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

thanks but it is just return 0 :(

Comment from pieroxy on May 8, 2014 10:30:23 AM PDT #

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

thanks and URL

Comment from Ammargraph on May 8, 2014 12:47:54 PM PDT #

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

thanks and URL

Comment from pieroxy on May 9, 2014 5:04:42 AM PDT #

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?

I changed the image but it is still black :(

Comment from Ammargraph on May 9, 2014 5:15:20 AM PDT #

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

I changed the image but it is still black :(

Comment from pieroxy on May 9, 2014 5:42:18 AM PDT #

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?

change to same domain image

Comment from Ammargraph on May 9, 2014 5:47:09 AM PDT #

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

change to same domain image

Comment from pieroxy on May 12, 2014 2:30:03 AM PDT #

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.

Re: Just released: color-finder

Comment from Etnik on January 24, 2016 5:34:55 PM PST #

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.

Re: Just released: color-finder

Comment from pieroxy on January 25, 2016 5:33:09 AM PST #

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.

Re: Just released: color-finder

Comment from Steve Eller on November 1, 2017 4:38:06 PM PDT #

I just found your script and I can't seem to find a solution to getting the background for my targeted div to be anything other than black. I have try setTimeout and it doesn't work. I also tried this to try to get the image to load before the script and it still doesn't work. Please go to: http://metooplace.com/test-post-1/ to see what I'm talking about. $("singlePostImg").one("load", function() { var rgb = new ColorFinder().getMostProminentColor(document.getElementById('singlePostImg')); document.getElementById("blogPageHeader").style.backgroundColor = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')'; }).each(function() { if(this.complete) $(this).load(); });

Re: Just released: color-finder

Comment from pieroxy on January 14, 2018 8:15:19 AM PST #

Sorry for the late answer. Did you get the script working?

Add a comment

Re: Just released: color-finder Comment from Anonymous on December 4, 2024 6:07:10 PM PST #
Title
Body	HTML : b, strong, i, em, blockquote, br, p, pre, a href="", ul, ol, li, sub, sup
OpenID Login	(Not me?)
Name
E-mail address
Website
Remember me	Yes No
E-mail addresses are not publicly displayed, so please only leave your e-mail address if you would like to be notified when new comments are added to this blog entry (you can opt-out later).