Posted By Neale Van Fleet on January 17th, 2020

Introduction

When I start a design project, one of the very first things I do is come up with a colour scheme. For me, this is a limited set of colours which will be used for all the elements in our interface, including backgrounds, icons, and text. I think it may be helpful for others to see the thought that goes into this, so I’m going to walk through each step of my process.

General Strategies

Before I get into specifics, let’s cover some good general strategies for making a colour scheme.

Limit Your Number of Colours

To start, you should limit the colour set as much as you can. Using more colours than needed can make an app look sloppy and haphazard. A good interface should be consistent, and in most cases uncluttered. Having a set of colours, established at the outset, saves us from picking random colours each time we need one.

Understand Each Colour’s Job

Think about the job each colour will be performing. Perhaps one colour will be used to show activity or status, so it should be relatively high-contrast. Some colours provide secondary information, which can subtly fade into the background. For the rare colour that’s used to alert us to problems, something stark and eye-catching is needed. Each colour should have a well-understood role in your interface, and that role should guide your selection.

Break the Rules When You Have To

There aren’t any hard and fast rules that must be followed. It’s wise to follow sensible guidelines, but if you need to bend or break a rule, or come up with your own, go for it.

Selecting Our Base Colours

Ok, time to pick some actual colours. I generally start my colour systems with a set of three primary colours, which form my base. These colours are:

• Key/branding colour

• Primary content colour

• Primary background colour

We’ll need more colours than that, but we’ll obtain additional colours by mixing these base colors.

Getting Inspiration

I could just start picking random colours I like, but I usually like to begin by viewing existing color sets. A site like Color Collective is a fantastic resource for this. However, I also like to look to the real world for inspiration.

For example, I have a shirt I like that mixes orange, green and white. I’m going to use it as a base for doing a quick experimental re-colouring of Airfoil Satellite for iOS.

Here’s the shirt:

And here’s what Airfoil Satellite for iOS looks like currently:

I’m going to combine this mockup of Airfoil Satellite with the colours from the shirt, and we can see what happens. I should note that the orange and green I’ve chosen don’t traditionally go together, but I’m going to demonstrate how we can still make them work.

Key Colour

The key colour is going to be the main colour for anything I want to denote as interactive. It’s not usually going to make up the majority of pixels in any interface, but it’s the colour most closely tied to the identity and branding of the app. For example, the key colour of our soundboard app Farrago is purple.

This colour will generally be used to show status or activation, often on things like checkboxes and sliders. It will probably also be featured prominently in the app icon.

I’m going to use a bright peachy orange, inspired by the shirt, for the key colour.

Primary Content

The primary content colour I’ll use for the most important content, like text. It’s generally less intense than what we used for the key colour.

The white from the shirt for this is a good choice for this, as it’s solidly neutral.

Primary Background

Finally, the primary background needs to contrast strongly with the primary content. It might not be obvious at first, but the primary background colour will actually be the colour that makes up most of the app on a pixel to pixel comparison.

For this, I’ll start with the green colour from the shirt. However, it needs to be darkened to get a background colour that contrasts with the other primary colours we’ve chosen. This gives us a very deep green, which I like.

Picking Utility Colours

The above three selections provide a good base of colours to work with, but even the most minimal app will need more. With that in mind, I’ll also select some utility colours

Warning/Alert Colour

When something goes wrong, the user often needs to be alerted of something they need to look at. Like a poisonous frog in the jungle, I want to make sure this colour stands out from everything else.

My Airfoil Satellite mockup doesn’t show error states, but most apps will need them at some point. I selected it both because it’s bright and because it will stand out from the key orange colour.

Disabled Colour

Elements in our key colour also often require an alternate “disabled” mode. For this, I generally use a moderately-desaturated version of the key colour, rather than a flat grey. It’s related to the key colour, but slightly washed-out.

For this, I’ve taken the key colour and desaturated it from a bright peachy orange to a more muted tan.

Choosing Alternate Colours

The above is a good base of five main colours, but this interface requires additional options.

Secondary And Tertiary Content Colours

These next colours will be used for supplementary bits of text, icons, and a few other things. In the app’s hierarchy of content, these colours will be used for the less essential, but still important, elements in the design. This is content that should be legible when focused on, but it should also slightly fade into the background, rather than calling attention to itself.

To make these colours, I combine my base colours somewhat like a painter mixes paint. I usually do this by literally putting one colour over the other, and reducing the opacity of the overlaid colour until I get a hue and brightness I like.

This is functionally the same as selecting a colour on a gradient between two primary colours. Here are secondary and tertiary content colours presented on a gradient that goes between two of our primary colours:

Alternate Background Colour

This design will also need a colour to use in the background in places where elements should be subtly grouped together. This colour should be close to the primary background colour, but different enough that people can differentiate it.

For this, I’ve taken the primary background colour and brightened it by about 10%-15% for use as the alternate background colour.

A Colour Mixing Note

One important note here: If you’re mixing with desaturated colours (including black or white), you might find the result looks a little less colourful than desired. I often find that I need to boost the saturation of the resulting mixed colour manually.

In Sketch, my design app of choice, colours farther to the right in the colour picker are more saturated, and colours to the left are less saturated. If your initial result is a bit dull, pick something a little to the right of it instead.

Trying it Out

We’ve now got a comprehensive set of colours, which should handle just about any job, at least for this app. Let’s look at all of our colours together:

Even though orange and green might be expected to clash, this entire group looks relatively harmonious, mostly because it was all derived from just three primary colours.

This gives us our final colour looks when applied to Airfoil Satellite for iOS.

And there we go, a solid re-colouring of our existing interface. Not all the colours I selected are visible in this screenshot, but when designing an entire app, it’s very helpful to have them picked out ahead of time. We’re not currently planning on actually overhauling Airfoil Satellite, but the above provides a great example of how colours that might seem to clash can work harmoniously.

Give It a Go Yourself

The process I’ve outlined can be used when designing an app, a website, or almost anything. I find starting with a colour scheme makes the rest of the design process much easier. I hope it helps you with your own work.