A dead simple javascript library for extracting the dominant color(s) from an image.

Usage is simple. Create an image (or grab an image URL), then get its dominant color & palette.

var img = document.getElementById('image');
// or
var img = 'http://example.com/path-to-image.jpg'

RGBaster.colors(img, {
  success: function(payload) {
    // You now have the payload.
    console.log(payload.dominant);
    console.log(payload.secondary);
    console.log(payload.palette);
  }
});

The colors function takes an object as optional second parameter, with the following options:

Type: int Default: 10

Maximum number of palette colors to return. Only the top palette colors will be returned.

Type: array Default: []

RGB colors to exclude when counting colors.
For example to exclude white and black use: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ]

Type: function Default: undefined

Function to call after image processing has completed.
The function will receive one payload argument with the following structure:

{
    // {string} dominant rgb color
    dominant:  'rgb(0,0,0)',

    // {string} secondary rgb color
    secondary: 'rgb(0,0,1)',

    // {array} list of colors in the image (limited by paletteSize)
    palette:   [ 'rgb(0,0,1)', 'rgb(0,0,2)' ]
}

RGBaster.colors(img, {
    // return up to 30 top colors from the palette
    paletteSize: 30,

    // don't count white
    exclude: [ 'rgb(255,255,255)' ],

    // do something when done
    success: function(payload){
        console.log('Dominant color:', payload.dominant);
        console.log('Secondary color:', payload.secondary);
        console.log('Palette:', payload.palette);
    }
})

rgbaster.js depends on the following browser functionality:

• Canvas
• CORS
• Array.prototype.map (can i use, compatibility table)

Check the linked resources above to determine current level of browser support.

Brian Gonzalez

RGBaster was created to modularize a feature of another plugin I built called adaptive backgrounds. Check it out.

MIT