3

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.

Improve this question

3 Answers 3

Reset to default
2

Check out ColorZilla, an extension of Firefox.

Improve this answer
5
  • 1
    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, 2012 at 20:55
  • Indeed, @JacobHume
    – Kzqai
    Jan 23, 2012 at 21:33
  • 1
    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, 2012 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, 2012 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, 2012 at 19:06
1

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.

Improve this answer
0

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?

Improve this answer
2
  • 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, 2012 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, 2012 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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