Show HN: Get colour palettes from pictures

https://pictones.firebaseapp.com/

by ioi0 • 9 years ago

132 34 9 years ago

pictones.firebaseapp.com

4684499• 9 years ago

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

nxsynonym• 9 years 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• 9 years ago

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

ioi06• 9 years 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• 9 years 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.

ioi06• 9 years 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• 9 years 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-Pa...

optimuspaul• 9 years 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.

ioi06• 9 years 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• 9 years ago

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

brentm• 9 years ago

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

brudgers2• 9 years 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.

koehr• 9 years ago

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

That is really simple.

skeoh• 9 years ago

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

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

ravenstine• 9 years 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• 9 years 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• 9 years ago

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

lern_too_spel• 9 years ago

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

tholman• 9 years ago

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

unindented2• 9 years ago

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!

mcjiggerlog• 9 years ago

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

unindented2• 9 years ago

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

brndnmtthws• 9 years 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• 9 years ago

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

ioi06• 9 years 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• 9 years 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...

ioi06• 9 years 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!

leeoniya2• 9 years ago

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

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

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

leeoniya2• 9 years ago

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

wyldfire• 9 years ago

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

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

orschiro• 9 years ago

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

Show HN: Get colour palettes from pictures

Related Stories