CSS Color PIcker Bookmarklet

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?

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.

Source (www.kickasslabs.com)


Download Bookmarklet:


View Bookmarklet Code:

Bookmarklet Source Code:

javascript%3Avar%2520_CSSPICKERTYPE%3D%27photoshop%27%3Bvoid%28function%28%29%7Bvar%2520s%3Ddocument.createElement%28%27script%27%29%3Bs.src%3D%27http%3A//yui.yahooapis.com/2.5.2/build/yuiloader/yuiloader-beta-min.js%27%3Bdocument.getElementsByTagName%28%27head%27%29%5B0%5D.appendChild%28s%29%3B%7D%28%29%29%3Bvoid%28function%28%29%7Bvar%2520s%3Ddocument.createElement%28%27script%27%29%3Bs.src%3D%27http%3A//static.kickasslabs.com/projects/css_picker/css_picker.js%27%3Bdocument.getElementsByTagName%28%27head%27%29%5B0%5D.appendChild%28s%29%3B%7D%28%29%29


Rate it:


Tags:

Comments

Comments so far. Add yours.