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 judgment 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 contrasts 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 hightlight color, as described above.

Split Complimentary 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.

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 effectual.

Web Safe Colors

Anyone who has done any sort of web page has probably heard of the web-safe colors. Web-safe color is a bit of a debated issue among web desingers these days. Many firmly believe in using only these colors, while others feel they can allow themselves to use colors which are not regarded as safe.

What are web-safe colors?
Web-safe colors are somewhat of a remainder from the early years of the web, back when a normal screen could only display 256 colors. Back then, there was a reason to be concerned about consistency in how browsers displayed the colors. The computer system itself uses some 40 colors, for menus and such, and the remaining 216 colors could be used to display the actual web pages.
Now, 216 colors might sound like quite a bit, but the problem is that no aesthetic considerations were made when these colors were decided, but rather they are based solely on mathematical formulas. To be more exact, the web-safe colors are what you get when you use 0%, 20%, 40%, 60%, 80% and 100% of the three different primary colors, and then mix these in every possible combination.

Below are all the web-safe colors, along with their hexadecimal values.


So, should you use web-safe colors?

The proportion of web users with a screen capable of displaying only 256 colors decreases by the day. At the moment, less than 1% still use these old screens. A page which uses non-web-safe colors is not rendered unreadable, even on these old screens, though admittedly some colors can differ in a rather ugly way. Still, I'd say that you can deviate from the web-safe colors without needing to feel guilty. After all, what is the purpose in getting a color to display the same way on all screens if it is a color that you don't really like anyway, and don't feel very enthusiastic about? However, if you are using a color which is close to a web-safe alternative, you might as well make it web safe, to ensure that it will be displayed properly.
It has also been shown that only a small part of the web-safe colors are truly safe, which is another reason not to bother with them.

Color Display

However, there are more things you need to keep in mind about how colors are displayed. At present, about 95% of all users have screens with True Color. On these screens, the colors are displayed just the way you want them to be. However, about 5% all web users have screens which displays High Color. High Color is somewhere in between the old standard 256 colors and the True Color millions of colors. The problem with High Colors usually arises when you mix colors that are defined in an image and colors which are defined in the HTML code. Then, even if the colors are supposed to be the same, they are displayed differently in the browser. If you have your screen set to High Color you have probably noticed these little discrepancies when you surf the web. To get around this problem, you can use small, one-colored images for backgrounds. Also, try to make the background transparent on your GIFs, even if they are displayed on a background which is supposed to be of the same color.

Color Myth

A color myth, Meaning of colors

Understanding color models

There are a range of color models to choose from when creating graphics.

CMYK color model
The CMYK color model uses the following components to define color:

1. cyan (C)
2. magenta (M)
3. yellow (Y)
4. black (K)

The cyan, magenta, yellow, and black components are the amounts of cyan, magenta, yellow, and black ink that a CMYK color contains and are measured in percent from 0 to 100.

The CMYK color model, a subtractive color model, is used to produce printed materials. Subtractive color models use reflected light to display color. When you combine cyan, magenta, yellow, and black, so that the value of each component is 100, the result is black. When the value of each component is 0, the result is pure white.

RGB color model
The RGB color model uses the following components to define color:

1. red (R)
2. green (G)
3. blue (B)

The red, green, and blue components are the amounts of red, green, and blue light that an RGB color contains and are measured in values ranging from 0 to 255.

The RGB color model is an additive color model. Additive color models use transmitted light to display color. Monitors use the RGB color model. When you add red light, blue light, and green light together, so that the value of each component is 255, the color white is displayed. When the value of each component is 0, the result is pure black.

HSB color model
The HSB color model uses the following components to define color:

1. hue (H)
2. saturation (S)
3. brightness (B)

Hue describes the pigment of a color and is measured in degrees from 0 to 359 (for example, 0 degrees is red, 60 degrees yellow, 120 degrees green, 180 degrees cyan, 240 degrees blue, and 300 degrees magenta). Saturation describes the vividness or dullness of a color and is measured in percent from 0 to 100 (the higher the percentage, the more vivid the color). Brightness describes the amount of white that the color contains and is measured in percent from 0 to 100 (the higher the percentage, the brighter the color).

Grayscale color model
The grayscale color model defines color by using only one component, lightness, which is measured in values ranging from 0 to 255. Each grayscale color has equal values of the red, green, and blue components of the RGB color model. Changing a color photo to grayscale creates a black-and-white photo.