Simon Willison’s Weblog

Well, originally I thought it could be done if:

1. You can interogate the current cursor position
2. You can find out the xy position of anything in the dom tree
3. You can find out the color of anything in the dom tree

Which would give you a nasty brute force parse-the-dom-tree-on-mouse-move type solution. However what color do you want? Borders are a pain - you could calculate if you were over a border I suppose. Then I thought "What about text?". If you want foreground colours you're out of luck - how are you going to determine your cursor is over some text? Don't even get me started on the complexities of background images. Whats the problem with using Eye Dropper? Is it PC only?

sam newman - 19th April 2004 00:41 - #

Those were pretty much my thoughts - don't forget about the problem of querying standard images as well. I haven't found an EyeDropper equivalent for Mac yet but I haven't actually looked for one yet. I'd like it as a bookmark purely because it would provide instant gratification - no need to launch a separate app.

Simon Willison - 19th April 2004 00:50 - #

How about xScope? I don't need an eye dropper (loupe) often, but when I do, this thing works pretty well. Lots of other toys in it too.

http://www.iconfactory.com/xs_home.asp

Justin - 19th April 2004 01:16 - #

It's not quite what you're looking for, but Chris Pederick's Web Developer Extension for Mozilla and Firefox has a "View Style Information command which displays the complete CSS inheritance tree of an object, although it only works on certain compilations of the browser. From there it becomes easier to work out what colour is being applied, and you could always take the code and tweak it to work out foreground and background colour (and take things in like non-CSS styles) and display them at your whim.

Dunno if there's something similar for Safari though, but it's a start.

Moof - 19th April 2004 01:19 - #

It can be done. I'm not sure how exactly, but it can be. Panther has an application in it's Utilities folder called "Digital Color Meter" which does this. So, it's do-able. I just use that app, as you can set it to 8bit Hex.

Dave Giffin - 19th April 2004 01:29 - #

If you have the Mac OS X Developer's Tools, you'll find Pixie in /Developer/Applications/Graphics Tools/Pixie. It does just that. If you're still on Jaguar, there won't be a "Graphics Tools" directory; it will just be in the /Developer/Applications directory.

Chris Vincent - 19th April 2004 03:17 - #

I'm not really sure how it could be done via bookmarklets either. For those looking for a PC-side solution, I find ColorPad (working mirrors in the comments section) to be a pretty good software color picker.

It's a small program that sits in your taskbar tray. While the interface is compact, it still manages to provide a lot of features and a good amount of feedback. Most importantly, it doesn't feel like it gets in the way.

starvingartist - 19th April 2004 04:34 - #

Nah, mate. No chance of that. Pixel colour isn't in the DOM; you can only know about elements, and "which *bit* of this image am I over" isn't in the tree. It would be cool, though. :) You *might* be able to do it on Windows by calling proprietary COM objects from your bookmarklet, but I wouldn't know how and that certainly won't work on other platforms.

sil - 19th April 2004 06:31 - #

Hang on, here's a thought: What if you were to load the image under the cursor using XmlHttpRequest (or the IE equivalent ActiveX thingy) and pull the binary image in to a Javascript array. Then write a Javascript JPEG/GIF decoder which could be used to figure out the colour of the specific co-ordinate of the image.

Of course, the whole thing would have to run fast enough to keep up with the changes in the onmousemove() events... so maybe not.

Simon Willison - 19th April 2004 06:52 - #

Client-side may not be the most appropriate. If you're talking about sampling from an image, you could use server-side image maps (remember those?).

However, you need some kind of indication about what colour is under the cursor. Browsers give you all the tools you need for that. Obtain the (x,y) position over the image, and have a second copy of the image nearby at, say, 800% enlargement; crop the edges and reposition in sync with the cursor. You won't programmatically get the colour but there will be a visual representation.

I would love to see a combination of both these approaches, if you decide to try it out!

Owen - 19th April 2004 09:34 - #

JavaScript GIF decoder? Perfectly possible.

JavaScript JPEG decoder? Not a snowball's chance in hell!

Or rather it *is* possible, but it would be such a HUGE amount of code and it would run SO slowly that it would be completely unusable.

BMPs would be fine, but PNGs would be as nightmarish as JPEGs, if not moreso (think alpha blending)...!

;)

Marcus Tucker - 19th April 2004 09:45 - #

You don't actually need a JavaScript JPEG decoder: just have a server-side script written in some faster language and have Javascript request the colours of pixels from that using a hidden iframe or whatever. I'm not sure if even that would be fast enough to keep up with "onmousemove"s though. Maybe you could write a bookmarklet that does something along these lines to run a PHP script that loads the page in a window of the same size on a friendly server and then calls an external program that finds the pixel colour of the current pointer coordinates. But I don't think it would be worth it.

