How to Pick Colours For Your App Prototype

The purpose of an app prototype is not to establish the app's final visual design. But I don’t want my prototypes to be black and white, either. So how do I establish a colour palette quickly, without getting bogged down in colour design?

When establishing a colour palette, Google’s Material Design colour swatches are a great place to start

For Snapwork, I chose blue #0C2A89 as my primary and yellow #FEC314 as my accent. For both the blue and the yellow, I also pick a more intense and a more faint hue. That leaves me with 6 options in my palette.

A prototype using a completed colour palette based on the Material Design colour system

Here is my final palette:

Primary blue (regular, intense and faint)

Accent yellow (regular, intense and faint)

Translucent blacks (87%, 54%, 38%)

Translucent whites (100%, 70%, 30%)

I add all these colours to my colour picker in my prototyping application, and I’m ready to go. It may not be sufficient for every design situation, but it’s fast and it covers most situations. For great DO and DON'T suggestions on using this colour system, see the Material Design documentation.