Color Thief, script for grabbing the color palette from an image | Hacker News Reader

Color Thief, script for grabbing the color palette from an image

lokeshdhakar.com

212 pointstortilla40 comments

I built a similar tool for this purpose recently. It uses Canvas, but falls back to Flash if Canvas is not supported. Here's an example - hover and click the image - http://www.imagecolorpalette.com/image/40

Why does it turn magenta when you double-click (on two distinct pixels specifically)?

That's just the highlight color. Assuming you're using Chrome, it's pretty eager about highlighting random stuff; other browsers may be similar. Try selecting some text.

There is a css rule to disable user selection which might be handy here: http://stackoverflow.com/questions/826782

Made something similar a long time ago but never made it look as good as yours :)

http://colorslice.dtrejo.com/

I'm not a programmer, but I see an opportunity here:

Go to istockphoto.com - this is a site where you can buy images for use in any type of publication, advertising etc.

The opportunity I see would be to offer to write software which indexes their entire collection by color.

Then when someone wants to buy an image for a publication they could put their colors in and have istockphoto only show them images which fit the color palette.

This would save designers a ton of time.

iStockPhoto already has a "search by color" feature which does pretty much what you're suggesting. http://screensnapr.com/v/gTjWCw.png

sorry, that must be new then. It has been a little while since I logged in there.

Sorry in advance as I'm not trying to make you feel stupid but.. I used to use that feature a lot before they were acquired by Getty (and their prices got so ridiculous I stopped using them.) So at least six years ago.

Wow, I can use this. This is great. I run an online football game http://deeproute.com and players upload helmets to go with their team.

I can use this to check that helmet image they are using, and grab the color palette and then use those colors to drive their color scheme.

Brilliant! Thanks!

This could produce an interesting and possibly strange image viewer if you use it to control the color scheme of the page. For example, you upload an image and the css of the page itself updates to be complimentary to the photo.

Very nice. I would expect a provision to upload (or add URL of) an image and test it on the demo page before downloading it and using it on my website.

You can build a similar thing server side using Imagemagick. It has a great suite of tools for doing image quantization and other manipulations.

I've tried. I've failed. I would have loved seeing this been done in Imagick on PHP.

You can do it like this with ImageMagick on the command line. This will quantize the image to 8 colors and list them in descending order of occurance:

  convert image.jpg -resize 400x400 -format %c -dither None -quantize LAB -colors 8 -depth 8 histogram:info:- | sort -r

Sorting should be done with sort -r -n -t :

Could you make it show the RGB of the color of the square color block I'm hovering over in the palette area?

Clusterfck is a nice JS library for hierarchical clustering: http://harthur.github.com/clusterfck/

I put together a tiny tool like the posted link for playing with clusterfck:

http://dylanfm.github.com/Ladderfck/

Kind of handy for getting a feel for what you can do - e.g. trying different distance metrics and linkages. It too uses canvas.

Can someone please write this in ruby? :)

no, now go jump into a lake

and take your hipster language with you

Hacker News has standards of discussion. Learn them.

I made a gem to do exactly this with RMagick, you can check it out here: https://github.com/mquan/prizm

Here's my shot at it from a few months ago: http://github.com/quadule/colorscore

ImageMagick does the actual color extraction, then I wrote some code to score those colors against a palette for use in a "search by color" system.

Clever use of <canvas>. I made an Android app that does something similar:

https://market.android.com/details?id=uk.co.opeso.android.co...

It would be interesting to see if you could use a system like this to automagically derive background colors for image display, picking muted complimentary colors to make the dominant color in an image "pop", so to speak.

You can do this by representing the colors into HSV and then modifying the hue by 180%, desaturating them and then adjusting the brightness (v). Most color libraries will let you deal in RGB(A) or HSV so this is pretty straightforward to DIY.

That is rather nice! http://www.colr.org has something similar, but it relies on server-side code. An all-javascript solution is a cool thing.

FYI Mobile Safari on iPhone 4 and iPad 1 crashes every time for me.

Have you reported it to Apple?

http://colorapi.com/ is similar but better suited for finding color theme inspiration.

what does it mean when the colours get bigger as i mouse over them? is something else meant to happen? i guess that should mean they are clickable, or that something else is changing, but i don't see anything else change and nothing happens when i click. is something broken (chrome latest stable, linux)?

[edit: and if not, please don't do that.]

I think if the users can copy the Hex codes by clicking on individual colors, it can be a useful service.

I always wanted something like this and I even thought of building it, but I didn't have time to learn javascript.

This kind of reminds me of http://www.pictaculous.com/

Is white not considered for dominant colour? In the apple logo pic, white is clearly the dominant...

Looks that way:

https://github.com/lokesh/color-thief/blob/master/js/color-t...

I wonder if it works with cross-domain images. I could not see in the documentation if it does.

I haven't tested it, but I would expect so. There aren't many cross-domain restrictions in browsers for images.

Yes, there are. That is why this thing exist: http://www.maxnov.com/getimagedata/

So probably it doesn't work for cross-domain images.

Adobe Kuler also has this feature.

Reply on news.ycombinator.com