We cut through the jargon to explain the basic concepts and terminology of colour theory, in words that you can understand.
Colour is such a pervasive part of everything we visually encounter in the world, that for many designers it becomes an intuitive choice. If you think back to primary/elementary school though, you'll recall being told that there are three "primary" colours - Red, Yellow, and Blue. We were all taught that any colour can be created by mixing these three colours in varying quantities.
It turns out this isn't quite right (although it's still workable enough in practice to be taught the world over to five-year-olds).
How colour is formed
Colour theory stretches back to at least the 15th century
Understanding how colour is formed and, more importantly, the relationships between different colours, can help you to use colour more effectively in your designs.
The Bauhaus school understood this in the 1920s and 1930s, with staff and students going on to develop colour theories for evoking particular moods and emotions through choice of palette in design and architecture.
The theory of colour is a discipline that stretches back much further than that - at least to the 15th century - and encompasses physics, chemistry and mathematics to fully define and explain the concepts. However, much of this is unnecessary to being able to use colour effectively. This quick primer will give you a handy overview of all the important aspects to help you start making informed decisions!
Colour systems
There are two primary colour systems - methods by which colour is reproduced: additive and subtractive (also known as reflective). We use both on a daily basis - the screen you're reading this article on uses additive colour to generate all the colours you see, while the book you're reading uses subtractive colour for its front cover.
In simple terms - anything that emits light (such as the sun, a screen, a projector, etc) uses additive, while everything else (which instead reflects light) uses subtractive colour.
Additive
Additive colour is based on red, green, and blue - RGB for short
Additive colour works with anything that emits or radiates light. The mixture of different wavelengths of light creates different colours, and the more light you add, the brighter and lighter the colour becomes.
When using additive colour, we tend to consider the building block (primary) colours to be Red, Green, and Blue (RGB), and this is the basis for all colour you use on screen. In additive colour, white is the combination of colour, while black is the absence of colour.
Subtractive
Subtractive colour is based on cyan, magenta, and yellow
Subtractive colour works on the basis of reflected light. Rather than pushing more light out, the way a particular pigment reflects different wavelengths of light determines its apparent colour to the human eye.
Subtractive colour, like additive, has three primary colours - Cyan, Magenta, and Yellow (CMY). In subtractive colour white is the absence of colour, while black is the combination of colour, but it’s an imperfect system.
The pigments we have available to use don't fully absorb light (preventing reflected colour wavelengths), so we have to add a fourth compensating pigment to account for this limitation.
We call this "Key", hence CMYK, but essentially it's black. Without this additional pigment, the closest to black we'd be able to render in print would be a muddy brown.
The colour wheel
The modern colour wheel has been in use since the 18th century
In order to make it easier to see the relationship between different colours, the concept of the modern colour wheel was developed around the 18th century. These early wheels plotted the different primary colours around a circle, mixing different primary colours together in strict ratios to achieve secondary and tertiary colours.
The colour wheel allows us to see at a glance which colours are complementary (opposite each other on the wheel), analogous (adjacent to each other on the wheel), triadic (three colours positioned at 120 degrees on the wheel from each other) and so on.
Each of these relationships can produce pleasing colour combinations. There are many more pleasing relationships between colours based on their position on the wheel. Software such as Adobe Kuler use to help you generate effective colour themes. Read our article on choosing an effective colour scheme to learn more.
The three components of a colour
The three component parts that help us define a colour are hue, saturation and brightness
Yellow is yellow is yellow, right? Well, actually, no; there are many different colours we could refer to as yellow. Different shades or tints, saturations and hues are all possible while still being within the yellow part of the colour wheel. As a result, there are three primary component parts that help us define a colour:
01. Hue
This is the position on the colour wheel, and represents the base colour itself. This is typically referred to in degrees (around the colour wheel), so a yellow colour will appear between 50 and 60 degrees, with the perfect yellow appearing at 56 degrees. Green, meanwhile, appears at 120 degrees on the wheel at so on.
02. Saturation
This is a representation of how saturated (or rich) a colour is. Low saturation results in less overall colour, eventually becoming a shade of grey when fully desaturated. Saturation is normally referred to as a percentage between 0 and 100%.
03. Brightness
This is how bright a colour is, typically expressed as a percentage between 0 and 100%. A yellow at 0% brightness will be black, while the same yellow hue and saturation at 100% brightness will be the full yellow colour.
Colour gamut
Colour gamut describes the range of potential colours a system can reproduce
Colour gamut is a way of describing the full range of potential colours a system can reproduce. It may surprise you to learn that the range of colours achievable in CMYK is different to that you can achieve with RGB.
This is partially because of the nature of the two different systems, but also (in the real world at least) as a consequence of limitations in our technology - screens aren’t always capable of producing the same range of colours as each other, and pigments reflect light at a non-uniform rate as you reduce their saturation.
Colour perception
Finally, it’s worth looking at how different colours can affect the way we perceive other colours. A typical illustration of this features a mid-grey tone placed over a light grey background, and the same mid-grey tone shown over a dark grey background.
The apparent brightness of the mid-grey is altered according to the context in which you see it - a trick of the eye, working to make sense of its surroundings. Hues works in the same way as tones when placed adjacent to other colours, allowing you to create different effects using the same palette of colours.
Further reading
Click the links below to learn more about the use of colour in design
Mixing colours digitally is not the same as mixing them physically - we explain what the difference between the two is and how to go about it in practice.
Choosing a colour theme effectively is key to the success of a design. So how do you go about choosing the best combination of colours for your project? Sam Hampton-Smith reveals all...
Getting your colours in print to match what appears on screen, or something you’ve previously printed, isn’t always straightforward. We explain how to achieve consistency.
Mixing colours digitally is not the same as mixing them physically - we explain what the difference between the two is and how to go about it in practice.
Mixing colours to form hues and tints is a fundamental skill for every artist and designer, but there’s a difference between mixing in traditional media and digital paint.
In our formative years at school, most of us were taught how to mix three primary colours together to achieve others on the colour wheel. That the combination of blue and yellow poster paint generates a green, while blue and red create purple.
By mixing red, yellow and blue in varying amounts, a wide range of colours can be produced. However, mixing colour digitally works differently, and one of the most challenging aspects of creating digital art is learning how computers produce different colours.
Forget what you learned at school about mixing paint colours - digital's different
The additive colour model
Screens use an additive colour model rather than the reflective model you learnt at school, so instead of the primary colours comprising Cyan (C), Magenta (M) and Yellow (Y) - which are the pure version of the blue, red and yellow you were taught at school - the additive primary colours are Red (R), Green (G) and Blue (B).
(If you need further explanation of why there are two different models used to create colour, check out this article on colour theory.)
The idea of mixing together different amounts of red, green and blue to achieve any colour and tint is quite simple in principle, but it takes some practice before you’ll understand what to expect when you start painting with just those three colours.
How to make your own colour wheel
The very best way to get to grips with digital colour mixing is to experience the effects of different combinations yourself. Follow these simple steps to create a rough colour wheel, and learn how different mixes create different colours.
Step 01
Create three coloured blobs in Photoshop
Start by creating a blank document in Photoshop, or your preferred digital painting software. Set your brush to 100% opacity, and to use the Lighten colour blending mode.
Fill the canvas with black, and set your brush to use 100% red, 0% green and 0% blue. Paint a blob of this colour at the top of an imaginary triangle.
Change your brush colour to use 0% red, 100% green and 0% blue. Paint a second blob on the left apex of the triangle.
Finally, set your brush to use 0% red, 0% green and 100% blue. Paint a blob on the right apex of the triangle.
Step 02
Place overlapping blobs of paint at the midpoint between the red and green points
Repeat the process, placing overlapping blobs of paint at the midpoint between the red and green points, in both red and green.
Do the same for the mid-point between red and blue, but painting with red and blue instead of red and green.
Finally, place a final pair of blobs between green and blue, using green and blue paint.
You should see the two sets of colours mixing to create yellow between red and green, cyan between green and blue, and magenta between blue and red.
Step 03
Add more blobs at the mid-point between the pure mixed colours, and the original apex points
Paint a series of secondary blobs at the mid-point between your pure mixed colours, and the original apex points. Use 100% opacity for the colour closest to the point, and 50% opacity for the other colour on that side of the triangle.
For example, in between the yellow and red blobs, place a blob of red paint at 100% opacity, and overlay a blob of green paint at 50% opacity. Repeat for the remaining five spaces between the mixed and pure colours.
Paint a pure 100% version of each colour, overlapping in the centre of your triangle to see the effect of mixing all three colours together.
Creating different tints
Additive colour works so that the more light you add, the brighter the colour becomes. Mixing 100% opacity of red, green and blue together provides white, whereas mixing 0% of the three colours provides black.
It follows, then, that mixing 50% of each colour will give you a mid-grey. Similarly, if you want a dark magenta, you’d mix perhaps 50% red with 50% blue, or 25% of each to achieve an even darker version.
These different brightness values are referred to as 'tints' or 'shades' of the pure colour.
Colour mixing tools
Paper for iPad now offers a colour mixing tool
Web design formats
Once you’ve got a good grip on how the three principal colours in the additive model mix together, you’ll be able to make educated guesses at what colours notated in common web design formats such as hexadecimal and rgba are likely to be.
So, for example it will become second nature that #ffff00 is yellow, while rgba(127,255,0,1) is a fully opaque lime green.
Colour mixing tools
Understanding the basic principles of mixing colours in the additive colour model isn’t the be-all and end-all of digital colour mixing. There are many colour mixing tools available to help make good colour combination choices - here are a few...
Adobe Kuler: generate an entire colour scheme from a single base colour
Perhaps the best-known colour scheme tool on the web, Kuler allows you to generate an entire colour scheme from a single base colour, upload a photo to extract colours from it, and store/share your colour schemes for later use. It even offers direct integration with the Creative Suite apps and downloadable palettes for sharing.
Colors on the Web: takes a single colour and outputs a set of schemes
Colors on the Web accepts a single colour in hexadecimal or RGB, and outputs a set of schemes based on different mathematical equations, similar to Kuler. This won’t work on iPad or iPhone though as it uses Flash to power the schemer.
ColoRotate: integrates directly into some Creative Suite applications
Offering similar functionality to Kuler, but with a nice 3D visualisation of the colour wheels, and the ability to generate more than five colours in a single scheme, ColoRotate can also be integrated directly into some Creative Suite applications, and offers a nice alternative to Adobe’s own offering.
Toucan: create palettes with up to 20 different colours
Part of the Aviary suite of online tools, Toucan allows you to create palettes with up to 20 different colours, using the same core set of equations as you’ll find in all the tools here. Again this is powered by Flash, so not available on HTML5 devices such as the iPad.
Software developers are also creating their own approaches to providing intuitive colour mixing on digital devices. For instance, Paper for iPad, by developers FiftyThree, recently received an update that allows users to buy their new colour mixing tool.
This uses a custom-built colour mixing algorithm that doesn’t rely on the traditional RGB model, but instead plots natural colour mixes based on that original understanding you got at school - so that mixing yellow and blue provides a complementary green.
This colour mixing approach was inspired by the work of a German study from the 1930s that split colour into six different dimensions, including reflectivity and absorption. By adapting the work of the two scientists behind the study, Kubelka and Munk, and conducting extensive user testing, the team at FiftyThree came up with a natural-feeling, intuitive colour mixing palette. Their work was enough to convince Apple to feature the app when launching iPad mini.
No comments:
Post a Comment