How to use color theory in design

You’ve seen a color wheel, but you’re not quite sure what it all means? Learn what color theory is and how to use it in your designs.

Color matters, and you always need to consider color when you design. But do you understand how color theory works to help you create harmonious color palettes?

You might want to use your favorite colors in your new logo or social post, but you can optimize your design color palette by using color families that complement each other.

This article takes you through basic to advanced color terminology, the logical structure of the relationship between colors, and how you can improve your designs through the application of color theory.

Let's begin with a little bit of the history of color theory.

Who invented color theory?

There isn’t one single person who invented what we know as color theory today.

There have been many color theorists over the centuries that have shaped how we understand color. However, Isaac Newton is credited with discovering the ROYGBIV model (or the visible color spectrum) and inventing the color wheel in the mid-17th century. These two discoveries have determined how color theory has developed.

Newton was the first to find out that when white light passes through a prism, it's refracted into the seven colors of the rainbow. Through his color research and application, he formulated that there are three primary colors that, when combined, form white light. We now call this the additive color model.

This discovery was revolutionary because it completely changed how people saw the world and how they understood colors. Before then, most people perceived color as a physical object (e.g., a fruit), elemental (e.g., fire), or a texture or sensation. Even the ancient Greek philosopher Aristotle had a theory that color was divine light from heaven.

Other major color theorists include artist J. C. Le Blon, polymath Johann Wolfgang von Goethe, and psychiatrist Carl Jung. In the early 1700s, Le Blon developed the three-color printing method (using the three primary colors red, blue, and yellow), which also led to the formulation of subtractive colors (when the three primaries are mixed to form black).

This is opposite to Newton’s additive colors (which together produce white) and helped distinguish between the behavior of color perception in light and pigment.

Le Blon laid the groundwork that eventually led to the development of the CMYK printing system in 1906, which we still use today.

Goethe’s Theory of Colors (first published in 1810) challenged Newton’s widely accepted theory because it was developed with “artificial” optical experiments and lacked engagement with real-life experiences of color.

Goethe focused much more on visual perception and emotional responses to color, as well as color symbolism and the notion of color harmony.

He also pointed out that Newton’s prism experiment was a single phenomenon of the behavior of light and shouldn’t be accepted as the definitive, universal theory of color.

Jung studied how color affects and expresses our emotions, which later led Jungian psychiatrists to develop color therapy methods. His findings on people’s connotative color associations form the basis of color psychology, which is widely used in art, graphic design, and marketing today.

Color psychology also informs visual design and User Experience design (UX/UI) to produce specific behaviors in consumers and app users.

What is color theory?

The color theory explains human color perception and the effects color have on the eyes and brain.

Scientifically speaking, colored light travels at different wavelengths and stimulates different receptors in our eyes. When the information reaches our brains, we perceive this as differences in hue. The principles of color theory help to explain how our brains interpret colors.

We experience various color phenomena based on perceptual factors, cultural differences, and specific individual differences.

For example, some colors in combination seem more contrasting than others. When we look at blue, it looks cold, whereas red looks warm. Sometimes when you stare at a green object for a long time and then look away, you see a red color afterimage (more on that later). These are all experiences that shape our understanding of colors.

Let’s look at the basic principles of color theory (how colors are made with pigment) and then move on to more advanced color theory (the relationships between colors). We also explain color theory terms, so you know how to speak about colors.

The color wheel will help you to understand these color theory concepts.

Primary colors

The three primary colors on a color wheel are red, yellow, and blue. These are the base colors that can be mixed to produce all the other colors we can see, and they’re equally spaced from each other on opposite sides of the color wheel.

Secondary colors

When you mix two primary colors together, you get secondary colors. These colors are placed in-between each primary color to indicate this mixture. For instance, red plus blue makes purple.

Tertiary colors

When you mix a primary and a secondary color together, you get a tertiary color. These are placed in-between the primary and secondary colors they were mixed from. For example, purple plus red makes red-purple (or red-violet).

Warm colors

We tend to think of colors on the red, orange, and yellow side of the spectrum as "warm" and blue, green, and purple as "cool" colors.

This isn’t entirely incorrect, since we’ve all experienced a warm orange fire or a cold blue pool. It’s also generally accepted that warm colors advance (look closer to the viewer) and cool colors recede (look further away).

But did you know that all hues have color temperatures?

There is a warm and cool version of each primary color, which also produces warm and cool color palettes when you use them to mix secondary and tertiary colors.

Here are the names of some warm color pigments:

• Warm reds lean more toward yellow: Cadmium Red, Crimson Lake, Venetian Red, Scarlet Lake, and Vermillion
• Warm yellows lean more toward red: Cadmium Yellow, Medium Yellow, Indian Yellow, Arylide Yellow
• Warm blues lean more toward red: Ultramarine Blue, Cobalt Blue, Indanthrone Blue.

Cool colors

