Understand this colour theory for ensuring visual hierarchy in your UI design | Colour theory Pt 6
Understand the use of colour scales and creating gradients.
What is a colour scale?
Colour scale is a scale with gradual transition of a colour from dark to light or vice versa.
The attribute change among the colours in the colour scale is “Value” among colour scheme.
More about colour scheme here: https://medium.com/@abhishekbm/colour-theory-pt-1-colour-modes-and-colour-ingredients-f72c18a98749
We need these colour scale for a colour to ensure visual hierarchy in the UI.
Having different values of colour helps us meet the accessibility standards, like using dark text for light background and light text for dark background.
What is Greyscale?
Greyscale is made by different shades of grey.
A UI design could be started with just a greyscale, because we can use grayscale to act as a interim colours to the UI and focus on other elements of the design like buttons, cards, spacing, visual hierarchy, etc.
Using greyscale colour mode helps us realise how good are the contrast between the elements.
The most important information will be a darker grey than the lesser important information.
Gradients
Gradient is a gradual transition from one colour to other colour. It adds character and personality to the design.
4 different types of gradients
Linear
Radial
Angular
Diamond
Linear is the most popular gradient method. The simples way to create a gradient is by using the analogous colour scheme to select colours to the opposite end of the linear line. Here are the steps to create gradients with https://coolors.co/.
Go to: https://coolors.co/
Under tools in the top right, select “Create a gradient”
Select the first node and select a colour for the gradient
Copy the colour code
Select the second node and paste the colour code copied from the previous node.
Now, adjust the colour by moving the hue value to either right or left analogous colours. Could also adjust the brightness if needed.
Next Steps
To understand better, see how different gradients of colours help achieving the visual hierarchy in a website. Also try creating gradients using the
https://coolors.co/
site.
In next blog we will see about the naming conventions for colours, colour accessibility and some tools to create colour palettes!
References and useful resources
Skillshare course by Arash Ahadzadeh — Create Amazing Color Schemes for Your UI/UX Design Projects
Figma for design.
Youtube Channel by Ran Segall: https://www.youtube.com/c/FluxWithRanSegall
Youtube Channel — PiXimperfect