Yesterday, I showed you how I chop up a free CSS template into pieces so that site-wide elements can be automatically included via PHP. That’s the first step I usually take when customizing a template, but it’s definitely not the last step. Today I’m going to show you the next step I usually take:

Changing The Color Scheme of CSS Templates

Not all templates come with images, but many do, so if images are involved, and they are responsible for creating some of the color scheme, then I start with them first. Using the same sample template as we used yesterday, Coffee n Cream, you’ll see it’s composed of a few small images that make up most of the brownish tones in the template. If I liked the template, but wanted to change the color scheme to some other color, I’d start by changing the color of those images. The easiest way I’ve found to change each of the image’s colors so that they remain cohesive and still match each other nicely, is to adjust each image’s Hue-Saturation level, keeping the levels consistent for each one. I usually use Gimp to adjust the images, but since everyone uses a different image editor, I thought I’d show you how to do the same thing using a simple online image editing tool - Pixenate.

Here’s what Pixenate looks like when you first arrive at the site.

First, upload one of the images, and then choose the Colors Tool, which looks like this:

Next I just adjust the sliders until I get a color I like. Let’s say I’m going for a mauve-pinkish tint instead of brown. Here’s what the sliders look like:

In this example, moving the sliders around until the numbers showed 154, 41, and 55 for brightness, saturation, and hue gave me the color I was looking for, so I clicked Apply and then saved the new image. (It doesn’t matter if you don’t understand what the numbers mean). Write down the numbers that work for you, and you’ll simply use the same numbers for the rest of the images that you want to change from the brown tint to the pinkish tint. Just upload, change the numbers, apply and save for each of the images you want to adjust the colors for. By using the same numbers, each image will change by the same amount, and the results will be a new color-coordinated scheme of images. Here are three of the brown images along with the new pinkish images I created by using Pixenate on them.

Just by taking a few minutes to change the colors of the images, the Coffee n Cream template can look completely different and could be called Raspberries n Cream instead.

You’ll probably also need to edit some colors in the CSS template as well. Some of the font colors and/or link colors may need to be tweaked for your new color scheme. I usually use Firefox’s CSSViewer add-on and Web Developer add-on to figure out which colors need to be changed. Then I just replace the colors in the CSS file with the new colors I need, and I’m all done with the CSS Template Color Scheme Makeover.