MAT MARTIN | Colour Theory and Palette Building in Brand Development
22 November, 2017, 16:22
As discussed in my post on colour meaning, association and perception, choosing which colour or colours to work with when developing a brand identity can be both valuable and complicated. The layers of meaning ascribed to colours in various contexts are many, and unreliable, but can nonetheless offer us guidance and insight when choosing which colour(s) to associate with a brand.
Using those colours is another issue altogether. Once we have selected a specific hue as the principal colour of a brand, we then need to develop some approaches to its application, and decide if, and how, we will seek to create contrast with it. This is where colour theory can be useful in helping us to understand the relationships between hues and to build palettes which can be applied to designs effectively (making the brand professional and capable) and with consistency (making the brand recognisable, even familiar).
Colour Theory: An Introduction
The idea that there is some kind of internal harmony to colour which can be understood academically and put to use in the creation of visual media is one which dates back at least to the Renaissance. The history of colour theory is fascinating, and has been discussed at length elsewhere. Some aspects of its development are important to our understanding here though, so it is worth taking a moment to consider them.
The Wikipedia article on colour theory – somewhat incomplete at the time of writing – describes it as follows:
In the visual arts, color theory… is a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also definitions (or categories) of colors based on the color wheel: primary color, secondary color and tertiary color. Although color theory principles first appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c.1490), a tradition of “colory theory” began in the 18th century, initially within a partisan controversy over Isaac Newton‘s theory of color (Opticks, 1704) and the nature of primary colors.
There are some key terms here. The idea of primary, secondary and tertiary colours will prove key to our understanding of colour relationships within given colour spaces.
The less obvious but equally noteworthy term in that passage is partisan. Various versions of a colour theory, many of which contradict one another and/or have been disproved by advances in scientific understanding, have been published over the centuries. We should remember in light of this that perception of colour is subjective, even though certain objective observations can be made about it. Wikipedia’s article covers this particularly well:
Color harmony is a complex notion because human responses to color are both affective and cognitive, involving emotional response and judgment. Hence, our responses to color and the notion of color harmony is open to the influence of a range of different factors. These factors include individual differences (such as age, gender, personal preference, affective state, etc.) as well as cultural, sub-cultural and socially-based differences which gives rise to conditioning and learned responses about color. In addition, context always has an influence on responses about color and the notion of color harmony, and this concept is also influenced by temporal factors (such as changing trends) and perceptual factors (such as simultaneous contrast) which may impinge on human response to color. The following conceptual model illustrates this 21st century approach to color harmony:
Color harmony = f(Col1,2,3,… ,n)\• (ID+CE+CX+P+T)
Wherein color harmony is a function (f) of the interaction between color/s (Col 1, 2, 3, …, n) and the factors that influence positive aesthetic response to color: individual differences (ID) such as age, gender, personality and affective state; cultural experiences (CE), the prevailing context (CX) which includes setting and ambient lighting; intervening perceptual effects (P) and the effects of time (T) in terms of prevailing social trends.
This is very important when working on designs, because it reminds us to trust our instincts and listen to the real experiences of our audience. Our instincts and ideas benefit greatly from being developed with an awareness of theory, but it is easy to begin concept work based on theory and ignore those instincts completely.
Some Important Terminology
There is much confusion associated with the language of colour. Several terms with specific meanings tend to be used interchangeably, even in discussions of colour theory. To try and avoid confusion in this post I will address some of the most common issues briefly here. Again, Wikipedia goes into more detail than I can on this subject, and is clear on historical context, too:
The most important problem has been a confusion between the behavior of light mixtures, called additive color, and the behavior of paint, ink, dye, or pigment mixtures, called subtractive color. This problem arises because the absorption of light by material substances follows different rules from the perception of light by the eye.
One of the principal differences between additive and subtractive colour is that in the case of additive colour, equal parts of all primary colours combine to create white. In a subtractive environment they lean to black. The distinction is an important one technically, especially when designing for screens (light) and/or print (ink).
Lightness, Saturation and Hue
Colour can be seen as being made up of three distinct qualities. We tend to refer to colours generically, using words such as ‘red’ or ‘purple’, whereas in fact these terms specify only hue (and only in broad terms). This makes discussing colour with any degree of exactitude quite difficult.
The three qualities in question are:
- Lightness – “also known as value or tone, is a representation of variation in the perception of a color or color space‘s brightness.”
- Saturation – “the ‘colorfulness of an area judged in proportion to its brightness‘, which in effect is the perceived freedom from whitishness of the light coming from the area.”
- Hue – “one of the main properties (called color appearance parameters) of a color, defined technically (in the CIECAM02 model), as ‘the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow.'”
Pure Colour, Tints & Shades
Pure colours contain no black or white, and are made up only of primary colours combined in various ways.
When a ‘pure’ colour is tempered by the addition of an achromatic colour (black or white), the result is referred to as a tint or a shade. Both processes reduce the intensity and brightness of the colour in question.
Tints (left) are created by adding white to a colour. The result is paler and more gentle. Shades (right) are created by adding black to a colour. The result of doing this is a duller and heavier version of the colour being used.
In traditional colour theory primary colours are understood differently according to context. Wikipedia gives us the following scholarly distinction:
A set of primary colors is a set of pigments, colored lights, or abstract elements of a mathematical color space model that can be combined in varying amounts to produce a range or “gamut” of colors. Deriving many colors from several primaries facilitates technological and artistic applications such as painting, electronic displays, and printing. Any small set of realizable primary colors are “imperfect” in that they cannot generate all perceptible colors, but some sets of primaries can yield a far wider gamut than others.
Note the specification of “a mathematical colour space model”. This refers to the specific organisation by which colour is to be understood (I told you this was subjective). If you’ve spent any time working in Photoshop you’ll be aware of the difference between RGB and CMYK, for example. All the colours we see within a given colour space are created from the three or four primary colours which define it.
On a technical level, digitally we are usually dealing with RGB (red, green, blue) and in print CMYK (cyan, magenta, yellow, key/black). Conceptually and emotionally though, at least in western culture, we tend to respond in a colour space of RYB (red, yellow, blue). Given that what we deal with as designers is communication, it is RYB we tend to consider when making colour choices (we consider the more technical aspects during the application and realisation of our concepts).
Where the RGB model is based on light and the CMYK model on print, the RYB colour model is derived from the combination of pigments in painting, and thus predates most colour space models. This is most likely why this way of thinking about colour remains the basis for the way we think conceptually and teach about colour. The Wikipedia article on the subject notes that the theory of RYB depends of subtractive colour mixing (see below):
RYB (an abbreviation of red–yellow–blue) is a historical set of colors used in subtractive color mixing and is one commonly used set of primary colors. It is primarily used in art and design education, particularly painting. RYB predates modern scientific color theory, which has determined that cyan, magenta, and yellow are the best set of three colorants to combine, for the widest range of high-chroma colors.
We should make a final note on the subject of the RYB colour space, again from Wikipedia. The bulk of the observations collated here with specific reference to understanding colour psychology in relation to branding use RYB as a point of reference, but:
Unlike the RGB color wheel, the RYB color wheel has no scientific basis. The RYB color wheel was invented centuries before the 1890s, when it was found by experiment that magenta, yellow, and cyan are the primary colors of pigment, not red, yellow, and blue.
The distinction is an important one. Despite our concentration here of the emotional and psychological value of relationships within RYB these more technical considerations are of enormous value to the designer, especially during production. If the finished article is to have the effect that colour considerations at the concept stage intend, the transfer of thought from a conceptually appropriate colour space (culturally RYB) to one of production (RGB for screens or CMYK for print) must be undergone as part of the design process.
The RYB primary colours are – unsurprisingly – red, yellow and blue. When mixing coloured pigment, these three hues are the basis for all other colours.
Simply put, secondary colours are created by combining primary colours in equal amounts. In our RYB space this gives a result familiar to anyone who has played with paint as a child:
- Yellow + Blue = Green
- Red + Blue = Purple
- Red + Yellow = Orange
Because the in equal amounts part of the definition is there, secondary colours remain pretty specific in their definition.
It is at this stage of mixing that colour becomes more nuanced, and as a result simultaneously more useful and more elusive. Technically, the formula for a tertiary colour, according to the Wikipedia page, is:
A tertiary color is a color made by mixing full saturation of one primary color with half saturation of another primary color and none of a third primary color.
Although, it is a little simpler to wrap our desire to think conceptually around this way of expressing it, from CoSchedule’s colour psychology post.
Tertiary colors take secondary colors one step further. They are the “two-name” colors, such as red-purple, red-orange, yellow-green, etc. They are created by adding more of one primary color than the other creating not a true secondary color. It ends up being closer to the primary color.
Achromatic/Neutral/Near Neutral Colours
Some mention must be made here of colours which do not come up on the wheel. These are essentially black, white, greys, and to a lesser extent browns, tints and shades:
Any color that lacks strong chromatic content is said to be unsaturated, achromatic, near neutral, or neutral. Near neutrals include browns, tans, pastels and darker colors. Near neutrals can be of any hue or lightness. Pure achromatic, or neutral colors include black, white and all grays.
Near neutrals present a blurred line between colours and achromatic colours, and relate to the idea of shades, as discussed below:
Near neutrals are obtained by mixing pure colors with white, black or grey, or by mixing two complementary colors. In color theory, neutral colors are easily modified by adjacent more saturated colors and they appear to take on the hue complementary to the saturated color; e.g.: next to a bright red couch, a gray wall will appear distinctly greenish.
It is common for one or more neutral colour to be included in a palette alongside colours from the wheel.
Building Palettes & The Colour Wheel
Understanding the nature of colour helps us to make decisions about its use. The relationships between primary, secondary and tertiary colours can create the basis for sets of colours which are likely to perform well and have an innate sense of balance.
Here is a diagram showing the progression through primary, secondary and tertiary colours in the RYB space, in a traditional colour wheel format. All types of colour are shown on the far left, after which I have isolated (from left to right) primary colours, secondary colours and tertiary colours. The outer (largest) circle gives examples of shades, the central circle pure colours and the inner circle tints.
Generally, colours gathered around the red point on the colour wheel are considered warmer than those gathered around the blue point, with each of these colours being defined as the hottest and coldest points, respectively. The Wikipedia entry on colour theory goes into some depth on this topic:
Color theory has described perceptual and psychological effects to this contrast. Warm colors are said to advance or appear more active in a painting, while cool colors tend to recede; used in interior design or fashion, warm colors are said to arouse or stimulate the viewer, while cool colors calm and relax. Most of these effects, to the extent they are real, can be attributed to the higher saturation and lighter value of warm pigments in contrast to cool pigments. Thus, brown is a dark, unsaturated warm color that few people think of as visually active or psychologically arousing.
This can be of use when considering brand colour language too. The physique of a brand may tend towards an energetic, physical, warm quality or perhaps a more reflective, psychological, cool one. Colour choice is likely to reflect this, but palette choice and use can create opportunities to balance and enhance it.
Consider the value of adding a touch of warm colour to a brand’s cool presence. It may help the brand feel more human, or offer a distinct impetus to action at certain key points in a client’s experience.
The simplest of options for using the colour you have selected for your brand identity is to stick to it. A monochromatic palette uses only the specific hue and its tints/shades to create designs. This can be very effective, and has something of a monolithic quality which may suit some brand personalities, but can also be limiting in design, and tiring to look at.
It is unlikely that, having chosen a colour for your brand, you will simply use it by itself in all cases. For example, a predominantly green design may be attractive but without contrast any sense of the hierarchy of importance in the information presented will be lost, as will any call to action. This is where polychromatic colour palettes become very useful.
To quote CoSchedule’s article again:
When the human eye sees a painting full of different kinds of greens, any bit of red is going to stand out amazingly well.
This is the essence of the most basic of colour palettes – the combination of complementary (directly opposite on the wheel) colours. As soon as a tension or contrast is introduced to a design, its communicative possibilities grow vastly. Of course, an approach as blunt as a complementary palette is not the only way of achieving this effect: several standard approaches to palette building exist, and each creates communicative contrast and tension in its own subtle way.
These are built, as discussed above, from two opposite colours. These opposites exist at their most basic (primary) in the following pairings, which we are often taught to describe as ‘clashing’:
The possibilities of complementary palettes don’t stop at this level though. Any specific hue, no matter how complex, will have an opposite on the colour wheel, so tertiary colour palettes are equally effective but can offer some more subtle results. The manner in which the colours are used has a huge part to play in results too. CoSchedule’s Ashton Hauff offers a solid piece of advice on this:
Pick a primary color as your main color, and then accent it with its complement color for more of a 7:3 ratio. This provides a beautiful color pairing, but also lets your eyes break on the opposite color.
As a rule of thumb, this feels pretty solid, roughly reflecting as it does the golden section ratio. A base/accent colour pairing will give much more structure and sense to a layout than a 50/50 application of opposite colours, which will jostle for space. Using an accent colour gives some judicious relief from the base and can be used to guide people through designs.
Note that whatever the “temperature” of your main colour, the complementary accent will be opposite. The closer the pairing gets to the blue-red axis, the larger this difference will be.
Split Complementary Palettes
Offering the benefits of a complementary palette with the added complexity of an extra hue, and the indirect implication of opposite colour pairing, the split complementary palette is a popular and effective choice in brand language. It is built simply by creating a complementary palette and then selecting the two neighbouring colours to the accent rather than the accent itself.
This approach offers more subtlety and more options where colour temperature is concerned, too.
An analogous colour palette uses a distinct set of colours which appear next to each other on the wheel. The effects can be quite beautiful, and certainly have a much more restful feel than palettes based on complementary relationships. The single-minded nature of the monochromatic palette is present, but can feel more sophisticated and nuanced.
Analogous palettes lack contrast by definition, and this can prove difficult in some design situations. Often this type of palette is completed with a single complementary accent colour, creating a complex but versatile whole.
Using a selection of three colours, evenly spaced around the colour wheel, creates a set of relationships with a more balanced tension than in palettes based on complementary pairings. The colours are less directly affected by one another, so their relationships are more complex. The even spacing however can create a sense of balance and solidity which complementary and split complementary palettes lack, without the added noise of the four colours in a double complementary palette.
Used judiciously and with careful weighting to either the warm or cool side of the colour wheel, this can be an effective, accomplished and mature approach to colour for brand identity.
Double Complementary Palettes
Also known as square or rectangle colour palettes due to the inner forms their relationships create, these are constructed by selecting two pairs of complementary colours for a four-colour palette.
As one would expect, palettes increase in complexity as their number of hues increases, and sets of colours with these relationships are difficult to use consistently without creating a certain amount of noise. Hauff suggests a cautious approach to double complementary palettes in particular:
The best application is to use one color as the dominant color, and the others for highlighting content.
With double complementary palettes it is particularly difficult to lean your brand’s physique towards the warm or cool side of the wheel.
Intensity, Tints and Shades
The disposition of colours on the wheel provides a skeleton for a palette, and the above options use tried and tested shapes/relationships to make this skeleton solid and well proportioned. The level of detail to which hues can be defined is infinite, each change affecting the overall palette in subtle ways.
It is also possible to consider another dimension in colour selection for a palette, which is intensity. Remembering that colour is a complex of lightness, saturation and hue, and looking at the tints and shades which can be generated using any one hue, we can further refine our palettes to take in paler or darker versions of the colour(s) we are working with.
Here, the same palette approach has been treated three ways. To the left, only tints have been selected, giving the palette a more delicate, gentle feel. In the centre, only shades are used, which gives a distinctly different, darker quality. Both of these approaches remain as one-dimensional as a palette using only pure colours when compared to the selection on the right.
This latter selects two of the main colour iterations, one pure colour and one tint. The result displays a quite different kind of depth.
Colour theory is a complex topic, the understanding of which requires a careful combination of subjectivity and objectivity. We know a lot about the way colour behaves, and are able to consider it in multiple colour spaces which allows us to consider its use in several contexts. The contexts themselves are more or less scientific, too.
As we saw in my post on colour meaning and perception, it is not easy to apply observations about the feelings with which people respond to colour with any accuracy or consistency. This is reflected in the fact that the colour space in which we tend to understand the conceptual use of colour is still the ancient painterly RYB space, despite its lack of scientific rigour.
As designers we walk a line between instinct and technique, balancing feelings based on experience and theoretical ideas with real-world testing and use. Nowhere does this seem as relevant as in the field of colour theory, which has – for as long as it has been studied – relied on empirical evidence and hypothesis. Reading some of the older texts on colour theory (Goethe’s work in particular) we can still be enchanted by the logical beauty of the ideas expressed, even when we know them to be untrue.
Colour theory is a more exact science that that of colour associations, of course, but it is still advisable from a design perspective to keep a fott in the unknowable so as to really connect with our emotional responses to lightness, saturation and hue, to intensity in the form of tint and shade, and to the complex relationships between colours when they are combined.