Grabbing Prominent Colors From An Image – vibrant.js

Category: Color , Javascript | June 3, 2015
Author: jariz
Views Total: 865
Official Page: Go to website
Last Update: June 3, 2015
License: MIT

Preview:

Grabbing Prominent Colors From An Image – vibrant.js

Description:

vibrant.js is a JavaScript library that extracts prominent colors from an image and generates a color palette for further use.

How to use it:

Load the vibrant.js file in your project.

<script src="dist/Vibrant.js"></script>

Extracting prominent colors from an image.

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

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

This will result into:

  • Vibrant #7a4426
  • Muted #7b9eae
  • DarkVibrant #348945
  • DarkMuted #141414
  • LightVibrant #f3ccb4

Generating a color palette from the image using Vibrant.swatch() method:

// Initialize a new swatch. 
// First argument needs to be an RGB array, second argument must be the swatch' population.
new Swatch()  

// Get swatch color in a RGB array
.getRgb() 

// Get swatch color in hex format (#EE22DD)
.getHex() 

// Get swatch color in a HSL array
.getHsl() 

// Get population (amount of times this color was used in the original image)
.getPopulation()  

// Get a color (in hex) that works best with any 'title' text that is used over this swatch's color
.getTitleTextColor()  

// Get a color (in hex) that works best with any 'body' text that is used over this swatch's color
.getBodyTextColor()