8 ms·

Show HN: Get colour palettes from pictures

132 points by ioi0 9y ago

nxsynonym 9y ago
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.
- waldfee 9y ago
  drag & dropping image from another tab works here (vivaldi 1.9.818.22)
- ioi0 9y ago
  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 9y ago
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 9y ago
  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.
onion2k 9y ago
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-Palette-Tips-and-Color-Resources.jpg http://www.soapqueen.com/wp-content/uploads/2015/06/Color-Pa...
- optimuspaul 9y ago
  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.
- ioi0 9y ago
  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.
victornomad 9y ago
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-visualization.html http://victordiazbarrales.com/projects/artwork-colour-visual...
- brentm 9y ago
  But...If you want to do it very quickly and not deal with the quite dense ImageMagick docs this is way easier.
  - brudgers 9y ago
    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 9y ago
      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 9y ago
        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.
  - koehr 9y ago
skeoh 9y ago
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
- ravenstine 9y ago
  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.
- leecarraher 9y ago
  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.
leonvonblut 9y ago
there is an amazing android app for that: https://play.google.com/store/apps/details?id=com.wayfar.colorista01&hl=en https://play.google.com/store/apps/details?id=com.wayfar.col...
- lern_too_spel 9y ago
  This comes for free in an Android support library. https://developer.android.com/training/material/palette-colors.html https://developer.android.com/training/material/palette-colo...
tholman 9y ago
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/)
4684499 9y ago
Reminds me of Adobe Kuler: https://color.adobe.com/ https://color.adobe.com/
unindented 9y ago
A few years ago I created a Chrome extension (https://chrome.google.com/webstore/detail/palette-creator/oolpphfmdmjbojolagcbgdemojhcnlod 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-creator/ https://addons.mozilla.org/en-US/firefox/addon/palette-creat...) and Opera (https://addons.opera.com/en/extensions/details/palette-creator/ 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 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 9y ago
  Cool extension. Is the palette extraction available as a standalone package?
  - unindented 9y ago
    Yup, I published it as an npm module: https://www.npmjs.com/package/neuquant-js https://www.npmjs.com/package/neuquant-js
    - ioi0 9y ago
      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!
brndnmtthws 9y ago
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.
pspeter3 9y ago
Did you make this with Angular 2 & TypeScript? If so, how was the experience?
- ioi0 9y ago
  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.
woliveirajr 9y ago
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/06/nariz.jpg http://www.fatosdesconhecidos.com.br/wp-content/uploads/2015...
- ioi0 9y ago
  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!
leeoniya 9y ago
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 9y ago
  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/index.html https://cdn.rawgit.com/leeoniya/GIFter.js/9b888495/demo/inde...
wyldfire 9y ago
Here's another related one: vibrant.js [1] [1] https://jariz.github.io/vibrant.js/ https://jariz.github.io/vibrant.js/
orschiro 9y ago
Related: does someone know a good colour picker for Linux?

132 points by ioi0 9y ago

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.

waldfee 9y ago
drag & dropping image from another tab works here (vivaldi 1.9.818.22)
ioi0 9y ago
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 9y ago

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 9y ago
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.

onion2k 9y ago

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

optimuspaul 9y ago
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.
ioi0 9y ago
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.

victornomad 9y ago

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-visualization.html http://victordiazbarrales.com/projects/artwork-colour-visual...

brentm 9y ago
But...If you want to do it very quickly and not deal with the quite dense ImageMagick docs this is way easier.
- brudgers 9y ago
  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 9y ago
    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 9y ago
      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.
- koehr 9y ago

skeoh 9y ago

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

ravenstine 9y ago
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.
leecarraher 9y ago
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.

leonvonblut 9y ago

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

lern_too_spel 9y ago
This comes for free in an Android support library. https://developer.android.com/training/material/palette-colors.html https://developer.android.com/training/material/palette-colo...

tholman 9y ago

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

4684499 9y ago

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

unindented 9y ago

A few years ago I created a Chrome extension (https://chrome.google.com/webstore/detail/palette-creator/oolpphfmdmjbojolagcbgdemojhcnlod 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-creator/ https://addons.mozilla.org/en-US/firefox/addon/palette-creat...) and Opera (https://addons.opera.com/en/extensions/details/palette-creator/ 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 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 9y ago
Cool extension. Is the palette extraction available as a standalone package?
- unindented 9y ago
  Yup, I published it as an npm module: https://www.npmjs.com/package/neuquant-js https://www.npmjs.com/package/neuquant-js
  - ioi0 9y ago
    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!

brndnmtthws 9y ago

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.

pspeter3 9y ago

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

ioi0 9y ago
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.

woliveirajr 9y ago

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

ioi0 9y ago
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!

leeoniya 9y ago

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 9y ago
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/index.html https://cdn.rawgit.com/leeoniya/GIFter.js/9b888495/demo/inde...

wyldfire 9y ago

Here's another related one: vibrant.js [1] [1] https://jariz.github.io/vibrant.js/ https://jariz.github.io/vibrant.js/

orschiro 9y ago

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