Author: | jariz |
---|---|
Views Total: | 2,954 views |
Official Page: | Go to website |
Last Update: | June 3, 2015 |
License: | MIT |
Preview:

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()