

Vibrant.js: Extract prominent colors from an image - alexcasalboni
https://jariz.github.io/vibrant.js/

======
exogen
Are you changing the code, or is it nondeterministic? I just reloaded and the
last three pictures (cat, car, peacock) all had their vibrant color change.

Edit: Interestingly, it looks like it may sample the image at its visible size
and not the full source image. If I resize my browser, triggering various
media queries and thus image sizes, the dominant colors change after
reloading.

~~~
pimlottc
Interesting, you're right! For me, the image of the bird (4th one) shows the
most variation. The cat changes a bit too; the others seems relatively stable.

At first I thought it would be the same, since the percentage of each color
should be roughly equivalent; but then again, the images themselves are being
resampled on resize, so there may be individual pixel colors in one size image
that aren't in another.

Still, though, the point of a proper resampling algorithm is to maintain the
same general perceived appearance of the image at different sizes; assuming it
is doing this well, you should expect to see the same dominant colors.

Of course, the algorithm also might just be sampling every nth pixel, which
would mean a different sample group depending on the size.

------
jgrowl
Neat! This reminds me of my fiancée's project:

[http://steamy-screenshots.herokuapp.com/](http://steamy-
screenshots.herokuapp.com/)

[https://github.com/moneypenny/steamy-
screenshots](https://github.com/moneypenny/steamy-screenshots)

You can specify a steam username or game title and it will pull in screenshots
and use the extracted colors to style the page.

I think she used a port of Panic's iTunes album art color algorithm. I am not
sure if she had heard of Vibrant.js or not.

~~~
Raed667
Reminds me of something similar I have done for a "machine vision" course
using OpenCV (C++).[1]

The basic idea is to get the histogram and check for dominant colors.

(There are other implemented features as well, like texture, if you're
interested)

[1][https://github.com/RaedsLab/Comparify](https://github.com/RaedsLab/Comparify)

------
arcatek
I made it too based on a StackOverflow answer a few years ago, but this one is
probably much better (I hadn't even put a package.json at the time). However,
the SO thread is really interesting, I suggest you give it a look if you're
interested in _how_ to solve this issue.

[1] [http://stackoverflow.com/questions/13637892/how-does-the-
alg...](http://stackoverflow.com/questions/13637892/how-does-the-algorithm-to-
color-the-song-list-in-itunes-11-work)

[2]
[https://github.com/arcanis/colibri.js](https://github.com/arcanis/colibri.js)

------
eltaco
Great! Reminds me of color thief: [http://lokeshdhakar.com/projects/color-
thief/](http://lokeshdhakar.com/projects/color-thief/)

~~~
medmunds
Color thief is actually credited in the vibrant.js source:
[https://github.com/jariz/vibrant.js/blob/master/src/Vibrant....](https://github.com/jariz/vibrant.js/blob/master/src/Vibrant.coffee#L9)

------
hDeraj
I just started a similar project a couple weeks ago. After getting the
prominent colors, recoloring the original image makes a pretty neat effect.

[http://www.jaredharkins.com/posts/palette.html](http://www.jaredharkins.com/posts/palette.html)

~~~
blu_jay
I tackled the same problem. In fact, I utilized the same strategy you did. It
is essentially the same, but allows for the user to input a gif and receive a
reconstructed gif using only its "palette."

[https://github.com/salkj/palette](https://github.com/salkj/palette)

------
morcheeba
In the old days of NTSC video, we did this with a vectorscope:
[https://en.wikipedia.org/wiki/Vectorscope#Video](https://en.wikipedia.org/wiki/Vectorscope#Video)

------
z3t4
What is the use cases for these palettes? I got this nice color palette, but
have no idea what to do with it ...

~~~
baddox
The most prominent implementation is the album view of iTunes on the desktop:
[http://stackoverflow.com/questions/13637892/how-does-the-
alg...](http://stackoverflow.com/questions/13637892/how-does-the-algorithm-to-
color-the-song-list-in-itunes-11-work)

------
amelius
How about the inverse: given a palette and a set of images, return only the
images that "match" the palette.

Could be useful for web design. The other way around often does not work,
because once you are stuck on a palette you need to find images that match it.

~~~
Gracana
Here's a tineye project that does that with flickr photos:
[http://labs.tineye.com/multicolr/](http://labs.tineye.com/multicolr/)

------
elpool2
Pretty cool. Interestingly, it seems to me like it's getting the vibrant
colors just slightly off. Like the red from the dress should be brighter, and
the yellow from the car should be a bright yellow instead of a mustard color.
Is my brain just perceiving that the text on the car is bright yellow, while
the actual color in the image is much darker?

------
mattdesl
Cool.

You can also use the "quantize" module on npm to get prominent colours.
Example: [https://www.npmjs.com/package/get-rgba-
palette](https://www.npmjs.com/package/get-rgba-palette)

------
Tankenstein
This is great! definitely going to use this in the future.

------
kay2dan
Is there a js library for organising an array of colour swatches by hue (or
other values)?

