42 comments

[ 2.5 ms ] story [ 100 ms ] thread
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.
I wonder if it works with cross-domain images. I could not see in the documentation if it does.
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'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.
I always wanted something like this and I even thought of building it, but I didn't have time to learn javascript.
Could you make it show the RGB of the color of the square color block I'm hovering over in the palette area?
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.
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 :
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.
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.

FYI Mobile Safari on iPhone 4 and iPad 1 crashes every time for me.
Have you reported it to Apple?
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.
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!

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.
(comment deleted)
This is genius! Thanks for sharing it!