Embedded Files
Light & Hue
Breaking it Down
Breaking it Down
Colour is an element of art but also affects art, design and our every day life. It can draw viewer's eye to an image or even trigger an emotional response. Colour should be considered in conjunction with the other elements. If used well it can add interest and excitement to a piece of visual communication and create ideas and feelings without even using words.
Colour theory helps us understand the relationships between different colours. It can help you feel confident in various situations, whether it's choosing colours for a design or putting together the perfect outfit. We will learn more about it below.
Watch this video to learn more about colour in design.
Watch this video to learn more about colour in art.
Colour Basics
A refresher on the basics:
In Art, primary colours are those that cannot be made with other colours. These are red, yellow and blue.
Secondary colours are created by combining two primary colours. Red and yellow make orange; yellow and blue make green; and blue and red make purple.
If secondary colours are mixed, then even more in-between shades are produced, like red-orange and yellow-green. All together, they form what's called a colour wheel.
A closer look
Once you understand the colour wheel, there are further details you can notice in colour called hue, saturation, and value. These are explored in further detail below.
Hue
Hue is the easiest one; it's basically just another word for colour. In the example below, you might describe the hue as coral pink or light red, depending on your interpretation.
Saturation
Saturation refers to intensity—in other words, whether the colour appears more subtle or more vibrant. Highly saturated colours are brighter or richer. Desaturated colours have less pigment and therefore less oomph.
Value
Value has to do with how dark or light the colour is, ranging from black to white. As you can see below, this gives us many different shades, from a deep reddish brown to a light pastel pink.
Creating Colour Schemes
So how does this get put together to create professional-looking colour schemes? By using colour harmony. Colour harmony is created by using formulas that are well-tested and have been used by others. They are based on the way colours relate to each other on the colour wheel.
Below are three basic ways to view colour in design; monochromatic, analogous (harmonious) and complementary (contrasting).
Monochromatic
The easiest formula for harmony is monochromatic because it only uses one colour or hue. To create a monochromatic colour scheme, pick a spot on the colour wheel, then use your knowledge of saturation and value to create variations. The best thing about monochromatic color schemes is that they're guaranteed to match. The colours suit each other perfectly because they're all from the same family.
Analogous
An analogous colour scheme (also called harmonious) uses colours that are next to each other on the wheel, like reds and oranges or blues and greens. In this scheme, the saturation and value can still be varied, just as it can in a monochromatic scheme. By varying the saturation and value, a more dynamic colour scheme can be created.
Complementary
Complementary colours (or contrasting) are opposite each other on the wheel; for instance, blue and orange or the classic red and green. To avoid complementary colour schemes that are too simplistic, add some variety by introducing lighter, darker, or desaturated tones. There are several types of complementary colours you can learn about in Colour Theory Extended.
Colour Meaning
Every colour sends a message. It's important to consider the tone of your project, and choose a colour palette that fits.
For example, the image on the top left uses many complementary colours in a way that is normally used to target children in toy packaging and advertising. By using this on a social media website, this colour scheme does not suit the functional requirements or the tone of the site. Instead, the lower example shows how using more muted tones suits a professional website and the brighter colours are emphasised as a result.
Go Pro
Desaturated colours often appear more serious or businesslike. By reducing the amount of colour, a monochrome scheme draws attention to the elements in the design including information presented. This can be associated with professionalism, minimalism, high fashion or edgy, moody photography.
Chill Out
By using colours that are close to each other on the colour wheel, a sense of harmony and unity are created. This cohesive colour palette can evoke a feeling of calmness and tranquillity in viewers as it is easier for their eye to glide across the colours.
The drama!
Bright colours tend to have a fun or modern vibe. The high contrast between complementary colours creates a dramatic visual effect that draws the viewer's attention. This strong visual impact can add excitement, energy or intensity to a design, photograph or artwork.
Colour Alignment
Colour alignment can involve strategically selecting colours to convey specific meanings or associations. For example, if you annotate an image, you could choose write comments about design principles in blue and comments about audience in red. This colour choice makes it easier for your viewer to identify which information is presented where so they can quickly understand and navigate processes or instructions. Colour alignment helps make communication effective and can be used to conveying messages across various contexts and applications.
Monochromatic Mood Board
Analogous Mood Board
Complementary Mood Board
Common Mistakes in Design
There are a few classic dos and don'ts when it comes to color. For instance, have you ever seen colours that seem to vibrate when they're placed next to each other?
The solution is to tone it down. Start with one colour, and try adjusting its lightness, darkness, or saturation. Sometimes a little contrast is all your colour palette needs.
Readability is an important factor in any design. Your colors should be legible and easy on the eyes, especially when working with text.
Page updated
Report abuse