Mastering Colour II

 

A practical guide for designers

 
 

In the first part of this blog series I covered all the basic colour concepts you will need to understand part II. Today we’ll finally learn how create colour schemes from scratch, with a single colour as a starting point and without further references - so that you can see the power of colour.


Building Colour Palettes

 
 
blue.png

We will work with this shade of blue - quite boring, isn’t it? It was on purpose :P

This blue (albeit quite boring) is a colour as good as any other and these lessons will be valid for any colour you choose to work with.

We’ll work with a single starting colour as it is both easier to explain and to understand that way - however we will add more colours as we proceed.

There are essentially 2 types of colour schemes: those that are ‘traditional’ that is, based on the position of colours in the colour wheel (and easier for beginners because they are sort of a recipe) and those that are entirely custom and take a little more effort and practice to create. I’ll cover both and increase difficulty as we go.

As a designer I feel that Adobe Illustrator is by far the most straightforward and best overall software to create and manage my palettes, so I resort to it even when I need to work with Photoshop or Indesign (Indesign’s colour picker actually sucks big time).

Illustrator has this amazing feature/tool called “Color Guide” (you can fetch it in “window”) that when used together with the software’s colour picker and a bit of patience and practice, produces outstanding results in the domain of traditional palettes, being also a nice-to-have for custom ones. However please note that in this series I will only teach you how to create palettes. If you need to have something printed, you’ll probably need to take additional measures to ensure that colours print as expected.

The drop-down menu appers when you click the single arrow.

Once you select a type of palette, this appears.

 

 

TRADITIONAL PALETTES

Optimised monochromatic palette using tones

Optimised monochromatic palette using tones

Monochromatic

Monochromatic palettes are the easiest to create, being made up of different tones, shades and tints within a specific hue (colour). These palettes are probably the safest bet as they are quite hard to get wrong. You can see that the color guide offers you 3 options to start your monochromatic palette: monochromatic, monochromatic 2 and shades. You can use samples from 1 or from the 3 of them, as you prefer.

However I recommend against using these palettes as they are as most of them can be improved with manual work - just draw some squares to fill with colour and do your experiments by clicking the swatches and using the colour picker.

If you want to build traditional palettes like this monochromatic one, navigate the hue range (the big square) and leave the hue bar (the long rectangle) alone.

However when creating custom palettes feel free to explore the hue bar as well.

I’ve optimised this monochromatic palette by using tones, tints and shades to add interest. I used the colour picker to do so and went for muted tones, but I could have picked samples higher in chroma to sass things up - it all depends on what I want or need.

The only issue with monochromatic palettes is that they will fall boring if you pick samples too close to each other on the spectrum and neglect adding tones, tints and shades.


This palette is simple, elegant and suitable for projects that require minimal or classic aesthetics, without looking uptight.

It is so versatile that it could work equally well for an insurance broker identity, a spa… or pretty much anything that you’d would want to convey trust, serenity, and maturity.



Optimised complementary palette using tones

Optimised complementary palette using tones

Complementary

Complementary schemes are created by combining colours from opposite sides of the colour wheel (that pie-chart-like-thing you had to paint in elementary school). In their most basic form, these schemes consist of only two colours, but can - and should - be expanded with the use of tones, tints, and shades.

As we up the number of individual hues we create more expressive colour palettes. This one is autumnal, masculine and somewhat conservative. It is warm but not too much and the browns stand as faux neutrals.

This palette could work as a way of injecting blue in the brand of a restaurant (surprise!). It could feature in the trendboard of an autumn/winter menswear collection.

Optimised analagous palette using tones

Optimised analagous palette using tones

Analogous

Analogous color schemes are also fairly easy to create. Such palettes are created by using three colours that sit next to each other on the tertiary colour wheel (12 colours total). Typical analogous color schemes use the same chroma level (purity) for all colours but for many people it just feels too “in the face”. In any case by using tones, shades, and tints we are able to harmonise and even establish a hierarchy among hues.


This mineral-toned palette balances freshness with maturity. A couple of years ago I created a palette with similar tones for a technical service academy, centered around the colour of the client’s logo which was emerald green.

It would also work for a project hinting to summer and relaxation either in interior design or fashion.

Optimised triadic palette using tones. Note how I ‘diluted’ one of the hues for the sake of harmony.

