Colour adds richness to a design

Practical colour palettes

Putting together a palette of colour can be quite daunting if you’re new to design. It can also be unnecessary. Some of the best looking visual designs I’ve seen have only used black, white, and one accent colour. But if you need more than one colour to work with, you need them to work well together.

There are essentially two approaches to building a colour palette: create one from scratch, or use someone else’s. If you want to create one from scratch, I recommend either Erik Kennedy’s approach, or Laura Elizabeth’s. They’re both practical, easy, and will teach you plenty about choosing colours.

If you want to use someone else’s colour palette, I would stay away from free collections. They’re often chosen only because the colours look good next to each other. Instead, I recommend colour palettes created by professional designers. The only such collection I’ve come across is Jim Krause’s Color Index XL. You can buy it as an ebook and open it on your computer to pick colours from.

Colour contrast

Contrast is essentially the difference in brightness between two colours. You’ll also see brightness referred to as “value”.

This is a very important when it comes to creating a colour palette, because the various colours in your palette should either have the same brightness, or noticeably different brightness. Not-different-enough brightness leads to muddy looking colour combinations, and soft borders between different colours.

Colour systems

When it comes to identifying or describing any given colour, there are a few systems that computers use. The most common is hex codes, but these aren’t very easy to understand. This article by Erik Kennedy explains the HSB colour system, which makes working with colours a lot easier.

Less colour for more impact

Colour is not like money. You can’t throw it at the problem. Confusingly, the more colour you use, the less impact it has.

It’s much easier to notice a splash of colour in a sea of white or black. Like a rubber duck in the middle of a plain white room. Your eyes can’t resist it. So if you want your colour to have impact, and not just add some texture to the page, then use less of it.

Colour meaning

One of the most important uses of colours in design is to add meaning to a design. They do this without taking up any extra space, which is a big advantage. One drawback is that the meanings behind colour are fluffy. It’s not a safe assumption that each person will understand the colours in the same way.

Still, this is not a reason not to take advantage. A quick search online will give you plenty of explanations of what various colours mean. If you’re designing for an international audience, be aware that some colours have different meanings from culture to culture.

Aside from cultural meaning, colour can also be assigned meaning by whoever produces the design. You might use green, for example, to represent everything interactive in an interface. As a designer you should consider the use of colours to represent practical meanings as well as cultural or emotional ones.

You can take this even further if you theme various concepts in your design with certain colours. Let’s say you are promoting a tool that lets people invoice customers and handle your employees’ expenses. You might use blue to represent the concept of an invoice, and green to represent the concept of expenses. Then you might use those colours in all of the places in the design that relate to those concepts. This makes the whole design feel more connected.

As with other design elements, if you don’t know why you’ve added colour to a design, it probably isn’t necessary.

Colour personality

I’m not aware of a technical term for this concept, so I went with “personality”. For any given hue, there are combinations of saturation and brightness that will make it more approachable, more professional, and so on. You should be aware of this if you want your design to feel a certain way.

I wrote about this in a thread on Twitter, with some examples of what I mean.

Next chapter → ← Previous chapter Back to the table of contents