Color Tools  •  Color Scheme Generator
Color Wheel  •  Color Theory
HomeContact Us

Colors on the Web

Combining Colors

Color combination is really the most important part of color theory and designing with colors, and also the hardest-- It always comes down to your personal judgement and how you look at colors. There are, however, some guidelines that can be used to make a color combination that is interesting and pleasing to the eye.
How many colors?

It is hard to give an exact answer to this question, but in general one can say that the risk of using too many colors is greater than the risk of using too few. 

Too many colors will make the page feel too busy and it usually makes it harder for the viewer to find the information he or she wants. It is also more tiring to the eyes.

 A page with too few colors, on the other hand, risks being seen as a bit boring, but this need not always be the case. 

One commonly used rule in these matters is to use three colors. 

  • Primary color: This is the main color of the page. It will occupy most of the area and set the tone for the design as a whole. 
  • Secondary color: This is the second color on the page, and it is usually there to "back up" the primary color. It is usually a color that is pretty close to the primary color.
  • Highlight color: This is a color that is used to emphasize certain parts of the page. It is usually a color which constrasts more with the primary and secondary colors, and as such, it should be used with moderation. It is common to use a complimentary or split-complimentary color for this (see below).
Color Wheel
By now you should recognize the color wheel. If not, please read the section about Color Theory. As mentioned there, the color wheel is very useful when you want to combine colors in a way that is pleasing. Below I will demonstrate some of the most common ways to combine the colors in the color wheel.



Analog Colors
The analog colors are those colors which lie on either side of any given color. Often these are color schemes found in nature. A site that makes use of analogous colors usually feels harmonious. The secondary color, as described above, can often be an analogous color.

Complementary Colors
The complementary colors are the colors which are directly opposite from one another on the color wheel. Complementary colors are contrasting and stand out against each other. Often it is a good idea to use a complementary color as the highlight color, as described above.

Split Complementary Colors
Split complementary is a color and the analogous colors to its complement color. Using split complementary colors can give you a design with a high degree of contrast, yet still not as extreme as a real complementary color. It also results in greater harmony than the use of the direct complementary.

Triad Colors
Triad colors are three hues equidistant on the color wheel. When you want a design that is colorful and yet balanced, a triad color scheme might be the way to go.

Keep in mind that the combinations above only illustrates the hues that are combined. In most color schemes you will also introduce variations on saturation, tint and shade. 

Other color combinations 
Besides the color combinations described above, which are based on the position of the colors on the color wheel, there are also a few other ways of combining colors. 

Monotone Chromatic A monotone color scheme is just one single hue and its variations in terms of tints, shades and saturation. Using saturation and tint/shade variations of a color is always good. However, in most cases I would advise against using a fully monochromatic scheme, as there is a risk of monotony. Using it with pure white or black can be efficient, though.



Monotone Achromatic A monotone achromatic color scheme is a special instance of the monotone scheme which consists of only neutral colors ranging from black to white. A scheme like this can be efficient, but it can very easily look boring. Using an achromatic scheme with just one bright color for highlight can be very effective. 

Colors On the Web
A website dedicated to color theory and its use in web design.
Copyright 2024 by Colors on the Web | Privacy Statement | Web Design by: BIS Designs