Skip Navigation
Learn design

The ultimate color combination guide

Discover the best color combinations by learning your way around the color wheel

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

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.

An image showing primary and secondary colors on the color wheel.

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.

An image showing warm and cool colors on the color wheel.

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.

An image showing warm colors depicted in a sunset and cool colors depicted by the seaside.

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.

An image showing an analogous color combination on the color wheel.

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.

An image showing analogous color schemes in fire and in lemon-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.

An image showing complementary colors on the color wheel.

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.

An image showing complementary colors in a sunset and in a 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.

Tip: Using an isosceles triangle to identify a split-complementary combination? You’ll want to make sure there’s only one color in between the two base colors.
An image of split-complementary color scheme on the color wheel.

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.

An image showing a split-complementary color scheme in nature.

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.

An image showing a triadic color combination on the color wheel.

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.

An image showing the three primary colors Piet Mondrian used in his paintings in the 1930s.

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.

An image showing tetradic color combinations on the color wheel.

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.

An image of a parrot with a tetradic color scheme.

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.

An image showing a monochromatic color scheme on the color wheel.

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.

An example of a monochromatic color scheme found in Nature.

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!

You may also like

Try Sketch for free

Whether you’re new to Sketch, or back to see what’s new, we’ll have you set up and ready to do your best work in minutes.

Get started for free
Get started for free