
Show HN: Get colour palettes from pictures - ioi0
https://pictones.firebaseapp.com/
======
unindented
A few years ago I created a Chrome extension
([https://chrome.google.com/webstore/detail/palette-
creator/oo...](https://chrome.google.com/webstore/detail/palette-
creator/oolpphfmdmjbojolagcbgdemojhcnlod)) 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...](https://addons.mozilla.org/en-US/firefox/addon/palette-creator/))
and Opera ([https://addons.opera.com/en/extensions/details/palette-
creat...](https://addons.opera.com/en/extensions/details/palette-creator/))
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](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!

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

~~~
unindented
Yup, I published it as an npm module: [https://www.npmjs.com/package/neuquant-
js](https://www.npmjs.com/package/neuquant-js)

~~~
ioi0
Right now I am using the RgbQuant library
([https://www.npmjs.com/package/rgbquant](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!

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

[https://en.wikipedia.org/wiki/K-means_clustering](https://en.wikipedia.org/wiki/K-means_clustering)

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

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

------
onion2k
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...](http://www.soapqueen.com/wp-content/uploads/2015/06/Color-Palette-Tips-
and-Color-Resources.jpg)

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

------
4684499
Reminds me of Adobe Kuler:
[https://color.adobe.com/](https://color.adobe.com/)

------
leonvonblut
there is an amazing android app for that:
[https://play.google.com/store/apps/details?id=com.wayfar.col...](https://play.google.com/store/apps/details?id=com.wayfar.colorista01&hl=en)

~~~
lern_too_spel
This comes for free in an Android support library.
[https://developer.android.com/training/material/palette-
colo...](https://developer.android.com/training/material/palette-colors.html)

------
woliveirajr
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...](http://www.fatosdesconhecidos.com.br/wp-
content/uploads/2015/06/nariz.jpg)

~~~
ioi0
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!

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

[http://www.imagemagick.org/Usage/quantize/#map](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...](http://victordiazbarrales.com/projects/artwork-colour-
visualization.html)

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

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

~~~
_jal
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!

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

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

[https://github.com/leeoniya/RgbQuant.js](https://github.com/leeoniya/RgbQuant.js)

playground:
[http://leeoniya.github.io/RgbQuant.js/demo/](http://leeoniya.github.io/RgbQuant.js/demo/)

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

[https://github.com/leeoniya/GIFter.js](https://github.com/leeoniya/GIFter.js)

demo:
[https://cdn.rawgit.com/leeoniya/GIFter.js/9b888495/demo/inde...](https://cdn.rawgit.com/leeoniya/GIFter.js/9b888495/demo/index.html)

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

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

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

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

~~~
ioi0
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!

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

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

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

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

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

