CSS Color Picker

The Problem

When you’re working on a web mockup in HTML, Firebug is a godsend.  You can tweak CSS attributes and values and see their effects on your page immediately; it’s like sketching in CSS.  However, when you want to change CSS color values, Firebug only lets you type in color hex codes; there’s no color picker.  What’s up with that?

Well, it bothered me enough that I decided to hack up a little tool to let me ’sketch’ with color values in CSS.

The Solution

CSS Color Picker is a JavaScript bookmarklet that creates a draggable, instant-page-updating color picker over any web page.

I’m calling it CSS Color Picker, until I decide that I need a sexier sounding name.  But who cares what it’s called?  How does it work and what does it let you do?

To install CSS Color Picker, just drag this link to your bookmarks toolbar in Firefox or Safari (or right-click the link and bookmark it as a normal bookmark):

CSS Color PIcker

Then just activate the bookmark to load the picker.

Notes about the picker:

• By default, the picker loads with ‘body’ as the CSS Selector value, ‘background-color’ as the Attribute Name, and ‘red’ as the default color.  When you load the picker, your page’s background will change to red.  Don’t worry, just change the Selector and Attribute and Color and be on your merry way.
• The picker box loads in the upper left of the page, so if you’ve scrolled down on a page before activating the picker (or if you just clicked the picker link here and you happened to have scrolled), you’ll need to scroll to the top to see the picker. (Loading it with position: fixed fixes this problem but breaks the picker, so I’m leaving it as-is for now.)

Using the CSS Color Picker is easy:

1. Activate the CSS Color Picker via the bookmark you made.
2. Enter the name of any CSS selector (like ‘body’ or ‘.myclass’) in the CSS Selector box.
3. Enter the name of any CSS color attribute name (like ‘background-color’ or ‘border-color’ or ‘color’) in the Attribute Name box.
4. Using the sliders and the color box, click a color and watch as all elements that match the CSS Selector you’ve entered have their Attribute Name color property adjusted to your selected color.
5. When you’ve found a color value you like, copy/paste its hex value from the picker into your CSS styles.

Haven’t tried it yet? Here’s what it looks like:

Easy. Awesome. Enjoy.

-gabe