University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Color Relationships

There are many different relationships of color, which typically refers to where they occur relative to each other on the color wheel. This tutorial is going to discuss four main relationships; monochrome, complementary, analogous, and triadic.

Monochrome

A monochrome relationship is colors of the same hue that have different shades and saturation. This name stems from the Greek language, specifically the words “monos” which means ‘one’ and “khroma” which means color. Using this relationship as a color scheme often gives a simple look that draws more attention to the content of your page. It also makes it easier to highlight important information, as a completely different color will stand out.

Monochrome color scheme
This is an example of a monochrome color scheme using red based colors.

Complementary

A complementary relationship refers to two colors that are complete opposites from each other on the color wheel. This can be combinations such as red and green, yellow and purple, and blue and orange. This relationship is typically used because it makes elements stand out from one another. These colors are also extremely vibrant since they contrast from each other so much.

Complementary color scheme
This is an example of a complementary color scheme using yellow and purple colors.

Analogous

An analogous relationship is three colors on the color wheel that are directly next to each other. Similar to the monochrome relationship, this can create a sense of simplicity since the colors flow nicely together. This is also a useful relationship to use when trying to evoke a certain emotion. For example, if you were trying to convey something sad, you would want to use blue which could then be paired with blue-purple and purple.

Analogous color scheme
This is an example of an analogous color scheme which uses yellow and green colors.

Triadic

The triadic relationship is created by choosing three colors that are far enough apart on the color wheel that it would create a perfect triangle. An example of this would be yellow, blue, and red. This is also similar to the complementary relationship in that it creates a sharp contrast between colors and makes elements stand out more.

Triadic color scheme
This is an example of a triadic color scheme which uses red, yellow, and blue colors taken from a triangle in the color wheel.