Using images for backgrounds simply wastes space, network bandwith etc. Yes that is not that important for most desktop users anymore but still minimization is better - especially for metered connections. You can use CSS3 gradients that work with at least IE 6+, Firefox 3.6+, Chrome, Opera 10+, Safari 4+ which covers pretty much all internet users nowadays.
So this answer doesn't exactly match your question; but it will lead to a higher quality web design.
I heartily recommend the Ultimate CSS Gradient Generator.
- It is a webapp and will function in any recent browser
- It has lots of presets that you can use as a starting place
- If you want you can do crazy things with lots of stops and funky colour mixing
- Supports all gradient options via it's GUI (at least last time I read the CSS3 docs)
- Supports SASS CSS via the latest beta of Compass.
For simple single colour backgrounds I recommend using CSS as well for example:
.redbackground {
background-color:red;
}
will give any element with redbackground as a class a background colour that is surprisingly enough red; you can use some basic colour names, an extended list of colour names, RGB or Hex. Also with most even remotely modern browsers but for IE starting with IE9+ you can also use RGBA, HSL, HSLA colour values.
Alternatively and my prefered option you can use ColorZilla's Firefox plugin or Chrome Extension. I haven't used the Chrome Extension being a Firefox man for decades (not quite but I ditched IE many years ago), but I assume it is equivalent. The plugin/extension features:
*Note the spelling of background-color is with color rather than colour; however as a Canadian I use the Canadian/British spelling of colour wherever W3C standards do not require otherwise.*