So, we know that all colors have warm versions, which means that they also have cool versions. When you mix warm and cooler colors together, you can produce a wide range of colors.

Here are the names of some cool paint colors:

• Cool reds lean more toward blue: Alizarin Crimson, Pyrrol Crimson, Anthraquinoid Red, and Permanent Rose
• Cool yellows lean more toward blue: Lemon Yellow, Titanium Yellow, and Monoazo Yellow
• Cool blues lean more toward yellow: Phthalo Blue, Cerulean Blue, Prussian Blue, Manganese Blue, Egyptian Blue

How to use a color wheel

A color wheel shows the basic colors that we can see as spokes, each one adjacent to a color mixture or a primary color.

In the previous section, we looked at how you can make a primary color combination to create secondary colors, and how tertiary colors are made by combining primary and secondary colors.

The basic color wheel illustrates these relationships between colors and forms the basis for color combination principles.

Now we’re going to look at other relationships between colors that help us choose color combinations, namely complementary schemes and color harmonies.

Complementary color combinations

Certain basic color combinations bring out the best in each other.

While most people know the complementary color pairs, you can find them on the color wheel. Each primary color on the color wheel has a secondary color directly opposite that is made by combining the other two primaries.

These are the traditional, complementary color schemes:

• Red (primary) and green (secondary made with blue plus yellow)
• Blue (primary) and orange (secondary made with yellow plus red)
• Yellow (primary) and purple (secondary made with red plus blue)

Why are they called complementary; is it just because they look good together? No, it's a scientific and biological phenomenon called "simultaneous contrast."

Simultaneous contrast explains the visual intensification that happens when these color pairs are placed next to each other. It’s also something Goethe mentioned; when you see a color, your eye automatically looks for its complementary.

Some sources say that every color opposite another on the color wheel is complementary. Still, a complementary pair traditionally comprises of one primary color and one secondary color.

When you mix a complementary pair, you create a neutral color such as gray or brown. This is because as much as they intensify each other, complementary colors cancel each other out when combined.

This also means that you can create dark colors by adding more of the complementary to the mix.

Color harmonies

What is color harmony, and how does it work? Color harmony is an essential part of color theory and illustrates a number of ways to use a color wheel to find visually pleasing or harmonious color combinations.

You can think of color harmony as your color combination guidelines.

Color harmony is frequently used in all kinds of design – from gardening and cooking to interior decorating and graphic design. You can also find color harmonies in nature.

People assess visual appeal within 50 milliseconds of seeing something, influencing their decisions. This means that color harmonies can even help product designers and marketers influence buyers’ decisions.

Here's your color guide to creating the most visually appealing combinations:

Triad color harmony

Also known as triadic colors, triad color harmony is when you use three colors at equal distances from each other on the color wheel. This includes combinations like red + blue + yellow and purple + green + orange.

Split-complementary color harmony

Split-complementary color harmony combines one color with two colors on the opposite side of the color wheel. These would be the two colors on either side of what would be considered the base color’s direct complementary.

Split-complementary harmony doesn’t only apply to primary colors and their traditional complementaries – you can trace any color’s split complementaries.

This model shows color harmonies such as red-purple + green + yellow, or orange + blue-purple + blue-green.

Tetrad color harmony

Tetrad color harmony is a rectangular model for choosing colors. Using a rectangle inside the color wheel, you can find four colors that will work well together.

This suggests ideal combinations of colors like purple + blue + yellow + orange, or red-purple + orange-red + yellow-green + blue-green.

Analogous color harmony

Analogous color harmony is achieved when you use three colors that are next to each other on the color wheel and share a common primary color.

Get this template

Get this template

An example of this is using blue-green + blue + blue-purple together. These are adjacent colors on the color wheel, and the dominant color in this analogous theme is blue.

Analogous color schemes always produce a sense of depth and richness.

Tints, shades, and tones

We covered color properties and color values in depth in our post on creating a unique color palette. You can also learn more from our Design Tips article on color terminology. Here’s a quick recap:

• Tints are made by adding white to a hue
• Shades are made by adding black to a hue
• Tones are made by adding gray to a hue

Monochromatic color harmony

A big color trend that has made a comeback is the monochromatic color scheme.

Monochromatic color harmony is when you only use one hue in your color palette and create light and dark variations using tints, shades, and tones.

This color harmony creates a sense of unity and calm but can quickly become dull if not applied correctly.

We've covered harmonious color palettes and elements of color theory; let's differentiate subtractive and additive color mixing to understand how colors work together in digital images compared to printed ones.

What's the difference between RYB, CMYK, and RGB?

We've mainly discussed pigment-based colors in this article, but light-emitting (or digital) colors work differently.

RYB (Red, Yellow, Blue), or the subtractive color model, is how we’ve been speaking about color so far and how the color wheel was formulated.

Remember we mentioned J. C. Le Blon and his contribution to color theory through his tricolor print-making techniques? The CMYK subtractive color process was later developed for print based on his work, and it’s essential to understand the differences between printing and digital colors if you’re doing digital design.

CMYK stands for Cyan, Magenta, Yellow, and Key (which is black). It’s similar to RYB or BRY to follow the same pattern.

Digital color management in image sources works a little differently.

The additive color mixing model shows how to create white light (remember Newton’s findings?), and the primary colors of light are Red, Green, and Blue (RGB). All light-emitting sources work within the RGB model for digital color management, illustrated in the RGB color wheel.

Green and Purple are sometimes used together as complementary colors, which more closely resembles the RGB color combination principles where green (a primary color of light) and magenta (a secondary color made by combining blue light + red light) are complementary.

5 Examples of color theory applied to design

You should now understand color theory and how to use a color wheel to create harmonious color combinations in your designs.

We want to give you some inspo as well, so we found a few examples of successful designs that use color theory to create harmony.

1. Bring in ‘da Noise, Bring in ‘da Funk

Paula Scher is a designer famous for breaking the rules and creating some of the most iconic designs of our time. But, if you look closely, you’ll see that she uses color harmony to keep her designs tight.

Here’s one of the posters she designed for the 1995 tap dance musical, Bring in ‘Da Noise Bring in ‘Da Funk, which tells the story of African American history through song and dance.

This design uses an analogous color scheme combining colors that have blue as their primary base.

To create more contrast and draw the viewer’s attention to important information (namely, the date), she also sparingly used orange accent colors – orange being the complementary color to blue. This color combination is also sometimes called analogous complementary.

2. McDonald’s

You may or may not like the fast food chain, but it’s undeniable that theirs is one of the most eye-catching logos. But, just like the combo of green and purple, it seems to break the color harmony rules by using yellow and red together.

Yellow and red are two primaries and form one-third of triadic color harmony. In other words, using blue together with these colors would have created more balance.

Taking a closer look, however, shows that the yellow of the big M is, in fact, more of a gold or orange-yellow. The red being used is also a warm color with a yellow undertone.

It makes sense that the famous two-color logo uses a simplified analogous color scheme, producing color harmony.

It’s also interesting to note that in the RGB color model, red + green makes yellow, so yellow sits right next to the red. It would be considered analogous if we applied color harmony to RGB.

3. Kiss My Airs

Nike is one of the biggest sports brands in the world. With the launch of their 2021 Nike Air shoes, they used minimalistic design and clever wording to promote this new version of a classic.

These ads have monochromatic color schemes, where a bright base color is used, and contrast is created using tints and tones of the same color.

Monochromatic designs are always harmonious because they use the same hue throughout.

4. David Carson design

David Carson is sometimes referred to as the father of grunge because he introduced a completely fresh design style that broke all the rules of good graphic design at the time.

He’s a master of collage and bringing disparate elements together to make images that convey powerful messages. So, did he completely do away with color theory, too?

The image above contains both cool and warm red as the predominant color, with added accents of bright yellow-green, dark blue-green, cool blue, deep warm yellow, orange, and some neutral browns.

A square tetrad color scheme would produce harmony combining red, blue, yellow, and green. Carson has cleverly used these colors' warm and cool versions to make a very dynamic image.

It’s also important to note that by adding more colors (such as purples and browns), Carson successfully creates a sense of chaos in this work.

5. Bored Ape Yacht Club

Bored Ape Yacht Club is a well-known NFT art collection, with some designs selling at six figures.

This BAYC design has a dominant orange background color and uses a rectangular tetrad color scheme by combining orange, yellow, purple, and blue. The other dominant color is the pink of the ape’s fur, which is a tint of red.

Red, yellow, and orange are analogous colors, so they work well together.

How do we explain the spring green tuft on the party hat? The red- and the yellow-based analogous scheme would be complementary to green.

So, this digital image uses multiple complementary color schemes to produce color harmony.

If you’re looking for some more design inspiration, check out our list of famous graphic designers to follow on Instagram.

Wrap up

You know why color matters and how to use a basic color wheel, and you understand color theory terms and the general behavior of color perception. You also know that associations of colors can improve user experience design and make products more desirable.

In the end, color theory and the color wheel are simply tools to help us understand how colors affect each other and how they can profoundly affect us.

But, there aren’t any rights or wrongs when it comes to making color choices. Just look at the colors in nature, and you’ll see a broader range of color combinations than the color harmony models recommend.

Your basis for color combination boils down to personal preference, artistic intuition, and current color trends. However, it’s still good to have an understanding based on how others have studied colors, either to help you hone your color-picking skills or to help you find fresh ways to approach color combinations.

It’s also essential to grasp how different colors are created using parent colors and how you can mix hues to produce the desired effects – for instance, knowing how to create neutral colors by mixing complementary colors.

You can also check out our step-by-step guide on creating a custom color palette in Linearity Curve and our video about color theory.

So, now that you grasp the elements of color theory take your cue from the fantastic designs we’ve discussed and play with color combinations in your designs to see what you can come up with!