Atomic Smash homepage splash

Quickly preview colour variants in Sketch designs

Words byBen HamiltonAugust 10, 2018

an illustration depicting two colour swatches

During the early stages of a web design project, I find it useful to try out different colour options for the various elements that make up a page design. If you’ve already fleshed-out a design that uses one or more colours prominently for things like buttons, rollovers, calls-to-action etc. then here’s a nice trick that will let you quickly preview colour variants in Sketch.

Two design options side by side with different shades of blue

In the file above, I wanted to tweak the shade of blue I had used on the left and try out something darker like the blue on the right. Having already set up a large number of fiddly design elements such as dropdown arrows, radio buttons and check boxes it would have been a time-consuming process to manually go through the file and adjust the colour. Luckily, I was able to swap out everything that used the lighter blue in a matter of seconds. This is how I did it using the ‘find and replace colour’ command in Sketch:

Setting up the file

The first thing to do is add the alternative colours you’d like to try to your document colour palette. I usually create a number of small squares to the side of the artboard with the shades I want to preview and then simply add these to the document colour palette by choosing ‘fills’ and clicking on the little ‘+’ at the bottom of the menu:

The Sketch colour palette

Replacing the colour

After this, it’s largely an automatic process to try out your other swatches.

  • Select any object that is the colour you wish to change, then navigate to ‘Edit > Find and Replace Colour…’
  • Your first colour should already be highlighted in the ‘Find:’ dropdown
  • Choose your second colour from the ‘Replace with:’ dropdown
  • Click ‘Replace’
Sketch Find and Replace Colour command
Sketch Find and Replace Colour command

Hey presto!

You’ll see that this catches all instances of the first colour, and even applies to any symbols that you might have created.

It’s worth noting that because the command replaces every instance of a given colour across all artboards (including locked items and those on different pages), it’s not possible to repeat this trick in a single Sketch file and retain your colour versions side by side. You’ll either need to export a jpeg of each colour option or create duplicate sketch files so that you can keep a record record of your tests and share them with your team and/or the client.

Sketch Find and Replace Colour command

I hope this little trick helps you to save time in your design tests, and if you have any comments, questions, or other tips and tricks you’d like to share with me, please leave a comment below.

Related Content

Profile picture ofBen Hamilton

Ben Hamilton

As the designer at Atomic Smash, Ben stays up-to-date with the latest trends and keeps a close eye on the visual details of a project.

Go back to top

Keep up to date with Atomic news