What does a great movie and a great app have in common? — Colour Palette

It’s hard to believe for those who aren’t well versed in movie making, but movies do have a colour palette — just like apps. When done well, the colour palette is seamless and adds to the story, when done badly, it can look garish, distract the audience.

There are a lot of different styles when it comes to choosing a colour palette for a movie. I’m going to limit our discussion to just a few ways cinematographers and directors use colour palettes and hopefully show how this is analogous to building web or mobile apps.

Building a palette involves selecting a limited range of colours from colour spectrum. If you have a hard time believing that colour can be use to add to a narrative, then consider this screen grab from American Beauty (1999).

American Beauty (1999)

Notice how colour red, is being used to as a separator between the characters. The rest of the muted pallet give a feeling of distance and coldness at the dining table. If you have seen the movie, you know all these emotions exist consciously, but in this scene Sam Mendes (director for American Beauty) and Conrad Hall (Cinematographer) do an amazing job of portraying the family’s dynamic using colour.

This is not unlike what websites and apps do. Have you noticed how so many retailers use black and variations of black in their websites or apps? The colour black is associated with elegance, power, mystery, and wealth. This is so ingrained in our heads that fashion brands take advantage of it all the time. Just to give you a few examples:

  • THE ICONIC (Australian retailer)
  • ASOS
  • GILT
  • Harrods
  • Chanel
  • Bottega Veneta
  • Armani

All the above are just a few examples of brands that use the colour black as the primary colour. This is akin to a “selected saturation” palette in movies where everything is in black and white except for a focal object that gets the most vivid of colour. An example of such a movie is “Pleasantville” (1998).

Pleasantville (1998)

Director Gary Ross and cinematographer John Lindley draw your attention to the character in full colour, the colour portrays the emotions of the character while everything else is given less priority on screen. This is no unlike what you will see if you open a fashion retailers site. Take a look at the screen grab from theiconic.com.au.

theiconic.com.au

Everything is in black and white except the models. Also notice here that the models have an orange glow to them. This is used to portray warmth. It’s winter in the Down Unda’ and they know you are looking to stay warm. In movies, an example of this would be one of a limited palette. In “Do the right thing” (1989) everything appears to be red, orange and dusty to contribute to the feeling of a heatwave.

Do the Right Thing (1989)

Take a look at this screen grab from the Gilt shopping app. Its summer in the Northern hemisphere so all the colours convey a warmth.

GILT app for Android

There is plenty of black there to make us feel like what we are looking at is high-class and desirable, the highlights use the colour yellow/orange. This is no accident and is not a random choice either. Yellow is associated with clarity, warmth and optimism where as orange is friendly, cheerful and confident. Ever wonder why the “buy now” or “add to cart” or “Pay with Paypal” buttons are almost always yellow? They are meant to make you feel good about your decision. Colour scheme can be used to great effect to influence how you should think or feel about an object or character. For example, green is envy, red is caution. You may see examples of this in retails apps, ever wonder why sale banners so often have red in them? It’s meant to make you feel nervous about missing out.

Material design encourages you to have a primary colour, secondary colour which is usually a darker or more saturated version of the primary colour and a contrasting colour which is meant to draw attention to or highlight things. So, realistically, you have 2 colours in this scheme. To me, this is an example of a “complementary” colour scheme. This is where you pick a colour and pair it with it’s opposite. Surprisingly, even though this may look “ugly” it actually meant to make things look compelling!

Action movies use this to great effect with the hideous orange-teal look.

CINEFIX

People actually complain a lot about this colour scheme because it seems to make things look fake. Yet it endures. Take a look at this screen grab from Transformers. The orange is very obvious, but there are highlights or teal.

Now, if you are looking at the palette above and thinking, “That colour palette could never work” or, “That colour palette is ugly and any app that uses it is likely to win the Darwin award for taking itself out of circulation”… well, to you I say… Amazon!

Amazon app on Android

If you’re like me (and one hopes you’re not), you just had an “oh shit” moment, where you’ve just gone from thinking that something is ugly and there is no way you can find it compelling, to thinking… “How badly am I being manipulated?”.

Finally

I hope you enjoyed this article. This article was inspired by an amazing YouTube video “10 Best Uses of Color of All Time” by CineFix. The video is linked below and I strongly encourage you to watch it.

As always, in order to build great apps, read more of my articles.

Yay! you made it to the end! We should hang out! feel free to follow me on Medium, LinkedIn, Google+ or Twitter.

A software engineer, an Android, and a ray of hope for your darkest code. Residing in Sydney.