Vibrant.js – Extract prominent colors from an image


Usage is simple:

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

Works by reading in the image, placing it onto a <canvas> element, and then getting all pixel information from that canvas.

Vibrant.js →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.