Colour Theory 101: A Complete Guide to Colour Wheels & Colour Schemes

Ever wondered why videos, pictures, GIFs and other visual content tend to catch your eye first, when you're flicking down your News Feed?

It's no big secret that while text-based content is always important when seeking answers to a question, visuals such as infographics, charts, graphs, photographs and videos always deliver better when you are trying to catch your reader's attention.

Sounds pretty easy, right?

Well, it is but, before you start sharing images and videos willy nilly, there are a few useful rules that will help ensure you hit the right mark every time...

Welcome to Colour Theory

Colour theory is the basis for the primary rules and guidelines that surround colour and its use in creating aesthetically pleasing visuals. By understanding colour theory basics, you can begin to parse the logical structure of coloUr for yourself to create and use colour palettes more strategically. The result means evoking a particular emotion, vibe, or aesthetic.

Colour Theory 101

Let's go back to high school art class. Remember primary, secondary, and tertiary colours? If you don't, then read on as they're pretty important if you want to understand, well, everything about colour.

Primary Colours

Primary colours are those you can't create by combining two or more other colours together. They're a lot like prime numbers, which can't be created by multiplying two other numbers together.

There are three primary colours:

Red
Yellow
Blue

Think of primary colours as your parent colours, anchoring your design in a general colour scheme. Any one or combination of these colours can give your brand guardrails when you move to explore other shades, tones, and tints (we'll talk about those in just a minute).

When designing or even painting with primary colours, don't feel restricted to just the three primary colours listed above. Orange isn't a primary color, for example, but brands can certainly use orange as their dominant colour.

Knowing which primary colours create orange is your ticket to identifying colours that might go well with orange — given the right shade, tone, or tint. This brings us to our next type of colour ...

Secondary Colours

Secondary colours are the colors that are formed by combining any two of the three primary colours listed above. Check out the colour theory model above — see how each secondary colour is supported by two of the three primary colours?

There are three secondary colours: orange, purple, and green. You can create each one using two of the three primary colours. Here are the general rules of secondary colour creation:

Red + Yellow = Orange
Blue + Red = Purple
Yellow + Blue = Green

Tertiary Colours

Tertiary colours are created when you mix a primary colour with a secondary color.

From here, colour gets a little more complicated, and if you want to learn how the experts choose colour in their design, you've got to first understand all the other components of colour.

The most important component of tertiary colours is that not every primary colour can match with a secondary colour to create a tertiary colour. For example, red can't mix in harmony with green, and blue can't mix in harmony with orange -- both mixtures would result in a slightly brown colour (unless of course, that's what you're looking for).

Instead, tertiary colours are created when a primary colour mixes with a secondary colour that comes next to it on the colour wheel below. There are six tertiary colors that fit this requirement:

Red + Purple = Red-Purple (magenta)
Red + Orange = Red-Orange (vermillion)
Blue + Purple = Blue-Purple (violet)
Blue + Green = Blue-Green (teal)
Yellow + Orange = Yellow-Orange (amber)
Yellow + Green = Yellow-Green (chartreuse)

The Colour Theory Wheel

Okay, great. So now you know what the "main" colours are, but you and I both know that choosing colour combinations, especially on a computer, involves a much wider range than 12 basic colours.

This is the impetus behind the colour wheel, a circle graph that charts each primary, secondary, and tertiary colour — as well as their respective hues, tints, tones, and shades. Visualising colours in this way helps you choose colour schemes by showing you how each colour relates to the colour that comes next to it on a rainbow colour scale. (As you probably know, the colours of a rainbow, in order, are red, orange, yellow, green, blue, indigo, and violet.)

When choosing colours for a colour scheme, the colour wheel gives you opportunities to create brighter, lighter, softer, and darker colours by mixing white, black, and gray with the original colours. These mixes create the colour variants described below:

Hue

Hue is pretty much synonymous with what we actually mean when we said the word "colour." All of the primary and secondary colours, for instance, are "hues."

Hues are important to remember when combining two primary colours to create a secondary colour. If you don't use the hues of the two primary colours you're mixing together, you won't generate the hue of the secondary colour. This is because a hue has the fewest other colours inside it. By mixing two primary colours that carry other tints, tones, and shades inside them, you're technically adding more than two colours to the mixture — making your final colour dependent on the compatibility of more than two colours.

If you were to mix the hues of red and blue together, for instance, you'd get purple, right? But mix a tint of red with the hue of blue, and you'll get a slightly tinted purple in return.

Shade

You may recognise the term "shade" because it's used quite often to refer to light and dark versions of the same hue. But actually, a shade is technically the colour that you get when you add black to any given hue. The various "shades" just refer to how much black you're adding.

Tone (or Saturation)

You can also add both white and black to a colour to create a tone. Tone and saturation essentially mean the same thing, but most people will use saturation if they're talking about colours being created for digital images. Tone will be used more often for painting.

With the basics covered, let's dive into something a little more complicated — like additive and subtractive colour theory.

Additive & Subtractive Color Theory

If you've ever played around with colour on any computer program, you've probably seen a module that listed RGB or CMYK colours with some numbers next to the letters.

Ever wondered what those letters mean?

CMYK

CMYK stands for Cyan, Magenta, Yellow, Key (Black). Those also happen to be the colours listed on your ink cartridges for your printer. That's no coincidence.

CMYK is the subtractive colour model. It's called that because you have to subtract colours to get to white. That means the opposite is true — the more colours you add, the closer you get to black. Confusing, right?

Think about printing on a piece of paper. When you first put a sheet in the printer, you're typically printing on a white piece of paper. By adding colour, you're blocking the white wavelengths from getting through.

Then, let's say you were to put that printed piece of paper back into the printer, and print something on it again. You'll notice the areas that have been printed on twice will have colours closer to black.

I find it easier to think about CMYK in terms of its corresponding numbers. CMYK works on a scale of 0 to 100. If C=100, M=100, Y=100, and K=100, you end up with black. But, if all four colours equal 0, you end up with true white.

RGB

RGB colour models, on the other hand, are designed for electronic displays, including computers.

RGB stands for Red, Green, Blue, and is based on the additive colour model of light waves. This means, the more colour you add, the closer you get to white. For computers, RGB is created using scales from 0 to 255. So, black would be R=0, G=0, and B=0. White would be R=255, G=255, and B=255.

When you're creating colour on a computer, your colour module will usually list both RGB and CMYK numbers. In practice, you can use either one to find colours, and the other colour model will adjust accordingly.

However, many web programs will only give you the RGB values or a HEX code (the code assigned to colour for CSS and HTML). So, if you're designing digital images or for web design, RGB is probably your best bet for choosing colours.

You can always convert the design to CMYK and make adjustments should you ever need it for printed materials.

The Meaning of Colour

Along with varying visual impact, different colors also carry different emotional symbolism.

Red — typically associated with power, passion, or energy, and can help encourage action on your site
Orange — joy and enthusiasm, making it a good choice for positive messaging
Yellow — happiness and intellect, but be wary of overuse
Green — often connected to growth or ambition, green can help give the sense that your brand is on the rise
Blue — tranquility and confidence, depending on the shade — lighter shades provide a sense of peace, darker colours are more confident
Purple — luxury or creativity, especially when used deliberately and sparingly on your site
Black — power and mystery, and using this colour can help create necessary negative space
White — safety and innocence, making it a great choice to help streamline your site

Worth noting? Different audiences may perceive colours differently. The meanings listed above are common for North American audiences, but if your brand moves into other parts of the world, it’s a good idea to research how users will perceive particular colours. For example, while red typically symbolizes passion or power in the United States, it’s considered a colour of mourning in South Africa.

While it’s possible to create your website using a combination of every colour under the rainbow, chances are the final product won’t look great. Thankfully, colour experts and designers have identified seven common colour schemes to help jumpstart your creative process.

What are the seven colour schemes?

The seven major colour schemes are monochromatic, analogous, complementary, split complementary, triadic, square, and rectange (or tetradic).

Let’s examine each in more detail.

1. Monochromatic

Monochromatic colour schemes use a single colour with varying shades and tints to produce a consistent look and feel. Although it lacks colour contrast, it often ends up looking very clean and polished. It also allows you to easily change the darkness and lightness of your colours.

Monochromatic colour schemes are often used for charts and graphs when creating high contrast isn't necessary.

Check out all the monochromatic colours that fall under the red hue, a primary colour.

2. Analogous

Analogous colour schemes are formed by pairing one main colour with the two colours directly next to it on the colour wheel. You can also add two additional colours (which are found next to the two outside colours) if you want to use a five-colour scheme instead of just three colours.

Analogous structures do not create themes with high contrasting colours, so they're typically used to create a softer, less contrasting design. For example, you could use an analogous structure to create a colour scheme with autumn or spring colours.

This colour scheme is great for creating warmer (red, oranges, and yellows) or cooler (purples, blues, and greens) colour palettes like the one below.

Analogous schemes are often used to design images rather than infographics or bar charts as all of the elements blend together nicely.

3. Complementary

You may have guessed it, but a complementary colour scheme is based on the use of two colours directly across from each other on the colour wheel and relevant tints of those colours.

The complementary colour scheme provides the greatest amount of colour contrast. Because of this, you should be careful about how you use the complementary colours in a scheme.

It's best to use one colour predominantly and use the second colour as accents in your design. The complementary colour scheme is also great for charts and graphs. High contrast helps you highlight important points and takeaways.

4. Split Complementary

A split complementary scheme includes one dominant colour and the two colours directly adjacent to the dominant colour's complement. This creates a more nuanced colour palette than a complementary colour scheme while still retaining the benefits of contrasting colours.

The split complementary colour scheme can be difficult to balance because unlike analogous or monochromatic colour schemes, the colours used all provide contrast (similar to the complementary scheme).

The positive and negative aspect of the split complementary colour model is that you can use any two colours in the scheme and get great contrast ... but that also means it can also be tricky to find the right balance between the colours. As a result, you may end up playing around with this one a bit more to find the right combination of contrast.

5. Triadic

Triadic colour schemes offer high contrasting colour schemes while retaining the same tone. Triadic colour schemes are created by choosing three colours that are equally placed in lines around the colour wheel.

Triad colour schemes are useful for creating high contrast between each colour in a design, but they can also seem overpowering if all of your colours are chosen on the same point in a line around the colour wheel.

To subdue some of your colours in a triadic scheme, you can choose one dominant colour and use the others sparingly, or simply subdue the other two colours by choosing a softer tint.

The triadic colour scheme looks great in graphics like bar or pie charts because it offers the contrast you need to create comparisons.

6. Square

The square colour scheme uses four colours equidistant from each other on the colour wheel to create a square or diamond shape. While this evenly-spaced colour scheme provides substantial contrast to your design, it’s a good idea to select one dominant colour rather than trying to balance all four.

Square colour schemes are great for creating interest across your web designs. Not sure where to start? Pick your favorite colour and work from there to see if this scheme suits your brand or website. It’s also a good idea to try square schemes against both black and white backgrounds to find the best fit.

7. Rectangle

Also called the tetradic colour scheme, the rectangle approach is similar to its square counterpart but offers a more subtle approach to colour selection.

As you can see in the diagram above, while the blue and red shades are quite bold, the green and orange on the other side of the rectangle are more muted, in turn helping the bolder shades stand out.

No matter which colour scheme you choose, keep in mind what your graphic needs. If you need to create contrast, then choose a colour scheme that gives you that. On the other hand, if you just need to find the best "versions" of certain colours, then play around with the monochromatic colour scheme to find the perfect shades and tints.

Remember, if you build a colour scheme with five colours, that doesn't mean you have to use all five. Sometimes just choosing two colours from a colour scheme looks much better than cramming all five colours together in one graphic.

How to Choose a Colour Scheme

Prioritize the user experience, first.Leverage natural inspiration.
Set a mood for your color scheme.
Consider colour context.
Refer to your colour wheel.
Use the 60-30-10 rule.
Draft multiple designs.

1. Prioritise the user experience, first.

Before you add colour to your website, app, product, or packaging, get the basic design downpat in greyscale.

This lets you focus on what matters most: User experience. Instead of focusing on the colour scheme of your overall site or the hue of specific buttons or links, make sure everything works like it’s supposed to. Make sure links aren’t broken, product pages are up-to-date and email opt-ins are ready to go.

Here’s why: Even the best-looking website or product with perfect colour selection won’t be enough to keep visitors if they can’t find what they’re looking for.

2. Leverage natural inspiration.

Once your site operations are solid, it’s time to start selecting colours.

Not sure what looks good? Take a look outside. Nature is the best example of colours that complement each other — from the green stems and bright blooms of flowering plants to azure skies and white clouds, you can’t go wrong pulling context from natural colours and combinations.

3. Set a mood for your colour scheme.

With a few colour choices in mind, consider the mood you want your colour scheme to set. If passion and energy are your priorities, lean more toward red or brighter yellows. If you’re looking to create a feeling of peace or tranquility, trend toward lighter blues and greens.

It’s also worth thinking negatively. This is because negative space — in either black or white — can help keep your design from feeling too cluttered with colour.

4. Consider colour context.

It’s also worth considering how colours are perceived in contrast.

In the image below, the middle of each of the circles is the same size, shape, and colour. The only thing that changes is the background colour.

Yet, the middle circles appear softer or brighter depending on the contrasting colour behind it. You may even notice movement or depth changes just based on one colour change.

This is because the way in which we use two colours together changes how we perceive it. So, when you're choosing colours for your graphic designs, think about how much contrast you want throughout the design.

For instance, if you were creating a simple bar chart, would you want a dark background with dark bars? Probably not. You'd most likely want to create a contrast between your bars and the background itself since you want your viewers to focus on the bars, not the background.

5. Refer to your colour wheel.

Next, consider your colour wheel and the schemes mentioned above. Select a few different colour combinations using schemes such as monochrome, complementary, and triad to see what stands out.

Here, the goal isn’t to find exactly the right colours on the first try and create the perfect design, but rather to get a sense of which scheme naturally resonates with your personal perception and the look of your site.

You may also find that schemes you select that look good in theory don’t work with your site design. This is part of the process — trial and error will help you find the colour palette that both highlights your content and improves the user experience.

6. Use the 60-30-10 rule.

Often used in home design, the 60-30-10 rule is also useful for website or app design. The idea here is to use three colours: A main color for 60% of your design, a secondary colour for 30% of your design and an accent colour for the last 10%.

While these aren’t hard-and-fast numbers, they help give a sense of proportion and balance to your site by providing a primary colour with secondary and accent colours that all work together.

7. Draft multiple designs.

Draft and apply multiple color designs to your website and see which one(s) stand out. Then, take a step back, wait a few days and check again to see if your favorites have changed.

Here’s why: While many designers go in with a vision of what they want to see and what looks good, the finished product often differs on digital screens that physical color wheels — what seemed like a perfect complement or an ideal color pop may end up looking drab or dated.

Don’t be afraid to draft, review, draft again and throw out what doesn’t work — colour, like website creation, is a constantly-evolving art form.

Put simply? Practice makes perfect. The more you play with colour and practice design, the better you get. No one creates their masterpiece the first time around.

Colour Tools

There's been a lot of theory and practical information for actually understanding which colours go best together and why. But when it comes down to the actual task of choosing colours while you're designing, it's always a great idea to have tools to help you actually do the work quickly and easily.

Luckily, there are a number of tools to help you find and choose colours for your designs.

Adobe Colour

One of my favorite colour tools to use while I'm designing anything — whether it's an infographic or just a pie chart — is Adobe Colour (previously Adobe Kuler).

This free online tool allows you to quickly build colour schemes based on the colour structures that were explained earlier in this post. Once you've chosen the colours in the scheme you'd like, you can copy and paste the HEX or RGB codes into whatever program you're using.

It also features hundreds of premade colour schemes for you to explore and use in your own designs. If you're an Adobe user, you can easily save your themes to your account.

Illustrator Colour Guide

I spend a lot of time in Adobe Illustrator, and one of my most-used features is the colour guide. The color guide allows you to choose one colour, and it will automatically generate a five-colour scheme for you. It will also give you a range of tints and shades for each colour in the scheme.

If you switch your main colour, the color guide will switch the corresponding colours in that scheme. So if you've chosen a complementary colour scheme with the main color of blue, once you switch your main colour to red, the complementary colour will also switch from orange to green.

Like Adobe Colour, the color guide has a number of preset modes to choose the kind of colour scheme you want. This helps you pick the right colour scheme style within the program you're already using.

After you've created the colour scheme that you want, you can save that scheme in the "Colour Themes" module for you to use throughout your project or in the future.

Preset Colour Guides

If you're not an Adobe user, you've probably used Microsoft Office products at least once. All of the Office products have preset colours that you can use and play around with to create colour schemes. PowerPoint also has a number of colour scheme presets that you can use to draw inspiration for your designs.

Where the color schemes are located in PowerPoint will depend on which version you use, but once you find the colour "themes" of your document, you can open up the preferences and locate the RGB and HEX codes for the colours used.

You can then copy and paste those codes to be used in whatever program you're using to do your design work.

Finding the Right Colour Scheme

There's a lot of theory in this post, I know. But when it comes to choosing colours, understanding the theory behind colour can do wonders for how you actually use colour. This can make creating branded visuals easy, especially when using design templates where you can customise colours.