Laqueer.com

What is 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

Remember hearing about primary, secondary, and tertiary colours? They’re pretty important if you want to understand, well, everything else 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.

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 colour, 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 colours 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

Keep in mind that the colour mixtures above only work if you use the purest form of each primary colour. This pure form is known as a colour’s hue, and you’ll see how these hues compare to the variants underneath each colour in the colour wheel below.

Tertiary Colours

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

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.

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 colours 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. Visualizing 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 recognize 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.

Tint

A tint is the opposite of a shade, but people don’t often distinguish between a colour’s shade and a colour’s tint. You get a different tint when you add white to a colour. So, a colour can have a range of both shades and tints.

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.

The Meaning of Colour

Along with varying visual impact, different colours 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 — tranquillity 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.