Rich - 19th April 2004 12:55 - #

I think we're on to something there. The ImageMagick API can work out the colour of a specific pixel if you give it the required co-ordinates for pretty much any image type you could think of, and it's fast to boot. there's no way it would keep up with an on-move, but you could definitely get it to work on-click. I don't think getting a PHP script to load the page at the same size on a friendy server would work due to the myriad of rendering differences between different browsers on different platforms (a page showing on my Mac at my chosen browser size would come up differently from one running in Konqueror on KDE or whatver). If you could pass the URL of an image + the X, Y co-ordinate pair you wanted to query back to a server side script with remote-scripting you could probably pull it off.

Simon Willison - 19th April 2004 13:31 - #

Get this - the feature was available way back in Mosaic 3!

There's an interesting thread about this here:

http://www.webmasterworld.com/forum21/7708.htm

"Pixel Color". As expected, this launches a popup with the RGB hex codes for the point where you clicked... Very useful for webmasters.

Chris Hester - 19th April 2004 15:49 - #

I ran accross this from Pixy a while back. It is a List computed (cascaded) styles. and you can specify color or background color. the only drawback I see is that it only gives you the RGB of that area, I would like to see the hex. http://www.pixy.cz/blog/favelets/

Blakems - 19th April 2004 16:10 - #

This isn't a bookmarklet but it is a program that does just what you want and does it well. http://www.nattyware.com/pixie.html

Will Rickards - 19th April 2004 16:44 - #

I had given this very idea some consideration a few months ago and experimented briefly with an activeX component to manage it. After some deliberation I've recompiled it and posted an example on slayeroffice, along with the source for the activeX bit. All the usual disclaimers involved with unsigned activeX apply.

http://slayeroffice.com/test/cpick/

Steve - 19th April 2004 17:50 - #

I don't think getting a PHP script to load the page at the same size on a friendy server would work due to the myriad of rendering differences between different browsers on different platforms (a page showing on my Mac at my chosen browser size would come up differently from one running in Konqueror on KDE or whatver).

I don't think just handling images by a server-side script is good enough though. Imagine a paragraph of red text on a green background: how would you determine whether you clicked on part of the text or the background colour from JavaScript? At best, you could say "the background is green and the foreground red in the region where you clicked." Or am I missing something? Or is that sort of resolution good enough? (And even that wouldn't work very well if you have lots of semi-transparent regions on top of each other.)

Rich - 19th April 2004 21:08 - #

I think we're on to something there. The ImageMagick API can work out the colour of a specific pixel if you give it the required co-ordinates for pretty much any image type you could think of, and it's fast to boot. there's no way it would keep up with an on-move, but you could definitely get it to work on-click. I don't think getting a PHP script to load the page at the same size on a friendy server would work due to the myriad of rendering differences between different browsers on different platforms (a page showing on my Mac at my chosen browser size would come up differently from one running in Konqueror on KDE or whatver). If you could pass the URL of an image + the X, Y co-ordinate pair you wanted to query back to a server side script with remote-scripting you could probably pull it off.

Peter Mantik - 6th June 2004 12:21 - #

You don't actually need a JavaScript JPEG decoder: just have a server-side script written in some faster language and have Javascript request the colours of pixels from that using a hidden iframe or whatever. I'm not sure if even that would be fast enough to keep up with "onmousemove"s though. Maybe you could write a bookmarklet that does something along these lines to run a PHP script that loads the page in a window of the same size on a friendly server and then calls an external program that finds the pixel colour of the current pointer coordinates. But I don't think it would be worth it.

Dan - 12th June 2004 11:24 - #

Get this - the feature was available way back in Mosaic 3!

windflash - 14th June 2004 14:34 - #

It can be done. I'm not sure how exactly, but it can be. Panther has an application in it's Utilities folder called "Digital Color Meter" which does this. So, it's do-able. I just use that app, as you can set it to 8bit Hex.

blackjack - 15th June 2004 16:27 - #

Why not just use ColorZilla?

raydancer - 21st April 2005 18:10 - #

hhgfhgh

gfdg - 10th September 2005 10:04 - #

Is it possible to use a java applet to find out pixel color on a web page? I need it for a color fill algorithm.

Aparna - 9th March 2006 09:06 - #

I'm sure this could be made to be ie compat if I cared to spend the time on it, but here's my eyedropper/stylesheet manipulator for firefox. My javascript-foo is pretty lame. Writing it pretty much felt like poking things in the dark with sticks.

Glenn Franxman - 18th May 2006 07:38 - #