Whether you’re working on an app, illustration, or your band’s latest album cover, knowing what colors look good together can have a huge impact on your design. But with so many colors out there, where do we start? That’s where the color wheel will come in handy.
In this article, we’ll explain what the color wheel is, how it helps us understand the relationship between different colors, and what the best color combinations are.
Ready? Let’s jump in.
Table of contents
- The color wheel
- Warm and cool colors
- Analogous colors
- Complementary colors
- Split-complementary colors
- Triadic colors
- Tetradic colors
- Monochromatic colors
Wait, what is a color wheel?
We covered what a color wheel is in a previous post. But a recap will help set the stage for understanding color combinations.
Simply put, the color wheel is a framework for studying colors and the relationships between them. As its name implies, it’s shaped like a wheel and consists of 12 colors. But we can understand them better by breaking them down into three groups: primary, secondary and tertiary.
Primary colors are red, blue, and yellow. We call them primary because, unlike secondary or tertiary colors, we can’t mix two colors together to produce them.
Secondary colors come from mixing two primary colors: red and blue form purple, blue and yellow form green, while yellow and red form orange. Tertiary colors come from mixing one primary and one secondary color, giving us six colors in total: red-orange, red-purple, yellow-orange, yellow-green, blue-green and blue-purple.
Tertiary colors come from mixing one primary color with one secondary colors.
Color combinations based on the color wheel
Just looking at the color wheel, you might already be able to tell which colors look good together — and why others are better kept apart 🥴 That’s likely because colors have the power to impact our emotions. Think of how Valentine’s Day products often come in pink and red, or how road hazard signs are typically bright yellow or orange.
But while our emotions can be a helpful guide, they’re not the only way to determine what the best color combinations are. In fact, where a color lives on the color wheel says a lot. Let’s take a closer look.
What are warm and cool colors?
One way to categorize colors is by temperature — namely warm and cool colors. By splitting the color wheel into two halves, you can separate all the warm colors — like red, orange, and yellow — from the cool colors — like purple, blue, and green.
We can split the color wheel in half to separate warm colors from cool colors.
Warm colors tend to convey feelings of excitement and alertness. Think about how many vitamin C products — which are meant to boost your energy — come in orange tablets. Or about how we associate yellow with sunshine, and therefore, positivity.
Naturally, cool colors give the opposite effect. Lower in temperature, colors like blue, green, and purple usually give off a sense of calmness, sadness, or reflection.
Warm colors tend to convey feelings of excitement and alertness, while cool colors give off a sense of calmness, sadness or reflection.
What are analogous colors?
You might notice the difference between warm and cool colors a little more when working with analogous color combinations. Analogous colors are any three colors next to each other on the color wheel. They work well together because there isn’t much contrast between them, allowing them to strengthen each other’s effects.
Analogous color combinations involve three colors next to each other on the color wheel.
Let’s look at yellow, for example. When you combine yellow with orange and red, you might start thinking of fire or other high-temperature situations.
But by focusing on yellow’s other color wheel neighbors, like yellow-green and green, you might find yourself cooling down from that fire over a refreshing glass of lime juice.
Colors in an analogous combination don’t contrast each other as much. Instead, they play off of the feelings each color communicates.
What are complementary colors?
Unlike analogous colors, complementary colors are far from similar to each other. In fact, this combination refers to two colors that directly oppose each other on the color wheel. Some examples include orange and blue, red and green, or purple and yellow.
Complementary colors refer to two colors directly opposite each other on the color wheel.
Being on opposite sides of the color wheel, they typically consist of one warm and one cool color, which means they directly contrast each other.
With these combinations, you can go high contrast and communicate feelings of boldness and positivity — think orange sunset shining over blue ocean waters. Or you could focus on one color and make the other an accent — think red ornaments shining on a green Christmas tree.
While these colors aren’t the exact same shade of blue, orange, green, or red as in the color wheel, they still show us how complementary colors can either directly contrast or support each other.
What are split-complementary colors?
Like the idea of making one color the center of attention while adding a few accents? Split-complementary combinations are where it’s at!
You can identify a split-complementary combo using an isosceles triangle, where each corner is pointed at a different color. That means a total of three colors. Some examples include red, yellow-green and blue-green, or yellow, red-purple and blue-purple.
Using an isosceles triangle, we can identify a split-complementary color scheme among red-orange, green and blue.
Not sure how to pull off a split-complementary color? You might just need to take a step back from your design, go for a little walk, and let nature inspire you — especially if you’re lucky enough to live near rocky orange mountains surrounded by greenery and blue skies.
Though the colors in the image below aren’t an exact match of what we see in our color wheel, it still uses shades of red-orange, blue and green — with red-orange as the centerpiece.
Split-complementary color combinations are great for focusing on one color and using two others as accents.
What are triadic colors?
In the spirit of using triangles, we’re going to need another one to identify our next color combination: triadic. Only this time we’ll need an equilateral triangle because we’re looking for three colors evenly spread out around the wheel — like red, blue and yellow!
Because of the equal amount of distance between each color, triadic color combinations give off a high-contrast effect. But it also means that no two colors are too close to each other, so you won’t have to worry about an over-emphasis on warm or cool colors. In other words, triadic color schemes are great for conveying feelings of balance and harmony.
A triadic color combination consists of three colors evenly spread out around the color wheel.
Red, blue, yellow, balance — if these colors and words sound familiar to you, there’s a good chance you’re thinking of the Dutch painter Piet Mondrian, who famously used only primary colors to convey feelings of asymmetry.
Dutch painter Piet Mondrian famously used only primary colors to convey feelings of asymmetry.
What are tetradic colors?
If you thought three colors were a lot to combine, get ready to push those boundaries. Tetradic colors combine two pairs of complementary colors — so, four colors in total. On the color wheel, you can spot a tetradic scheme using either a rectangle or a square, with each corner pointed at a different color.
On the color wheel, you can spot a tetradic scheme using either a rectangle or a square
Tetradic schemes will have you using a third of the color wheel. So it’s likely the perfect option if you’re going for a vibrant, colorful look — whether you’re designing eye-catching logos or putting an ice-cream sundae together.
Though the red is subtle, this parrot is a walking (and possibly talking!) tetradic color combination.
But if you’re worried it might be a little too busy, you’ll want to see our next suggestion 👀
What are monochromatic colors?
Looking for the opposite of a tetradic color scheme? You might be interested in a monochromatic color combination. Instead of combining different colors around the color wheel, a monochromatic scheme uses various shades of one color. You might have even guessed that from its name — with ‘mono’ meaning single and ‘chromatic’ referring to color.
Instead of combining different colors around the color wheel, a monochromatic scheme uses various shades of one color.
By playing with various hues and brightness levels, monochromatic color combinations allow you to explore a single color in depth. It’s perfect if you’re looking to add some color variety without going overboard.
We can identify different shades of blue in this photograph — in the sky, water, and even in the mountains.
And there you have it! Not only do you now know your way around the color wheel, but you’re also ready to mix and match colors like a pro. To put what you’ve learned to the test, try identifying color combinations in some of your favorite designs. You can also try building your own color palette and applying it to your own design using our Mac app. If you do, don’t forget to share it with us on Instagram or Twitter using the hashtag #MadeWithSketch!
