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.