Optimised triadic palette using tones. Note how I ‘diluted’ one of the hues for the sake of harmony.

Triadic

Triadic palettes are composed by hues equally spaced around the tertiary colour wheel. They allow for variety but are a tad bit difficult to master. However if you are into richer and bolder colour schemes they are worth trying out.

This palette is diverse yet harmonic, modern and very playful. I can totally see this palette in children apparel, toys, accessories and cosmetics/toiletries packaging.


There are other types of ‘traditional’ paletes one can use, such as split-complimentary, which is composed of 1 hue plus 2 extra hues that sit directly to the left and right of the complimentary colour. There are also tetradic / double complimentary paletes and others, even more complex. However I am not exploring them here as they are quite hard to pull off and not particularly appealing to most people - myself included.


CUSTOM PALETTES

As custom colour schemes don’t rely on a formal set of rules they often feel intimidating to create. For harmonious results you should always keep in mind the same old things: chroma (purity), tints, shades and tones.

The best possible advice I can give you for assembling these palettes is to keep things simple, with 2 vibrant hues at most and to remember about neutrals and faux neutrals - based on the same hues you are working with or contrasting ones.

You may create a custom palette by using a traditional one as a starting point. Another strategy that is a favourite of many artists and designers would be to pick a photography you find pleasing, extract colours from that photo and them balance chroma and play with shades, tints, tones, saturation... Essentially there are no set rules, only paths to explore.

Below are some examples of custom palettes based on that same blue shade from above:

A modified triadic palette - I shifted the focus to burgundy and replaced green with a neutral

A modified triadic palette - I shifted the focus to burgundy and replaced green with a neutral

This jewel-toned palette is guaranteed to warm up winter apparel for both sexes. In branding it could work for a event planning company or even a lounge bar.

Usually jewel tones compose elegant and sultry palettes since we associate them with something precious and rare.

A modified complimentary palette with a yellow hue added

A modified complimentary palette with a yellow hue added

This palette is younger and more modern than the traditional complimentary at the beginning of the post. It would fit an autmnal kidswear collection perfectly.

Two monochromatic hues

Two monochromatic hues

This palette is simple and balanced in terms of temperature, feeling timeless yet quite conservative. I believe this would be a fail-proof bet for a law firm or for any traditionally prestigious occupation in general.


What if we play instead with our base colour?

By playing with shades, tones and tints we step into a realm of possibilities. I used the same monochromatic yellow swatches in all of these palettes to enhance the variation in chroma (purity) and lightness of our blue.

A darker shade of blue + a monochromatic scheme of yellow

A darker shade of blue + a monochromatic scheme of yellow

Two monochromatic lighter tones of blue + two monochromatic tones of the same yellow hue, very low in chroma (purity)

Two monochromatic lighter tones of blue + two monochromatic tones of the same yellow hue, very low in chroma (purity)

Two monochromatic tones of blue, higher in chroma (purity) + two monochromatic tones of yellow

Two monochromatic tones of blue, higher in chroma (purity) + two monochromatic tones of yellow

 

The top example is extremely conservative and masculine with most of the swatches being faux neutrals, including the blue one. I could imagine it as the identity of a tailor or as the colours of brand of luxury pens or watches.

The second example is still a bit formal but adds room for a bit of expression with the lighter tones and higher chroma - think the reception desk of a hotel catering to business people, the identity of an architect…

The third example ups chroma even more and drops formality. I can imagine it being used for summer fashion, specially accessories. Perhaps even for packaging of a shampoo promoting “beach waves”, for a travel brochure…


And that’s it for the time being. I genuinely hope you’ve liked this series. I could stand here for two whole weeks building palettes and feel I still had so much to show you - however the fun of colour is really about playing with it, so I encourage you to do so.

One last note: if you start with a vibrant swatch your whole result will likely be vibrant too. If you want a ‘brighter’ palette you should start with a tint or a light tone instead of adjusting your starting shade in the end - this would save you time.




references:

Chapman, C. (2010, February 2). Color Theory For Designers, Part 2: Understanding Concepts And Color Terminology [Blog post]. Retrieved from https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/

Chapman, C. (2010, February 8). Color Theory for Designers: How To Create Your Own Color Schemes [Blog post]. Retrieved from https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/