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
So what you do is this. If you don't have Ubiquity installed, do that first. Then get the
You can now toggle Ubiquity (ctrl+space or whatever your command is) and type
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
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.
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.
Colourzilla.
June 5, 2009 at 7:37 AM Sahilyeah... Darkimmortal gave the right name.
June 6, 2009 at 12:58 AM Jacob SeidelinI 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.
@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 SeidelinAnd 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 AnonymousOn 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 gustavobThanks,
June 27, 2009 at 11:23 PM AnonymousGreat information!
Keep it up!
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 tzmartinCan 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 encreHi..
October 5, 2009 at 11:25 PM AnonymousI 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.
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.
October 27, 2010 at 11:16 AM Beben KobenAventura Fl banner printing
not found :D
November 30, 2012 at 5:16 AMhow are you master?