A Complete Guide to Colour Theory in Design

At first glance, colour might seem like a pretty simple concept. But actually, there’s a whole discipline dedicated to the study and application of colour—and it’s rooted not only in art but also in science and psychology. 

If you want to use colour effectively in your designs, you need to get to grips with colour theory. And that’s exactly what we’ll help you with right here through this guide! 

Contents:

• What is colour theory?
• The role of colour theory in design
• What is the colour wheel?
• Primary, secondary, and tertiary colours
• Hue, shade, tint, and tone
• The 6 types of colour schemes
• Explore Colour Palettes: Make Your Own!
• What is colour psychology?
• Working with colour: Tips and best practices for designers
• Additional design tips and resources

By the end of this guide, you’ll know exactly what colour theory is—and, most importantly, how to apply it to make effective colour choices. So let’s begin!

What is Colour Theory?

Colour theory is the study and application of colour. It’s both an art and a science that explores how colours interact and combine to achieve different visual effects. 

Colour theory isn’t purely objective, though. It also considers the psychological impact of colour—in other words, how different colours and colour combinations make people feel and the kind of message they communicate.

In practical terms, colour theory provides designers with a framework for choosing, combining, and applying colours. This not only helps to achieve visual harmony and balance but also to convey the intended message to the target audience. 

The main components of colour theory are:

• The colour wheel
• Colour properties (hue, shade, tint, and tone)
• Colour harmony, as determined by different colour combinations (i.e. colour palettes or schemes)
• Colour psychology

We’ll explore each of these components in detail throughout this guide. But first, let’s consider why colour theory is such a powerful design tool. 

The Role of Colour and Colour Theory in Design

Applying colour theory isn’t just about choosing colours that look good. No matter what you’re designing, colour plays a crucial role in how you connect with the target audience. 

It has practical implications, too—especially for the design of digital products. When creating websites and apps, the colours you choose will impact the clarity, usability, and accessibility of the product. 

Colour theory helps us to understand how colour works and why different colours achieve certain effects. As such, it isn’t just a theoretical framework; it also provides us with practical principles and guidelines we can follow when choosing and applying colour.

Let’s explore the importance of colour for designers—and, by extension, the importance of colour theory.

Colour shapes your brand

You can’t build a strong, memorable brand identity without the right colours. A carefully-considered colour palette helps to convey the brand values—think green for eco-friendly or black for luxury, for example. And, when you apply these colours consistently, you help to establish familiarity and recognition among your target audience. Colour theory guides designers in choosing appropriate brand colours and applying them effectively. 

Colour elicits emotion

Colour can have a significant impact on a person’s mood, evoking certain emotions and associations. When you enter a spa, for example, you’re usually surrounded by calming colours such as light blue, white, and soft neutral tones. Compare this to the kind of vibrant primary colours you’d expect to find in a play school. 

When choosing colours, it’s important to think about the mood you want to create. Take a look at AND learner Soumitro Dey’s Concept Album Project for reference, where he colour theory to redesign music albums for different genres. This incorporates colour psychology, a key tenet of colour theory, which we’ll explore later on. 

Colour impacts accessibility

Colour can make or break the accessibility of your designs. When applied effectively, colour creates contrast, ensuring that text is legible and that individual design elements stand out. 

Designers must also consider different types of colour vision deficiency (CVD) that may impact how a person perceives colour, or their ability to distinguish between certain colours. 

This is especially important in the context of web and digital design, where insufficient colour contrast or ill-considered colour choices may prevent the user from accessing or fully enjoying everything your product has to offer. Colour theory shows us, with tools like the colour wheel, which colours are best for creating strong contrast.

Colour affects usability and user experience

In the context of web and digital design, colour helps to provide a positive user experience (otherwise known as UX). When creating apps, websites, and software, designers can use colour to create a visual hierarchy and guide the user’s attention—helping them to navigate the product and find what they’re looking for.

Learn more about UX in this guide: What is user experience (UX) design? Everything you need to know.

Colour creates visual appeal

Last but not least, colour is crucial for creating visually compelling, aesthetically pleasing designs. Colour creates harmony and balance, ensuring that the overall composition flows together nicely and is a joy to behold. Of course, colour can also be used to create visual imbalance and intrigue if that’s the designer’s goal. Either way, colour is essential for building visual appeal and leaving the viewer with a lasting impression. 

Colour holds a lot of power! Now let’s jump into colour theory—starting with the colour wheel. 

What is the Colour Wheel?

The colour wheel is the very foundation of colour theory. It’s essentially a circle-shaped diagram that presents twelve colours—three primary colours, three secondary colours, and six tertiary colours—and their different hues, shades, tints, and tones. If you’re not familiar with those terms, don’t worry! We’ll explain them shortly.

