How to select colours and create colour palette for your design with good colour contrast | Colour Theory Pt-2 |
Colour characteristics, harmonies and contrast
In any great product design, creating a perfect colour palette suitable to the product’s theme and idea plays an important role to permeate it through out the product experience.
In this blog we will see the basic concepts to create a colour palette using the colour characteristics and harmonies and importance of colour contrast in the design.
Colour Wheel
A colour wheel is a tool in which the colour hues are arranged around the circle(0–360°) in a manner to show the relationship between the primary, secondary and tertiary colours.
The primary colour in the colour wheel are
Red
Blue
Yellow
The Secondary colours are obtained by mixing the primary colours they are
Green
Orange
Purple
The tertiary colours are obtained by mixing the primary and the secondary colours they are
Yellow-Orange
Red-Orange
Red-Violet
Blue-Violet
Blue-Violet
Blue-Green
Yellow-Green
This colour wheel was invented by Sir Issac Newton.
Different types of colours
Now we know the basics of colour wheel, how do we know which group of colour is suitable for our design? This major classification of colours could be a good place to start.
There are two types of colours
Cool Colours
Cool colours represent
Water
Snow
Sky
and they represent characteristics of
Calm
Soothing
Refreshed
Warm Colours
Warm colours represent
Heat
Sunlight
Friendliness
and they represent characteristics of
Energetic
Exciting
Cozy
Now, depending upon the brand’s characteristics, we can go for either one of the choices above. For example, if brand offers exciting and fun activities as a service, we can go with warm colours. Conversely, if the brand is all about trust, safeness and professionalism, use the cool colours. So the colour should reflect the brand’s personality!
Neutral Colours
In addition to these two groups we have neutral colours.
White
Black
Brown
Gray
These colours don’t appear in the colour wheel and they are used as the background colour as they compliment and highlight other colours pretty well. If using plain neutral colours as the background is not so interesting we can add a hue and little saturation to it.
Colour Harmonies
Now, how to use colour wheel to create the colour palette keeping in mind the characteristic of the brand.
Following are the type of colour harmonies which can be used to create a colour palette
Monochromatic
Uses only one colour and hue.
They are usually guaranteed to work well together.
Complementary
Take two opposite sides of the colour wheel.
Example: Blue and Orange, Yellow and Purple
Great for the high contrasting colours in the design.
Split-Complementary
Takes colour from either side of the complement.
This allows to use different colours to work with while keeping the same contrast.
Triadic colour scheme
3 colours which are evenly spaced and form a triangle on colour wheel.
These are usually vibrant and you have to use this scheme appropriately.
Tetradic
2 sets of complementary colours and forms a rectangle.
This colour scheme works great if you use one colour as a main colour and others as accent.
Creating Colour palette
To create colour palette, apply shades, tints and tones within colours and create variations using the saturation and value in BSV colour scheme!
More about BSV colour scheme: https://medium.com/@abhishekbm/colour-theory-pt-1-colour-modes-and-colour-ingredients-f72c18a98749
For example, if the colour scheme selected is Monochromatic and the primary colour is blue, the colour palette will look like this. We will see more about creating colour palettes in a separate blog in detail.
Colour Contrast
Now after creating creating the colour palette, next step will be to place the elements on the art board and apply the colours. While doing this, colour contrast plays an important role with respect to the visibility/readability of the content.
Colour contrast is the difference in light between the foreground and background. To adjust the colour contrast, modify tones, tints or saturation of the colours.
Contrast ratio
Value assigned to difference in light between the background and foreground.
Greater the contrast ratio, better the readability.
Tips to incorporate good contrast ratio
Never use pure black and pure white and vice versa as it causes digital eyes strain.
- Instead use dark grey or light greyDon’t use a bright colour on a bright colour background.
- Instead use bright colour on a dark shade background.Always check your colours to dark and light background
- Sometimes you need to adjust the contrast ratio for the other background.Always validate your UI with the contrast ratio test.
Next Steps
Stay tuned for next part which talks about some real world examples of the colour harmonies that are explained in this blog.
Resources and References
Skillshare course by Arash Ahadzadeh — Create Amazing Color Schemes for Your UI/UX Design Projects
Figma for design.