Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I frequently find myself testing out new colors for elements (finding that one doesn't work with the rest of the color scheme). Unfortunately, the process when using even firebug or google chrome is hit and miss (try lots of different colors by manually typing in the codes, find out that the color doesn't look good, look up another hex code, try the next color, etc etc).

Is there a better app or approach for this? I'm thinking something like the color pickers in photoshop and elsewhere where you can change the color using sliders to find a better one.

A trivial example of a color picker like what I'm looking for, just for clarity: http://www.colorpicker.com/ But it would be changing the element in the page, of course.

share|improve this question
up vote 2 down vote accepted

Check out ColorZilla, an extension of Firefox.

share|improve this answer
I think they're looking for a tool that would allow you to dynamically set, not just get, the colors for elements on a page. ColorZilla's excellent for pulling colors out of an existing layout, though. – Jacob Hume Jan 23 '12 at 20:55
Indeed, @JacobHume – Kzqai Jan 23 '12 at 21:33
FYI Firebug does allow you to live edit the CSS in the loaded page, so that might be the perfect tool for you. – toomanyairmiles Jan 23 '12 at 22:12
Right, firebug allows live edits, but at least in the most recent version, it no longer suggests colors or allows robust color picking. Which means that you have to come up with a new color, type that new color in, see that it doesn't really fit the color scheme, find a new color, type it in, see that it doesn't quite fit, etc etc, whereas something that allows cycling through arbitrary colors allows you to quickly arrive at a choice that looks good. – Kzqai Jan 24 '12 at 16:30
Hmm, for some versions it does, some it doesn't. I just need to upgrade the right version to have the right functionality. – Kzqai Jan 31 '12 at 19:06

The jQuery Theme Roller allows you to adjust the appearance and color of the jQuery UI controls, and can be used on your own page through their Firefox bookmarklet.

The significant catch would be that it mostly applies to jQuery UI controls, and you'd have to use their naming conventions in your own page styles for it to have any effect.

They do have several very good built-in themes, and you can customize them to suit your needs.

share|improve this answer

I've used tools like http://colorschemedesigner.com/ before, it has a light page/dark page presentation which might be useful to you.

The other option is to build a special stylesheet which loads last that will allow you to quickly change only the colour of the elements you want to.

Is this a single site you're working on or several?

share|improve this answer
Any site that I develop on, although a simple technique could be applied to a dev site each time I'm in development, i suppose. – Kzqai Jan 24 '12 at 16:28
I usually just live edit in firebug, on occasion though I have added an over-ride stylesheet with just the colour scheme information in which would enable the kind of functionality you want. You could also collect individual elements with colour applied in a section at the top of the stylesheet. – toomanyairmiles Jan 24 '12 at 16:31

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.