The colour wheel is useful because it visually depicts the relationship between different colours. By looking at the colour wheel, designers can see what colour pairings work harmoniously together, which colour combinations are complementary, and which are best for creating contrast. 

The importance of the colour wheel will become clearer as we define some key colour theory terminology and explore the different types of colour palettes. So, without further ado, let’s break it down. 

Primary, Secondary, and Tertiary Colours 

The colour wheel comprises a total of twelve base colours. These are:

• Yellow, red, and blue—the three primary colours. Primary colours are used as the basis for creating all other colours. On the colour wheel, the three primary colours are placed at equidistant intervals. So, if you imagine the colour wheel divided into twelve equal segments, you might have the first, fifth, and ninth segments occupied by yellow, red, and blue respectively (starting at the top and moving clockwise).

• Orange, purple, and green—the three secondary colours. Secondary colours are produced by mixing two primary colours. For example, mixing equal parts red and yellow paint will give you orange. On the colour wheel, the three secondary colours are positioned at regular intervals between the primary colours they result from. So, if yellow, red, and blue are in segments one, five, and nine, you’d have orange, purple, and green in segments three, seven, and eleven.

• Amber, vermillion, magenta, violet, teal, and chartreuse—the six tertiary colours. Tertiary colours are created by mixing a primary colour with a secondary colour. For example, if you mix red and purple, you’ll get magenta. On the colour wheel, the tertiary colours are located between the primary and secondary colours that make them. In our colour wheel example, amber, vermillion, magenta, violet, teal, and chartreuse would be in segments two, four, six, eight, ten, and twelve respectively. 

Source: Color Meanings

Hue, Shade, Tint, and Tone 

Designers needn’t limit themselves to just twelve colours. They can modify these colours—or, more accurately, these hues—to create even more variations and possibilities. 

The twelve basic colours we’ve just described (the three primary, three secondary, and six tertiary colours) are actually hues. A hue is the purest form of a particular colour. In other words, it’s the original, base colour without any shade, tint, or tone.

The term “shade” refers to the addition of black to create a darker version of a particular hue. Say you’re working with paints and you want to create a darker yellow colour, you’d add black paint to the yellow paint you want to darken. 

The term “tint” refers to the addition of white in order to create a lighter version of the original hue. You might mix red and white paint to create a lighter red.

The term “tone” refers to the addition of both black and white (i.e. grey) to alter the saturation or brightness of the original colour or hue. When you edit a photo on your phone, you can dial the saturation up and down. The same goes for colour—you can add different amounts of black and white to a base colour to create more muted tones. 

In summary:

• Hue refers to the colour of origin in its purest form. The primary, secondary, and tertiary colours you see on the colour wheel are all hues.

• Shade = Hue + Black to darken the original hue.

• Tint = Hue + White to lighten a hue.

• Tone = Hue + Grey to alter the saturation of the original colour, for e.g. to create a more muted tone. 

That’s how we end up with an entire spectrum of different colours and colour variations. And, while this gives designers plenty of creative freedom, you can’t just combine different colours at random. It’s important to understand how different colours work together and the effects they can achieve. This is where colour schemes come in—so let’s explore those next. 

The 6 Types of Colour Schemes

A colour scheme, or colour palette, is a combination of colours taken from the colour wheel. Different colour schemes achieve different effects depending on the relationships between the colours involved. Some are harmonious or complementary; others are high-contrast and dynamic. The type of colour scheme you choose will depend on the overall effect you want to create. 

So what are the different colour palettes? Let’s take a look. 

Monochromatic

A monochromatic colour palette is based on just one colour. This is ideal for achieving a harmonious, cohesive aesthetic. Note that you’re not limited to just one hue—you can use various tints, tones, and shades of your base colour.

Analogous

Analogous colour schemes are based on adjacent colours—that is, hues, shades, tints, or tones that sit next to each other on the colour wheel. Analogous palettes are extremely harmonious, but not so effective for creating contrast.

Complementary

Complementary colour schemes are based on colours that sit opposite each other on the colour wheel. Complementary colours create strong visual contrast and help to enhance each other’s intensity—achieving a vibrant colour “pop”. Examples of complementary colour pairings are yellow and purple, red and green, and orange and blue. 

Split-complementary

Split-complementary colour schemes are built on one base colour and two additional colours that are adjacent to the base colour’s complement on the colour wheel. 

Essentially, to create a split-complementary scheme, you choose your first colour, then find its complementary colour directly opposite to it on the colour wheel. The two colours on either side of the complementary colour are the second and third colours in your palette. For example: if magenta is your base colour, green and yellow will be your second and third colours as they’re located on either side of chartreuse—magenta’s direct opposite. 

