Color Theory

Color Theory

Maggie Toth

What makes you stop and linger on a webpage? Or what catches your attention when you’re scrolling your social media feeds?

When browsing websites and socials, it’s the visuals that catch the eye. You want people to get your brand message, so it’s crucial to complement words with well-designed visuals.

Color can be your most powerful design tool—if you learn to use it effectively. It can influence decisions, increase brand recognition, and keep people on a webpage.


What is color theory?

Color theory covers several definitions, concepts, and design applications. There’s enough information to fill numerous books on the subject. However, there are basic categories of color theory that are useful when building your brand: the color wheel, color harmony, and the framework of how colors are used.

The color wheel is a tool to help understand which colors go with what. It’s our tool for understanding how colors relate to one and other. Even though we might think of colors as independent—blue, red, green—a color is always seen in the context of other colors.

The wheel has 12 basic hues:

  • Primary colors – blue, yellow, and red are the only colors not made from other colors. They are positioned around the wheel in thirds. All other colors come from these three hues.
  • Secondary colors – green, orange, and purple are located halfway between the primary colors. They are made from equal amounts of the nearest primary.
  • Tertiary colors – yellow-orange, red-orange, red-purple, blue-purple, blue-green, and yellow-green are formed by mixing equal parts of adjacent primary and secondary colors.

Color harmonies

You can create balance and harmony with the visual contrast that exists between color combinations. Effective color combination starts with understanding color relationships. Each relationship can yield many color palettes.



These are the dark, medium, and light values of a single color. These schemes use the same hue on the color wheel—they’re different variations of a shade. A monochromatic palette has no color depth. But it provides the contrast of dark, medium, and light that’s essential to great design.



These are any three colors beside each other on the wheel. For instance, yellow, yellow-green, and yellow-orange. They share strong undertones that create pleasant, low-contrast harmony. Analogous palettes are rich and easy to work with. It is composed of one dominant color, a supporting color, and a third (a mix of the first two colors, or an accent).



Direct opposites on the color wheel are complementary—like red and green. Complementary colors bring contrast. A color and its complement can express energy and excitement. Generally, the complementary color is used in a smaller amount for accent—for instance, a photograph of a distant red barn in a green field.


Compound (split-complementary)

Create this color scheme through a color and the two colors beside its complementary color. It’s similar to a complementary color scheme. But the adjacent colors create a more exciting palette with less contrast. For example, red’s split-complementary colors would be blue-green and yellow-green. This combination’s strength is in the low-contrast beauty of similar colors and the added punctuation of the opposite color. In this case, red would be a great accent since it’s the most different.



Colors evenly spaced around the wheel (120 degrees from each other like a triangle) make up a triadic color scheme. These color harmonies tend to be vibrant, even when using pale or unsaturated hues. The colors should be carefully balanced to use this harmony effectively. For instance, let one color dominate and use the other two for accent.


Colors, and how we use them, play a central role in graphic design and branding. Colors impact our view of brands and their visuals—from websites and logos to social media. Consider how you can use color theory to develop your brand identity.