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?

I use Google’s Material Design colour system. It’s simple: pick a primary colour and an accent colour. That’s it. Everything else is either a shade of the primary or accent, or grey.

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

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.

Blacks and whites of prescribed opacities complete the Material Design colour system. For example, primary text is black with an 87% opacity. That slight transparency lets the underlying colour leak through, providing a more pleasing overall appearance.

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

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.