Smething like

<img class="image" ... />

$(".image").get_colors()

I know there are few websites where you can upload your image and it would generate the color for you but I want something to put on my website.

Something like this where you see the colors generated from the screenshot and can search by colors. I tried to check the source code but I could not see any reference to a js library.

I need this feature to work with js if possible.

EDIT: The image would be on the page already; I just need to generate its color, so I don't want the uploading features.

Thanks.

Smething like

<img class="image" ... />

$(".image").get_colors()

I know there are few websites where you can upload your image and it would generate the color for you but I want something to put on my website.

Something like this where you see the colors generated from the screenshot and can search by colors. I tried to check the source code but I could not see any reference to a js library.

I need this feature to work with js if possible.

EDIT: The image would be on the page already; I just need to generate its color, so I don't want the uploading features.

Thanks.

• javascript
• colors
• styles

• 1 No No, no uploading. Just get the color off an image in the page – aurel Commented Dec 7, 2011 at 19:20
• Just draw the image on a canvas element and check by your self. Don't know what you expect as return of get_colors. – Prusse Commented Dec 7, 2011 at 20:54
• Haven't used canvas before (I reacently started looking at html5) so Im going to give it a try - Do you know any resource that might cover the effect you are talking about @Prusse – aurel Commented Dec 7, 2011 at 21:08

4 Answers 4

You might be interested in this related question and my answer to another one.

Getting all the colors from an image is simple, at least in a browser that supports the canvas element - the technique is described here. You end up with a CanvasPixelArray (described here), which is essentially an array like [r,g,b,a,r,g,b,a, ...] where r,g,b,a are bytes indicating the red, green, blue, and alpha values of each pixel.

The hard part is identifying or creating a small selection of representative colors, rather than the 10,000 colors that might be in a 100x100 image. This is a pretty plicated problem, with many solutions (overview here). You can see Javascript implementations of two possible algorithms in the clusterfck library and my port of the Leptonica Modified Median Cut algorithm.

I did write just for fun. It is a jquery plugin, if you don't use it you can read it for some pointers. If there is some error during the call to get_colors a array is set in the return value to hold the errors, it returns an array of objects, these objects are a histogram of a image(one item in the array for every selected element).

(function($, window, document, undefined){
    var canvas = document.createElement('canvas');
    if (canvas && canvas.getContext){
        $.fn.get_colors = function(){
            var rv = [];
            this.each(function(){
                var tagname = this.tagName.toLowerCase();
                if ((tagname === 'img') || (tagname === 'canvas') || (tagname === 'video')){
                    //something bad can happend when drawing the image
                    try{
                        var w = this.getAttribute('width');
                        var h = this.getAttribute('height');
                        canvas.setAttribute('width', w);  
                        canvas.setAttribute('height', h); 
                        var ctxt = canvas.getContext('2d');
                        if (ctxt){
                            ctxt.drawImage(this, 0, 0);
                            var imagedata = ctxt.getImageData(0, 0, w, h);
                            var data = imagedata.data;
                            //log('imagedata.width:'+imagedata.width+' imagedata.height:'+imagedata.height+' w:'+w+' h:'+h);
                            var obj = {};
                            var color = '';
                            var r = 0, g = 0, b = 0, a = 0;
                            var pix = data.length;
                            for (pix--; pix > 2; pix-=4){
                                //a = data[pix - 0];
                                b = data[pix - 1];
                                g = data[pix - 2];
                                r = data[pix - 3];
                                if (r < 16) r = '0' + r.toString(16);
                                else r = r.toString(16);
                                if (g < 16) g = '0' + g.toString(16);
                                else g = g.toString(16);
                                if (b < 16) b = '0' + b.toString(16);
                                else b = b.toString(16);
                                //if (a < 16) a = '0' + r.toString(16);
                                //else a = a.toString(16);
                                //color = r + g + b + a;
                                color = r + g + b;
                                if (obj[color] > 0) ++obj[color];
                                else obj[color] = 1;
                            }
                            rv.push(obj);
                            imagedata = data = obj = null;
                        }
                        ctxt = null;
                    } catch(error){
                        if (!rv.errors){
                            rv.errors = [];
                        }
                        rv.errors.push(error);
                    }
                }
            });
            return rv;
        };
    } else{
        $.fn.get_colors = function(){
            throw new Error('canvas element support required!');
        };
    }
})(jQuery, this, this.document);

If a document with only one image with 4 pixels(2x2) "#ff0000, #00ff00, #0000ff, #ff0000", if you do $('img').get_colors(); it returns [{"ff0000": 2, "0000ff": 1, "00ff00":1}].

To learn how to use the canvas element you could look at MDN and at the specs in development for details about pixel manipulation.

Edit: mented out a line I was using when debugging.

Have you seen this project on Github?

http://lokeshdhakar./projects/color-thief/

It's a javascript solution. (It depends on two additional libraries: jquery, quantize.js).

var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
getPalette(sourceImage[, colorCount, quality])

Which will return an array, like so: [ [num, num, num], [num, num, num], ... ]

Material color utilities library is for various languages including typescript/javascript.

It has functions for generating dominant colors or color palette from an image. The colors may not necessarily be the most frequent colors; they are appropriate for Material 3 design system but it seems to give good results for general use as well.

You can copy-paste the code on the Material color utilities repository for your desired language to your project and then extract dominant colors and color schemes.

See this related answer for getting the dominant color of an image for code examples.