Check out my
new book!
HTML5 Games book
Grab colors from web pages with Ubiquity and Firefox It has always bothered me when I wanted to grab the color code of some HTML element of image on a web page and I had to either dig through a whole bunch of CSS or take a screenshot and load up Photoshop or whatever. I'm sure somewhere someone has made a tool that lets you do something similar, but with Ubiquity and my new color grabber command I can now quickly put a page into color picking mode and grab any color I want, all from within Firefox.

The idea came to me while working on the new Pixastic image editor. One of the Ubiquity-specific features will be an "edit-screenshot" command that takes a picture of the current page and loads it up in the image editor. This is possible via the HTML5 canvas element. While in normal web pages you can only paint regular images via the drawImage() method, running with Ubiquity's privileges also gives you access to a drawWindow() method that simply takes a window object instead. Pretty cool stuff. So that makes it rather easy to just grab a screenshot and use that in place of a regular image and, for this color picking command, to put the page in a "click somewhere" mode and then use the mouse coordinates to grab the pixel value from the screenshot image.





So what you do is this. If you don't have Ubiquity installed, do that first. Then get the grab-color command here (notice the bar at the top and the "Subscribe" button in the top-right corner).

You can now toggle Ubiquity (ctrl+space or whatever your command is) and type grab-color. And that's it. When you move the mouse over the page, the color under the pointer is displayed in a box and when you click the page, the color is prompted to you for easy copying.

The command has one optional argument that determines the format of the color returned to you, either "hex" or "rgb". So to get the color in rgb([r],[g],[b]) format, do grab-color rgb.
⇓ 13 comments Darkimmortal

Colourzilla.

June 5, 2009 at 7:37 AM
Sahil

yeah... Darkimmortal gave the right name.

I suggest, instead of doing all this hard work, put little time and effort to go through all the available addons of Firefox. You will find a lot of useful tools.

Anyways heads up for your approach. Keep up doing nice work which surely fascinates me.

June 6, 2009 at 12:58 AM
Jacob Seidelin

@Sahil, thanks. Yes, it seems that addon does the job as well. Like I said in the post, I'm sure there are other options, this was just a way to do it with Ubiquity.

June 6, 2009 at 1:07 AM
Jacob Seidelin

And it's not a lot of "hard work", as you'll see if you look at the source, it was really quite simple, but thanks for your concern.

June 6, 2009 at 1:10 AM
Anonymous

On a Mac, there's a little-known utility that's installed by default called "Digital Color Meter", which will show you the current color (in hex, or an RGB tuple, or whatever) of anything on the screen under the mouse cursor. A viable alternative for anyone using OS X (no doubt similar utilities could be found for Windows users as well), and useful for more than just web pages.

June 21, 2009 at 9:16 PM
Anonymous

Hi! Another solution: http://www.iconico.com/colorpic/

June 23, 2009 at 6:35 AM
gustavob

Thanks,
Great information!
Keep it up!

June 27, 2009 at 11:23 PM
Anonymous

This is great! Whatever other options are, it's fantastic to have something available for Ubiquity. Many thanks :)

July 20, 2009 at 5:55 AM
Terry

Can Pixastic be used to extract common colors from an image using javascript?

September 6, 2009 at 4:39 PM
Jacob Seidelin

@Terry: There's no such functionality in Pixastic at the moment, but it shouldn't be hard to add if someone's up for it.

September 10, 2009 at 11:33 AM
cartouche d encre

Hi..
I want to be the best web designer and have known different designing softwares. I always try to be ready for learning new techniques which can help me to achieve my goal. Thank you so much for giving extra knowledge here.

October 5, 2009 at 11:25 PM
Anonymous

Very nice post i liked it very much it was very informative and interesrting to read do keep posting in near future also like this only.
Aventura Fl banner printing

October 27, 2010 at 11:16 AM
Beben Koben

not found :D
how are you master?

November 30, 2012 at 5:16 AM
Post a Comment