Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

Color Schemes are one of the most important aspects of a good graphic design. They will make people fall in love with your website or absolutely hate it. Most people tend to think of colors as art and putting colors into schemes takes an artist. However, there is actually a science to help the less artistic people like myself, called Color Theory. I won't get into much detail about the values, hues, or saturation of colors, but I will explain a few of the most dominant color schemes. After reading this tutorial, experimenting with the color schemes is an excellent idea.

Color Combinations

It should go without being said, but just because we have color doesn't mean that everything needs to have it. However, black and white websites that aren't intended for some old fashion business lack creativity and often push people away from the website. When I say going overboard with color, I mean either using too many colors or coloring too much, both of which can break a design. Color Theory has given us quite a few schemes or ideas to blend our colors into our web pages, but I don't want to overload you with all of them. So, we will discuss three primary color combinations.

Monochromatic Color

Monochromatic Color SchemeThe monochromatic color scheme involves one color with different tints. This is a great color scheme for showing depth and drawing focus to certain elements.



Analogous Color

Analogous Color SchemeThe analogous color scheme involves various colors that are in very close proximity to one another. This is somewhat close to the monochromatic color scheme except for instead of the tint and saturation changing, it is the color that is changing. The analogous colors often can portray feelings like hot or cold because of the color combination.



Complementary Color

Complementary Color SchemeThe complementary color scheme is a composition of opposing colors on the color wheel. Complementary colors provide the highest contrast out of all of the schemes listed here. They have excellent contrast and compliment each other very well. Each color is much more intense than when the color displayed on a white background. For instance, red with green makes red seem even redder.

Well, that concludes the three primary color schemes that I am prepared to talk about. Feel free to get behind the canvas and start painting up some awesome color combinations on your website.

As I've said, I'm not a designer, but just a programmer. You should consider reading the following book to understand graphic design from a designers perspective.

Let's explore some more tutorials or topics!

Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments
  • User

    alcoder Nov. 8, 2016, 1:51 p.m.

    Brilliant tutorials, but alas your image links are broken. :(

  • User

    orasare July 7, 2014, 12:04 a.m.

    its okey,, i like this style article

  • User

    orasare June 19, 2014, 4:39 a.m.

    i agrree this article

  • User

    orasare June 19, 2014, 4:39 a.m.

    i agrree this article

  • User

    Videl May 27, 2014, 1:19 p.m.

    Great tutorials

  • User

    Martin Francis March 22, 2014, 1:07 p.m.

    Perhaps this would be a good place to introduce RGB hex colour codes and the concept of opacity?

  • User

    Ivan P. Feb. 21, 2014, 1:17 p.m.

    Very useful.

  • User

    Kellin Carlile Jan. 18, 2014, 12:53 a.m.

    I find this one as useful as I was expecting. Thanks alot

  • User

    Luke J Aug. 7, 2013, 3:08 p.m.

    This section is almost there, but a little more detail on background color vs. highlights, headers vs. body would be useful. That is, where do we apply these coloring schemes? Great resource, thanks for your work on this site



Advertisement