Show HN: Get colour palettes from pictures | Hacker News Reader

Show HN: Get colour palettes from pictures

pictones.firebaseapp.com

132 pointsioi034 comments

A few years ago I created a Chrome extension (https://chrome.google.com/webstore/detail/palette-creator/oo...) to do exactly this. You right-click on an image, select Palette Creator, and you get a palette with the number of colors you requested. I recently ported it to Firefox (https://addons.mozilla.org/en-US/firefox/addon/palette-creat...) and Opera (https://addons.opera.com/en/extensions/details/palette-creat...) too.

It clusters the colors using Kohonen neural networks (which always makes me giggle, because "Kohonen" sounds like a Spanish swear word). The source for it all is here: https://github.com/unindented/palette-creator

Unrelated: Every week I receive an offer to "monetize" my extension from the shadiest companies all over the world. I'm guessing they'd add all kinds of tracking to it, make it inject ads and fake results into the pages the user is viewing, etc. So yeah, be careful who you trust when it comes to browser extensions!

Cool extension. Is the palette extraction available as a standalone package?

Yup, I published it as an npm module: https://www.npmjs.com/package/neuquant-js

Right now I am using the RgbQuant library (https://www.npmjs.com/package/rgbquant), but I've been experimenting with neuqant-js as well. The Chrome extension you've mentioned before is really great!

Does this use K-means clustering? It seems to be pretty quick!

https://en.wikipedia.org/wiki/K-means_clustering

It is technically k-means, seeing as there are always k=6 or a user specified number of colors reported regardless of the input picture. What k-means algorithm they are using though is uncertain. Could be some form of quantization, or a lloyd type k-means. Could also be hierarchical agglomerative or many-many others. What would be interesting to try out would be some non-parametric clustering algorithms like the image recognition staples mean-shift and dbscan.

Oh wow, I've never heard of that. (EDIT: I knew what color quantization was but not the algoritm) I, too, want to know the implementation details, as I haven't been that impressed with open source libraries to detect distinct colors. Not that they don't do a decent job, but they seem to fall short of the distinct colors the human eye and brain pick up vs what might be mathematically correct.

The JS library Color Thief is a nice open source alternative - http://lokeshdhakar.com/projects/color-thief/ (https://github.com/lokesh/color-thief/)

What is this actually doing? It's a good idea and the UI is great, but the colors it recommends are ... wrong? I used an image with 6 strong colors in it[1], set it to pick 6 colors, and while I got red, orange and yellow as expected, I didn't get purple or bright blue. Instead I got a grey and two different greens. I guess that might be because those colors wouldn't work in a palette but it's a little odd that it missed them out.

[1] http://www.soapqueen.com/wp-content/uploads/2015/06/Color-Pa...

A color palette wouldn't have 6 distinct colors like you are expecting. It would have (I'm generalizing here) at most 3 main colors and variants that complement of enhance the main colors.

That is true, just checked. But, I wouldn't say that those colours you get are wrong. Sometimes you don't always get the most dominant ones. You can still get purple by bumping up the "accuracy" level up to 8 (which is not really "accuracy"). However, blue colour seems to appear only when palette size is set to 7. This is why I've introduced "fine tune" and "skip" features, to be able to tweak colours.

Reminds me of Adobe Kuler: https://color.adobe.com/

there is an amazing android app for that: https://play.google.com/store/apps/details?id=com.wayfar.col...

This comes for free in an Android support library. https://developer.android.com/training/material/palette-colo...

Didn't understand one thing from it. I tried using some clown image [1] and it only took the blue hue on the palette after I increased the number of colors to 10 or more or increased the "accuracy" to 7 or more.

Seems to be interesting but some more information on the "about" could help us to understand how are colors selected and how the "accuracy" can change the results.

[1] http://www.fatosdesconhecidos.com.br/wp-content/uploads/2015...

Hm... I get the blue hue when I set a number of colours to 4 or 5, while accuracy is set to 1 or 2. Still, you are right, the "accuracy" is not even a correct label here. This slider was in fact introduced for performance reasons, as I've been getting colours from images which were >10MB. Higher values on that slider will cause more calculation time, but still, would not certainly guarantee better accuracy. I'll probably rename it and provide the explanation. So thanks!

you can do the same with one line in imagemagick :)

http://www.imagemagick.org/Usage/quantize/#map

I used in an old project to create color palettes in artworks and worked quite well

http://victordiazbarrales.com/projects/artwork-colour-visual...

But...If you want to do it very quickly and not deal with the quite dense ImageMagick docs this is way easier.

When I want to do this and something else, two hours reading the ImageMagik documents will save me six hours of trying to remember this site and Googling around for a free service that does the other thing...and probably two hours of getting them to work together as a pixel pipeline.

Or at least that's what I have realized about reading documents over the past year and a half...Google lets me avoid reading documents it does not save me time.

This is why I don't let myself become dependent on random internet services[1]. Apps on my machine only change or go away when I want them to.

[1] No offense to the site maker - the palette extractor is cool!

I think the site is great too. ImageMagiK's output is not quite as self explanatory nor visually appealing. Since I deal with hundreds of images at a time, though, I have learned to think in terms of a pixel pipeline.

I also try to avoid the overhead of managing emails and passwords.

convert path/to/img -colors 16 -unique-colors txt:-

That is really simple.

i, too have a lib in this space (color quantization):

https://github.com/leeoniya/RgbQuant.js

playground: http://leeoniya.github.io/RgbQuant.js/demo/

used as a dependency in another lib: GIFter based on omgif & RgbQuant:

https://github.com/leeoniya/GIFter.js

demo: https://cdn.rawgit.com/leeoniya/GIFter.js/9b888495/demo/inde...

This is fantastic. I've actually been looking for something just like this. I've been doing it with a more manual process (various CLI tools), but this is what I wanted.

Here's another related one: vibrant.js [1]

[1] https://jariz.github.io/vibrant.js/

Very nice!

Is there a way to choose an image from a URL or drag and drop from web? Would like to use an image from google without having to download it first.

Using Vivaldi 1.8.770.54 fyi.

Thank you! Right now, the only clear way to do this is by dragging a picture from another tab (as already mentioned @waldfee). But I'll think about adding an URL field as it might be more convenient!

drag & dropping image from another tab works here (vivaldi 1.9.818.22)

I can see several use-cases for this even though it can be done easily in Gimp. But this might be a faster way to subtract colours from an image.

I actually treat this small tool as a quick starting point for my design and development process. Sometimes, I just don't want to use precise colour pickers, but instead simply tweak sliders or drag pictures from a mood board.

Did you make this with Angular 2 & TypeScript? If so, how was the experience?

It was exactly one year ago, so I've started simply with Angular 1 and Angular Material. Later on added Webpack to use ES6 modules.

Related: does someone know a good colour picker for Linux?

Reply on news.ycombinator.com