Steps to creating and applying colours to a mobile app | Colour theory Pt-9

From Greyscale to Vibrant: Applying a Colour Palette to a Banking Mobile App

Apr 04, 2023

Introduction

In this exercise, we will create and apply colours to a banking mobile application. Download the Figma file here.

Here is the website design of the same without any colours(in greyscale). Greyscale helps to create visual hierarchy in the website, before applying the colours.

Selecting colours for colour palette

Follow the steps as it is mentioned in the previous blog here to select colours for the colour palette for this mobile app with following parameters:

Colour Harmony: Monochromatic.
Primary Colour: Since this is a finance app, choosing blue colour to give a sense of trust and safety. The primary colour could be #101B61
Neutral Colours: Dark grey, Light Grey and White.
Semantic Colours: Used for warning, error, success and information. In this mobile app we have following information and error messages:
- “The password you entered is wrong!”
  - Colours: Red: #E55050 and two tints(add white).
- A Warning symbol ( ⚠️)
  - Colours: Yellow #F2C218 and one shade(add black) and one tint(add white).
Chart and Data Visualisations: Select a series of colour and check it with grey scale to ensure that they have a distinction in colours next to each other for user to easily distinguish different data points. Here is what it means for the colours I selected.
Series of colour with distinction next to each other for charts
Full colour palette
Colour palette with all the colours selected
Now, start applying these colours the mobile app design file following the rules stated in Colour Theory Part - 5 and Colour Theory Part - 8
Applying the colours
After applying the colours, here are my results.
Validate accessibility
Validate the accessibility of the design by the following which is explained in detail in colour theory part- 8
- Contrast Ratio
- Colour Blindness test
Download the resultant Figma file here.
Summary
In this series of colour theory, we have seen the following:
After reading through this series of blogs, you should have sufficient knowledge to get started with choosing colours and applying them in your design.
Follow this blog to learn the workflow to design your website/mobile app from scratch using any design tool.
Most of the work discussed in this blog series was done using Figma.
Other useful tools:
- To create colour palettes:
- Colour Accessibility plugins on Figma