Creating an Effective Color Scheme for Web Designs


What is it that makes a web design eye-catching? Is it the graphics, or the placement of the objects? Or is it just the content that makes a site a hero or zero? All of these factors do play their parts but it’s the color scheme that does the most important job in making a design striking.

There are many things and myths we are being told by seasoned professionals, like one color scheme may suit at one design but not at another, and should the color scheme be defined before creating the layout or afterwards? Today we find answers to such questions. You will also find many free resources for choosing a color scheme in this article.

Note: this is a huge topic whose bits just can’t be summed up in a small article like this one, so I have given links to relevant resources. It might be a good idea to have a look at them as you study this post.

Introduction to Color Combinations

Color Scheming Tips

There are many methods of choosing a color combination. Let’s quickly go through all of them.

  • Mono: This is the method I like the most, a single basic color and we just manipulate its shades and create the whole design. It looks elegant, classy and it’s easy to code using solid colors, but it is a tough task to create an eye-catching design using just a single color combination.
  • Complement: One cold and one warm color complement each other.  For example, you can see our header is in dark colors but the content area is in white. This is the most used technique on the web.
  • Triad: As the name suggests, in this technique you use three colors in equal distance at the color wheel. (the image above shows the color wheel)
  • Tetrad: Same as Triad, but with four colors. The image above shows a selection of Tetrad technique.
  • Analogic: After Mono, this is my most preferred design style. Here you use three neighboring colors from the color wheel, for example; Purple, Red and Orange.

These are the basic color scheming methods. Designers have created several other methods as well, with a little experience you might create a method of your own. Practice makes a designer perfect.

Colors and Their Suitability

color scheme tips

As you may have already realized, each color carries a feeling, you can see the example of Purple in the image above. Glamour and beauty related websites commonly use red color, red is the color of passion. To know more about these colors and usability, you can visit this info graphic The Psychology of Color for Web Designers.

This is the reason why a color may suit one design but not at the other because the layout of the template also carries an aura and when you change the color-scheme, it doesn’t match the feeling, for example if you have designed a page with sharp pointing edges which can be a symbol of strength and suitable for a gym website, and you give it a color-scheme of pink and purple……. the template faces doom.

Layout and Color Scheme

Color Combinations

Now the question arises, should we choose the color-scheme before creating the design, or afterwards? According to the client’s needs you would have a few coloring suggestions, the best option is to leave the decision at the client.

If the client finalizes the basic color-scheme, you would never be confused while making the design. Then it becomes very likely that your client will be happy with your work, that’s because the design is in his favorite color.

So deciding a color before creating a layout worked for me, I think you should also follow this technique.


Whenever you get a client, make a list of suitable colors to the client’s business, ask the client for their priority and then design the layout.  One more thing, use color-scheming tools to create a combination. They help a lot. Here’s a relevant reading: 10 Free Ideal Tools for Creating a Fantastic Color Scheme.

create free website wix below post

Further Related Readings

  1. Hermitbiker July 10, 2011 at 3:41 pm

    …. cool color scheme advice… thanks Ayaz !!

    1. Ayaz Malik July 10, 2011 at 4:58 pm

      Thanks Man 🙂

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved