Illustration by Bhavya Minocha
When working on any design, it can be a challenge to identify colors that unite different elements of your composition. Fortunately, solving your color problem is as simple as finding complementary colors on the color wheel—a tool that was invented in the 1660s when Sir Isaac Newton set out to map the visual color spectrum.
When looking at the color wheel, complementary colors sit opposite of one another. For example, if you were to look at purple, the color opposite of it would be yellow—which means they are complementary colors. When these two colors are used together in a design or work of art, it creates a harmonic and balanced visual experience. Other common examples of complementary colors are orange and blue, as well as green and red.
Understanding color theory
Color theory is one of the first concepts taught in school, and it is ultimately one of the most important things to understand as a professional designer. Essentially, color theory for designers is the underlying principle that is used to identify colors that work well together to amplify a design.
There are many different color combinations that can be found on the color wheel—and when used alongside color psychology, a designer can articulate a specific tone, emotion, or visual experience with ease. Color is a powerful design element, and when used purposefully, it can help designers elevate their work while connecting with the person interacting with it.
Traditional color theory
The color wheel identifies complementary colors that, when combined, create a harmonic and visually pleasing experience. The traditional RYB (red-yellow-blue) color wheel is an additive color model (you add different quantities of red, yellow, and blue together to create secondary and tertiary colors) that are used by artists. This color wheel includes:
- Primary colors. Red, yellow, and blue
- Secondary colors. Green, orange, and purple
- Tertiary colors. Amber (yellow-orange), vermillion (red-orange), magenta (red-purple), violet (blue-purple), teal (blue-green), and chartreuse (yellow-green)
Design tip: Include the color wheel as a visual guide during design project collaboration to help those who are less familiar with color theory concepts.
Modern color theory
Depending on the project you are working on, your approach to color usage may be different—specifically if you are designing for digital or printing. Digital designers will use the RGB (red, green, blue) color wheel to represent the mixture of light waves on electronic systems, such as computer screens and TVs. The RGB color wheel is an additive color model that includes:
- Primary colors. Red, green, and blue
- Secondary colors. Cyan, magenta, and yellow
- Tertiary colors. Orange, chartreuse green, spring green, azure, violet, and rose
When printing, the CMYK (cyan, magenta, yellow, and key) color wheel is used. The term “key” in this color wheel represents black, as combining cyan, magenta, and yellow to create black is inefficient. The CMYK color wheel is a subtractive color model, which means it uses pigment to block (i.e., subtract) light rather than adding it.
Principles of color theory
While most people learn the basics of color theory early on, you may not truly understand its guiding principles until taking more advanced art and design classes. At its core, color theory tells us that if you mix any two primary colors together (like red and blue) you will create a secondary color (purple).
Once this secondary color is created, you can adjust its value by adding black to make it a darker purple, or white to make it a lighter purple. As you continue to mix different colors together to create new hues, tints, and shades, you will ultimately be left with an expanded color wheel.
Design tip: Incorporate your color theory combinations into your design system tool for other designers to use when working on your project.
Complementary colors
Although complementary colors sit opposite of one another on the color wheel, they pair best together to create a harmonic color experience. Some basic complementary color pairings include:
- Red and green
- Yellow and purple
- Orange and blue
- Green and magenta
When complementary color pairings have too much contrast or “pop” in your design, you can use split complementary colors. For example, instead of using just blue and orange, you can use blue, red-orange, and yellow-orange.
It is a good practice in complementary color design to try both the complementary color scheme and the split complementary color scheme to see which one has the best visual effect for your design. If you’re a UX designer, don’t be afraid to test out your color schemes with users to see how they experience the colors in your design.
Other color combinations
Color theory includes many different color combinations, and each one helps to solve a specific color problem. In addition to complementary color combinations, there are also analogous color schemes and triadic color schemes.
Analogous color schemes
Analogous color schemes are comprised of three colors that sit side-by-side to one another on the color wheel. Analogous colors are often found naturally throughout the environment, which is why they work so wonderfully together in color pallets to set a mood or tone.
Triadic color schemes
Triadic color schemes are sets of three colors that sit evenly spaced from one another on the color wheel. An example of a triadic color scheme would be the primary color combination, which includes red, yellow, and blue. Triadic colors usually appear quite vibrant together, which is great for working on designs that need to visually stand out and pop.
Design tip: Keep a list of preferred color combinations as design inspiration for new or related design projects down the road.
A colorful experience
Color is a fascinating element of design. While it may seem simple on the surface, color can be quite complex with its many variations and combinations. Thankfully, due to color theory and the invention of the color wheel, designers can quickly identify color patterns and combinations that articulate a specific tone, feeling, or visual experience.