Triadic

Triadic colour schemes use three colours equally spaced around the colour wheel. Triadic palettes are high-contrast and dynamic, but also well-balanced. Examples of triadic colour combinations are red, purple and blue, or orange, purple and green. 

Tetradic (or double complementary)

A tetradic colour scheme, also known as double complementary, comprises four colours in total—usually two pairs of complementary colours. You’ll remember that complementary colour pairs sit directly opposite each other on the colour wheel—so your tetradic colour scheme could be made up of, say, yellow and purple (complementary pair one) and vermillion and teal (complementary pair two).

Explore Colour Palettes: Make Your Own!

You have just seen how each colour scheme produces a different feel from the same wheel. Now try it yourself. Pick a colour below, switch between harmony modes, and see the palette shift in real time. When you find a combination you like, click and copy it as CSS variables, a Tailwind config, or a hex array to use directly in your projects.

Notice how the same base colour gives you a calm result in analogous mode but a bold, high-contrast one in complementary. Use the tints and shades strip to expand your chosen palette further, and copy the values in whichever format fits your workflow. Keep these relationships in mind as you start applying colour theory to your own projects.

What is Colour Psychology?

So far, we’ve explored the practical aspects of colour theory. Now let’s consider the emotional side of colour—otherwise known as colour psychology. 

Colour psychology is the study of how colour can influence our emotions, our perceptions, and even how we behave.

Take the example of red. In everyday life, red is often used for emergency signs and warning signals, so we might subconsciously associate it with danger. Imagine, then, visiting a spa to find everything decorated in red. The experience may put you on edge and make it difficult to relax. 

While it’s not an exact science, colour psychology ascribes symbolic meanings and associations to different colours—usually based on our personal experiences and cultural influences. Yellow is often associated with joy, green typically connotes nature, while white usually symbolises peace. What other colour associations can you think of?

As a designer, it’s important to be aware of colour psychology and how different colours will be perceived by your audience. The colours you choose should accurately convey the brand personality while evoking the right mood in your target user. If your goal is to inspire and excite your audience, you don’t want to choose a colour scheme that ends up evoking a sense of calm and tranquillity. 

Working with Colour: Tips and Best Practices for Designers

You’ve made it to the end of our guide—so consider yourself well-versed in colour theory! To finish up, here are some practical tips you can follow to apply what you’ve learned:

• Consider your target audience. This applies to every aspect of design—not just colour. Define your target audience and think about their perceptions, associations, and expectations in relation to colour. What kinds of colours might they want or expect to see in your design? How can you use colour to connect with your target audience and improve their experience? Ask yourself these questions to get an in-depth understanding of the audience you’re catering to.

• Incorporate colour psychology. Consider common associations and connotations that different colours hold—and ask yourself if these align with the brand identity you’re trying to build and the audience you want to appeal to. Colour can be an extremely powerful factor in evoking emotions and influencing the viewer’s mood, so choose wisely.

• Start with the colour wheel. When choosing a colour palette, refer to the colour wheel as your starting point. The colour wheel shows you the relationships between different colours and how different combinations can be used to achieve harmony, contrast, or dynamism.

• Pay attention to accessibility. This is especially important for digital products but should be prioritised in all design contexts. If your chosen colour palette makes it difficult for the viewer to read text or pick out key information, your designs will be ineffective—not to mention unenjoyable. Ensure that you’re creating plenty of contrast where it matters most.

• Experiment and test. You might think you’ve created the perfect colour palette—but how does it look in action? Test your colour palette to ensure that it works as intended, especially if you’re designing for a variety of devices, screen sizes, or print media. 

Additional Design Tips and Resources

Colour is just one of many tools used by graphic designers (and indeed all kinds of designers!) to create stunning visuals and communicate with their target audience. If you’d like to further develop your graphic design skills, make sure you’re well-versed in fundamental graphic design principles—or get to grips with typography design and logo design.

Want a more structured approach to learning graphic design? Level up with a professional graphic design certification. Check out the AND Academy Graphic Design Course or weigh up your options with this round-up of the 9 best graphic design courses on the market right now.

Next Steps:

We hope our comprehensive guide on colour theory could be of assistance. Here are some additional resources you can consider for further information:

1. Watch this session by graphic design industry leaders Soumya Tiwari and Sakshi Jain.
2. Talk to a course advisor to discuss how you can transform your career with one of our courses.
3. Explore our Graphic Design Course, which is taught through live, interactive classes by industry experts, and comes with a job guarantee.
4. Take advantage of the scholarship and funding options that come with our courses to overcome any financial hurdle on the path of your career transformation.

Note: All information and/or data from external sources is believed to be accurate as of the date of publication.