Color Style Guide

7 min readMar 21, 2021

Our branding agency provided us the brand guidelines for marketing, which elaborately define the use of primary colour and other neutral colour, but was that enough to work the UI/UX design of the website, absolutely not.

Challenge was to come up with colour style guide, convince the stakeholders and get it implemented in existing app. Breaking the habit of present usage of colour and introduce the new scheme.

”People decide whether or not they like a product in 90 seconds or less. 90% of that decision is based solely on colour.”

In this quick guide, i will tell my journey of creating the colour story for my company. Color is very subjective, and through logics only we can convince our stake holders, and it worked for me. Let’s begin!!

An ecological valence theory of human colour preference

Color preference have focused on psychophysical descriptions, but there is no proper explanation why people like the colour they do.
Color preferences stem from the signals that colours convey to organisms in nature(e.g., the colours of a poisonous toad deterring predators, finding ripe red fruits and berries against green leaves)
Psychologists link it to the very evolution of humans; connections with certain colours developed after years of associating them with particular objects. (A blood red, for example, puts people on alert for danger nearby; the browns of dirt and rotten food tend to be unappetising.)

Methodology

Brand colour
Deriving colours from colour wheel
Categorising the colours into semantic colour/s
Checking the colour accessibility
Creating the variations of colour

But before we start lets do little warm up with following theories:

Primary colour and Accent colour

Source: https://blog.prototypr.io/basic-ui-color-guide-7612075cc71a

60:30:10

Breaking the rule?

Step 1 — Knowing the Brand Colour

A agency works for us, taking care of marketing needs. They provided the brand guidelines and below is one of the slide from it.

if we notice, there is no pure black(#000000) is been used here and none of any new brand is using that too.

Black is derived from the primary colour to give harmony.

Step 2 — Checking the contrast of Primary colour

Use various plug-in and tools available for to check the contrast.

Brand Designer took care of the primary colour contrast on neutral colours. (If, its not as per standard get hold of them:)

Step 3 — How to chose associating colour?

“Can we choose **Ochre Yellow** and **Emerald Green** as accent colour?”

Choosing an associating colour could be very subjective and there is no logical explanation to it. Since we are user centric product designer, we can’t slap our choice of colour to users, So let’s make more logic by introducing colour wheel.

“All colours are the friends of their neighbours and the lovers of their opposites.”

Just to validate my process, i did some case studies and benchmarking

These where inspected while doing the case study of user centric brands

Google, tweaks the colour and makes variation for multiple usage.

Deriving the associated colour from colour wheel

This exercise was done using various plugin available for colour wheel

I followed the same process and derived colours for our brand.

Step 4 — Ensuring Product is Color-Accessible

Perceivable, Operable, Understandable and Robust

Add Enough Contrast — when designing things like buttons, cards, or navigation elements use this tool
Don’t Rely Solely on Color
Focus State Contrast

In year 2008, W3C has released a guideline called as Web Content accessibility guidelines, to make the content accessible to wider range of people with disabilities. Including blindness and low visibility.

The main terms used in guideline was Perceivable, Operable, Understandable and Robust. To achieve the same I have several tools available online to make chosen colour accessible and tweak it if needed.

Guideline also provides few suggestions which we can use in our case where our main colour looks red. Like don’t completely rely on red colour for error and focus state contrast.

Colour tweaking

Above palette was achieved after the tweak. In the above my focus was more on to come up with feedback/semantic colour i.e., red, yellow and green. Cyan and magenta are kept intense and bright so that we can used it as another accent colour for highlighting offers or other business propositions. It’s wide know fact that bright colour attracts more than dull and dark colour. For example Swiggy or Flipkart.

Case study to support the tweaking theory

Swiggy — To support my recommendation of Cyan and magenta colour to be more bright, where it might not achieve the required contrast, I did these case studies. These screenshots are taken from Swiggy where their accent colours are not achieving the contrast needed.

Same for the MakeMyTrip. It close but to make their component stand out, they have kept it bright.

Step 5 — Finding the edges

After doing the above assessments, I was able to derive more conclusions from the chosen colours. Like green for success with required contrast. Using the element with error message because it’s more of like red. And yellow could be accessible even without req contrast, but I have provided the options to choose from. So my accessible colours are done here

As per the study, it needs to have least 5 shades per colour, and probably closer to 10 if you don’t want to feel too constrained.

Here is example of colour variations and its uses

Step 6 — Deriving the variation of colours

Hue of the primary colour is kept constant and saturation and lightness is adjusted to get the variations.

https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=6002ee

There are several tools to create the variation of colours, the one I have chose is from Material design. I also did experiment with other tools but the results were same. Tools basically keep Hue constant and increase and decrease saturation and brightness to give wide range. This is good practice, but I have observed that few times it does not give the desirable results, we can manually change the numbers to achieve our desirable colour.

Darker colour variations are made by lowering brightness and increasing saturation.
Brighter colour variations are made by increasing brightness and lowering saturation

Primary/Accent Color Uses

Color theme for app, including dark and light primary color variants.
Distinguish elements within a component, such as the icon of a floating action button from its circular container.
Active CTA/links

Grey Color

Color theme for app, including dark and light primary colour variants.
Background CTA, top banners

Conclusions

Color Contrast

Consistent — Color should be applied throughout a UI consistently and be compatible with the brand it represents.
Distinct — Color should create distinction between elements, with sufficient contrast between them.
Intentional — Color should be applied purposefully as it can convey meaning in multiple ways, such as relationships between elements and degrees for hierarchy.

So I want to conclude this discussion by focusing on consistency of our chosen colour through out or brand, colour should distinct the elements using contrast and also the bright colour with out the required contrast should be used intentionally to highlight business or creative propositions.

The intensity of a colour is also known as saturation. A colour in its purest, brightest form is 100% saturated; the closer it approaches to grey, the more desaturated it is. Using bright or muted colours (either by themselves or together) can be a strategic way to create places of high or low contrast in a design. Bright colours always attract attention, especially against black. Use them sparingly to highlight important parts of your design.

Color Contrast for Text

What as changed in our app?

Currently we are using #212121, changing it to 231f20
Secondary colour for hyperlinks, yet to decide from palette
Micro interaction — In KRA