How to create a colour palette with tools and apply it to a website | Colour theory Pt-8
Step by step process to create a colour palette and apply it on a website.
In this exercise, we will create a colour palette and apply it on a sample website which can be downloaded from here. The website is about an imaginary company called Draft which provides essential services to entrepreneurs like insurance, software development, etc.
Here is the website designed following all the guidelines but in greyscale, to which we will start applying colours.
Creating Colour Palette
Let’s create a colour palette from one of the tools mentioned in the previous blog: Adobe Colour. Follow this blog for detailed reference.
I am going ahead with analogous colour scheme as there are no illustrations in the site. We can also go ahead with monochromatic.
Primary Colour:
Since this is an insurance company, I am selecting “Blue” colour as it gives the sense of trust and professionalism.
I am selecting the colour of the logo #193CBD as the primary colour for the website, which is also coincidentally a blue.
Create a colour palette in Figma and assign value #193CBD to a swatch.
Secondary Colours:
In the tool, “C” is the base colour. Apply #193CBD to it.
I am selecting “A” and “D” colours as secondary which are #4C10C9 and #116ED4.
Selecting primary and secondary colour may not work at the first time, we may have to reselect it based on the background colour which we will create later. The colours mentioned above are reselected after knowing that they have good contrast with the background colour.
In Figma, create two more swatches and apply above two colours.
Accent Colour
Change the colour scheme to custom and colour mode to HSB.
Following our thumb rule, increase the hue by 40 and brightness by 10 to the base colour in a separate swatch on the tool, here I have done it on D.
In Figma, create a swatch and apply #701CD6.
Background Colours
Background colours can be created by decreasing the saturation and increasing the brightness of the primary colour.
In our case, let’s decrease the saturation to 5 and increase the brightness to 100 as one of the background colours.
Neutral Colours
Adding the following neutral colours:
Grey
White
Black
With this we have our colour palette completed.
Naming Conventions
Follow the naming convention as we have already discussed in our previous blog:
{usage of the colour}/{variations}
In our case it will be:
Primary/Blue
Secondary/Dark Blue
Secondary/Light Blue
Accent/Purple
Background/Light Pink
Neutral/Grey
Neutral/White
Neutral/Black
Now that we have the colour palette ready, we can start applying those to our website.
Applying the colours to the website
Applying main BG colour
Let’s start with background colours as it is going to pop other colours up making it easy for us to continue adding other colours.
Apply Background/Light Pink to the background of all the frames(header, footer, hero section, and everything).
Applying primary colour
Let’s apply the primary colour Primary/Blue to the main texts such as the navigation bar, headings, etc.
Applying secondary Colour
Let’s apply Secondary Colour Secondary/Dark Blue to all the sub texts.
Let’s apply secondary colour Secondary/Light Blue to all the inner texts and to some icons.
Applying accent Colour
Let’s apply the accent colour Accent/Purple to the CTA buttons and Neutral/White to the button text for good contrast.
Background Colours of the testimonials and the app featuring section
Lets apply Neutral/White to the background colours of the testimonials, reduce the opacity of the “quotes” for better visibility and apply the same to the app featuring section.
Validate accessibility.
As we know, accessibility can be measured by the contrast ratio of the contents. Basically the website should be readable by the users for that we should have a good contrast ratio between the texts and the backgrounds. Next, there should be good visual hierarchy for users with colour blindness to understand the contents.
Contrast Ratio
To get the contrast report, based on AA and AAA WCAG conformance, in Figma, install the plugin “Contrast”.
Select the frame of the design and then right click > Plugins > Contrast
Go to Scan > Start Scan
If there is a no issues found checkmark, then the design has passed the conformance and has good text visibility. If not fix the individuals by clicking on the failed tests.
Colour Blindness
To validate our design for people with colour blindness, in Figma, install the following plugins:
Greyscale
Colour Blind
Right click the design frame and Plugins > Greyscale
See if we have a good visual hierarchy with Greyscale.
Undo(ctrl/cmd + z) to get the colours back.
Now run the plugin “Color Blind”.
You can select the different kind of colour blindness and click “Create Views”
The plugin will create a view for each of the colour blindness which will help us to know if the person with that disability has a good visual hierarchy.
Once these validations are done and successful, we have a clean website, with good accessibility scores.
Next Steps
In next blog we will see how to create and apply a colour palette to a mobile app!
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