How to pick the right colors for your template

The colors you use for your website will make it or break it. A badly coordinated color arrangement will turn the reader off and push him or her away from your website. It is one of the key elements to an excellent template and I will give you a key overview on how to pick your colors.

There are many different ways a website may be arranged, color-wise. You can do a simple black&white template, which is the easiest and I think is very useful if you want to go for the executive feel. You can do a one-color centered website which will feature a single hue in different shades. Simplicity is the key sometimes and if you want a simple website that does not distract its reader, a monochromatic design is the best for that. If you want to go for a flashy look, you have to use multiple colors and that’s when designing gets tricky. I’ll be using different templates I created a couple weeks ago to show you the different color variations that can be made. They will be available later in Exan’s Corner for free download.

Black and White

Here we go, this is what a simple black and white template looks like:

Dave PC Guy in black and white

black and white chiropractic template

I used two different templates that were originally in color that I turned black and white using an adjustment layer in Photoshop. Black and White templates usually feature some sort of texture to make up for the simplicity. You can find many of those free to download. Some pages are also not ONLY black and white but feature some basic color definition for contrast. Here are a few examples that I found online:

• example 1
• example 2

Check out the 40 Inspirational B&W Websites to give you an idea what many professional B&W templates look like. One warning that I have to give you is that B&W images are tricky when choosing shades of grey. I’ll help you out with that in later tutorials.

Single Color

Also called monochromatic, single color templates are not that much different from B&W ones except that you have to balance black or white and another color. It’s actually really simple once you get the hang of it. First step in creating a single color template would be choosing the theme color. Now let’s say we chose blue. That’s not enough, let’s say we chose “4b63a8″ blue. Write that color code down somewhere or make a huge color blob in photoshop using 100% hardness brush tool on a separate layer meant only for color reference. The next step is to pick different shades of the same color. I recommend two more darker blue colors and two more lighter blue colors.

Here is my list of colors:

• b5b9ff (light blue)
• 6997d3 (lighter blue)
• 29467f (dark blue)
• 3b64a5 (greyish blue)
• 2d63bf (neutral blue)
• 4b63a8 (original blue)

Now the trick is to put all these together in the right arrangement. My main rule is to pick the darker blue for large areas if you’re using white text, and the lighter blue if you’re using black text. The original blue is just a reference point so it does not have to be used predominantly in the template. Try using two different lighter colors or two different darker colors for a gradient banner or a menu. Also, one great trick is that whenever you are presented with an area of a single color, apply a single pixel stroke with either a darker or a lighter version of the original color, it will give it a nice effect. For even a grander effect, make a copy layer with a 0% fill and change the stroke to “inside” and use the opposite (darker or lighter) shade of the previous stroke.

Here are a few examples:

Alright, once again, the top template was made single-color using the Hue/Saturation adjustment layer in photoshop. The middle was the same and the last was purposely made single-color from the beginning. The best example for a single-color website would be facebook. You can look around the web and find that most websites are actually made b&w with another single color. Here are 50 monochromatic website designs you can look through.

Multi Color

Multi Color websites are by far the hardest to coordinate. When I started out designing, I would not even touch these because they are just impossible to handle! Read this simple color theory tutorial to get an idea how to work these. First step though is determining how many main colors you’re going to choose. Will you use two colors? Three? Four? Don’t forget, you will also have to pick the darker and lighter counter-parts to complement the color areas.

Here are a few of my own examples:

Orignal Dave PC Guy template

Dave PC Guy template - light version

Original two-color template

I don’t want to be overly egotistical but I think I did a good job coordinating the colors in these three templates. The first and second one uses multiple colors for the background and for the buttons. As you can see they are just accessories to the page. They are not implemented into the page as is the case for the last template. There, both colors are distributed almost equally. Once again, you can see the lighter and darker shades of each hue in the template and that adds to the general clean feel of it.

Now, if you don’t want to do any of the color-wheel work, figuring out the correct darker and lighter shade, what the complementary color is, here’s a shortcut to all that: Color Scheme Designer. A handy free tool that I will explain how to use in my next post. See you then!