Color Harmony in Web Design

Using Color Wheels and Color Theory to Design Harmonious Pages

How to Use a Color Wheel
A Simple Color Wheel Helps You Choose Fabrics. Getty Images

Once you understand the basics of color theory, you can start learning how to combine those colors into a harmonious whole. There are certain colors that look good together, while other colors look so painful you have to click away before they burn your eyes. And while you might recognize these combinations when you see them, there is a theory based on the color wheel as to which colors will look nicest together.

Analogous Colors

These are the colors that sit next to each other on the color wheel. For example, green, yellow-green, and yellow; or red, red-orange, and orange. Play with the hues and saturation of analogous colors to create a harmonious color scheme.

Complementary Colors

Complementary colors are those colors that are opposite one another on the color wheel. By using colors that are opposite one another, you create color schemes that have high contrast and so are brighter and more vivid. Some contrasting colors are: red and green or blue and orange.

Color Triads

By placing an equilateral triangle on the color wheel, you can create color schemes that have a lot of life to them. The most basic color triad is the three primary colors, red, yellow, and blue. But others are ​green, purple and orange, or yellow-orange, blue-green, and red-purple.

Still Having Trouble?

When looking for color schemes the first place I start is nature.

The color schemes found in nature are typically harmonious to our eyes. This can be the case even if the colors don't "go together" according to color theory.

Here is a tutorial that takes you through how to create a web color scheme from just one color.

mla apa chicago
Your Citation
Kyrnin, Jennifer. "Color Harmony in Web Design." ThoughtCo, Aug. 3, 2017, Kyrnin, Jennifer. (2017, August 3). Color Harmony in Web Design. Retrieved from Kyrnin, Jennifer. "Color Harmony in Web Design." ThoughtCo. (accessed December 14, 2017).