Guide
Important Colours
There are two main colours to choose. These are your primary colour and your background colour.
Primary
The primary colour will often be your main brand colour. It accounts for approximately 9% of the colour on your page. This is used sparingly to guide the user through th page.
Background
The background colour of your website is approximately 90% of the screen. Therefore background colours will usually be white or a pale shade of another neutral colour.
Secondary
The last colour is the secondary colour. This is sometimes referred to as the accent colour. It should be used very sparingly to make your user focus on something. This colour should compliment your primary colour. Many websites will not have a secondary colour.
Secondary
The secondary colour of your site typically accounts for 1% of the colour on your page. Some brands have an accent colour which would be your secondary colour.
Action Colours
Your site may also use action colours. These are colours that symbolize a state. For example you may have a red button to display to a user that clicking this button may cause something destructive. A lot of websites will not use these or will only use the error colour.
Success
Confirmation that the action has been completed successfully e.g. your form has been submitted, or the record has been updated etc.
Warning
A warning or an alert will usually ask the user to confirm their action e.g. are you sure you want to submit the form again?
Error
An error message will inform users that something is incorrect or missing e.g. Invalid password or a record could not be saved
To choose a colour click on a button within the left side bar. A popup will appear where you can choose the colour. Drag the the slider on the right of the popup to change the hue. You can click the rest button if you would like to reset the colours back to their default values.
Below is some example page content so that you can view your colours on a real site
Colour Selector
Example content to view your colours.
Why use a theme generator?
Visualisation
This page is aimed to help you visualise your colours in a more relistic setting.
Avoiding mistakes
Avoid common mistakes by seeing the potential issues on this demo site, allowing you to avoid costly changes in the future.
Reduced complexity
Creating a theme is complex, but hopefully this will make the proccess a little easier for you.
John Real-Person
It's good you should use it.
Alice Not-Fake
I'm not a real person.
Real Human
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, incidunt!.
★
★
★
★
★
★
Once you are happy with your colours Choose you components
You can always change your colours later, even once you have finished selecting your components.
Any changes you make to the components will also be displayed on this screen.