# 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