Drawbacks to using background-repeat only for colors?

Question

So I need some custom colors on a layout, but I'm looking for a better way of doing it other than just slapping a giant picture with (background: url(something.jpg)) in the layout.

Mostly I'm thinking of getting a color palette (i.e. from Adobe Kuler, colourlovers, etc.), getting a 5x5 sample of each color and sticking them in an array for CSS sprites or just as separate files and accessing them through: .color-one {transparent url(./one.gif) repeat} and just reusing that whenever I'd like to use the color.

Are there any drawbacks to doing it this way? And if there are should I just stick with web-safe colors or is there a better way of doing this?

Answer 1

You don't need graphics to represent background colors. You are going the long way around if you use images for that. Just use colors, as graphicsdivine suggests.

Only use background images if you need to do gradients and the like. That's really where they shine.

As to your second question, no, you don't need to stick with "web-safe" colors anymore. If someone in 2010 still only can display 256 colors, well, your site won't be their biggest problem.

Answer 2

.color-one{background-color: #f00}
.color-two{background-color: #0f0}

Answer 3

You have to set the colors as background-color anyway to serve readers which don't load images. So I see no use in those images.

And remember: the smaller an image is the more has the browser to compute to calculate all positions. Repeated background images should not be smaller than 20×20px.

Answer 4

Why don't set background-color?

(And your suggestion wouldn't work with sprites, the renderer will also use the other parts of the image)