A Simple Web Designer’s Color Guide

A Simple Web Designer’s Color Guide


Color theory is something that most website developer really do not want to deal with. It would be great if you can just choose any color for your website and call it a day.

Although you can most certainly do that, actually getting results would mean that you have to rely on some standards rather than just choosing whatever color is out there.

That being said, as a web designer, how will you choose the main colors that you must use on your own websites?

Start with a Base Color

There are over 10 million different colors you can choose from and among the million options, you only choose one. You should start by choosing your base color and this should be one that constitutes the vast majority of the space on your site.

Some things to consider:

  • If you are talking to some clients, ask if they already have a logo in mind (as well as an accompanying color).
  • Look at your client’s competitors and make it a point to not use what they’re already using.
  • Their target audience is also key. If the website is intended for younger audiences, you would want to choose more vibrant colors.
  • Just make sure that whenever you pick colors that you do not choose the usual stereotypes such as pink for girls, blue for boys, etc.

Add an Accent Color

Okay, by now, you’ve probably chosen your base color and that is good. It should act as your primary color and it should constitute the vast majority of your website’s space.

Now, you should also add an accent color as well. Think of this as your secondary color and it should be contrasting with your primary color.

That being said, it is important for you to understand that you only need to be thinking of two colors to start with (your base and accent). The reason is that you will also be adding some neutral colors into the palette as well and these colors are white, dark gray, and light gray.

If you could stick to this 5-color scheme, then your website will look nicer and simpler in the process.

Applying Everything

Now that you have come up with all of the necessary colors to start with, it is now time to apply them to your website. Here are some helpful tips:

  • The primary color should be used predominantly on your website. This means that in almost all areas, the primary color should be used.
  • The secondary color should only be used in contrast with the base color. Use this as part of your background, especially if there is some text that you would like to add to make it more readable.
  • By now, you would also have to have a lighter and darker shade of gray. The darker gray should be used for the icon, the text, and the logo while the lighter one should be used primarily for the background.