Vibrant.js: Extract prominent colors from an image

https://jariz.github.io/vibrant.js/

by alexcasalboni • 11 years ago

131 21 11 years ago

jariz.github.io

Tankenstein• 11 years ago

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

eltaco• 11 years ago

Great! Reminds me of color thief: http://lokeshdhakar.com/projects/color-thief/

medmunds• 11 years ago

Color thief is actually credited in the vibrant.js source: https://github.com/jariz/vibrant.js/blob/master/src/Vibrant....

exogen• 11 years ago

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.

arcatek2• 11 years ago

Looking at every pixel of the image is quite slow (especially if you need to process multiple images, and more so when you're dealing with old devices, such as iPad 2). Resizing them is often "good enough" for the majority of use cases.

pimlottc• 11 years ago

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• 11 years ago

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

http://steamy-screenshots.herokuapp.com/

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• 11 years ago

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

z3t4• 11 years ago

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

k__• 11 years ago

Probably helps to make website designs more dynamic for sites where images are the focus.

baddox• 11 years ago

The most prominent implementation is the album view of iTunes on the desktop: http://stackoverflow.com/questions/13637892/how-does-the-alg...

amelius• 11 years ago

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.

RussianCow• 11 years ago

I don't think this is as useful for web design as it is for, say, dynamically changing the background color based on the image displayed.

Gracana• 11 years ago

Here's a tineye project that does that with flickr photos: http://labs.tineye.com/multicolr/

mattdesl• 11 years ago

Cool.

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

arcatek2• 11 years ago

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...

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

morcheeba• 11 years ago

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

hDeraj• 11 years ago

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

blu_jay• 11 years ago

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

elpool2• 11 years ago

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?

kay2dan• 11 years ago

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

Vibrant.js: Extract prominent colors from an image

Related Stories