Vibrant.js

Extract prominent colors from an image.
Vibrant.js is a javascript port of the awesome Palette class in the Android support library.

Showcase

API

Use of Vibrant is pretty straight forward, but because code works better than explanation, here's an example:

var img = document.createElement('img');
img.setAttribute('src', 'examples/octocat.png')

img.addEventListener('load', function() {
    var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())

    /*
     * Results into:
     * Vibrant #7a4426
     * Muted #7b9eae
     * DarkVibrant #348945
     * DarkMuted #141414
     * LightVibrant #f3ccb4
     */
});
        

As you can see, Vibrant's first argument is an image. Make sure it's loaded before passing it off to Vibrant.
Vibrant has 3 constructor parameters:

new Vibrant(
    img,
    64, /* amount of colors in initial palette from which the swatches will be generated, defaults to 64 */
    5 /* quality. 0 is highest, but takes way more processing. defaults to 5. */
)
        

The Swatch class

Vibrant.swatch() returns a object with Swatch objects.
Note that some Swatches might be set to 'undefined' when Vibrant fails to find a matching color for the profile!
A Swatch can be used to get the swatch's color (in RGB and hex), what text color works best with this color, and more.

Function name Description
new Swatch() Initialize a new swatch. First argument needs to be an RGB array, second argument must be the swatch' population.
.getRgb() Get swatch color in a RGB array
.getHex() Get swatch color in hex format (#EE22DD)
.getHsl() Get swatch color in a HSL array
.getPopulation() Get population (amount of times this color was used in the original image)
.getTitleTextColor() Get a color (in hex) that works best with any 'title' text that is used over this swatch's color
.getBodyTextColor() Get a color (in hex) that works best with any 'body' text that is used over this swatch's color