A new take on creating colour palettes with Sketch

One of my earliest blog entries, all the way back in May 2004, was about a favourite technique for creating colour palettes. It was a technique which I’d used for years, even then. Now I have a new take on creating colour palettes, it’s time to revisit that topic.

From my original article

  1. Start by making a white Fireworks canvas and then add a 250 x 50px black rectangle to the base layer.
  2. Create two 50 x 50px squares and fill them with a colour, sampled from a logo graphic or photograph. Place these squares over the black and white bases.
  3. Duplicate these squares and adjust the opacity of each square (usually 100%, 75%, 50%, 25% and 10%) to allow progressively more of the base colour to show through.
  4. This creates ten tints from a single colour and is easy to replicate for further base colours.
Creating colour palettes Creating colour palettes
Original technique left–right

Multiple background fills in Sketch

I used Macromedia Fireworks in 2004 (and for years after,) then—because it’s hard to teach an old dog new tricks—I used Sketch in exactly the same way until recently.

Sketch now simplifies my process because, unlike Fireworks, it enables me to add multiple background fills to any element. This means I no longer need the black and white base layers and can use single square per tint.

Using Sketch to add multiple background fills
Using Sketch to add multiple background fills

Improving my technique using blending modes

My favourite technique has served me very well for years, but I did learn along the way that essentially adding black and white to my colours would often make them appear a little flat.

Recently, I’ve been experimenting with a new technique using multiple background and blending modes—specifically Multiply and Screen—in Sketch and I have to say, I like the results a lot better. Here’s how my improved technique works to create a series of gradually darker tones from a single colour:

  1. Create a shape and add a background colour fill
  2. Duplicate that shape and add another background fill using the same colour as before, this time setting the blending mode to Multiply
  3. Repeat by adding another ‘multiplied’ background to each new duplicated shape to build a series of connected colours
Using Sketch to add multiple background fills
Using Multiply with multiple background fills

To create a series of lighter colours, switch the blending mode from Multiply to Screen.

Using Sketch to add multiple background fills
Using Screen with multiple background fills

Comparing colour palettes

I find the colours I create using blending modes are richer than those using my original technique.

Comparing colour palettes
Top row: My original technique. Bottom row: Using blending modes to create colour palettes.

There you have it; a quick but useful update to creating colour palettes. Have some fun with it and a happy Monday.

 
Experience EXPERIENCE

Working with clients for over 25 years

Blogging BLOGGING AND ALL THAT MALARKEY
Speaking SPEAKING AT INTERNATIONAL CONFERENCES
Articles ARTICLES
Contact us OK, LET’S TALK

Press to call 01745 851848

go.bananas@stuffandnonsense.co.uk