EPISODE:
4

  

PRIMARY COLOURS


To select your website colours, first head to the 'Main Menu' icon at the top of your website and click 'Styles', then click the Colours Tab at the top of the Page.


Series 2. Episode 1: How to Play with Primary Colours


What are the Primary and Secondary Colours?

The Primary colour is the main base colour of your brand, the Secondary is the colour that 'pops' on top of the base colour.

Primary can often be thought of as the main background colour.

  • If this was Facebook it would the blue.
  • If this was McDonalds it would be red.
  • If this was Ikea it would be blue

Secondary can be thought of as the colour that pops on top of the background.

  • If this was Facebook it would be white. 
  • If this was McDonalds it would be yellow.
  • If this was Ikea it would be yellow.

 


What do the Primary and Secondary Colours do?

The Primary & Secondary colours help you to achieve the following:

  1. Gain initial inspiration for how your main brand colours might look together. Once you've picked your colours you can use the 'Sync Colours' button to update the Primary and Secondary Colours across your entire website in an instant. This helps you quickly achieve a nice contrast of these two colours and decide if the colours are right for your brand. You can, of course, continue to tweak each colour separately, which we will cover in the next Episodes.

  2. Your Primary Colours also define the base colours that are used in your Dynamic Layouts. You will experience this in the Page Editor when you drag in new layouts and drop them on to the page. These colours give you a quick headstart with your Layouts, though of course, you can make edits and save your layouts as you go. 
  3. Primary and Secondary colours are a key part of your website CSS and can be selected in Buttons and even site animations such as hover effects.
 

Let's see this in action

In this Series, we are going to create a website for a Demo brand called 'Fictico' and here you can see the colour palette for the Fictico brand.

Blue is the Primary Colour and Yellow is the Secondary Colour that pops on top of the Primary.

STEP 1

To make this easy for you, if your brand has a logo or colour palette, you can drag and drop an image containing this colours anywhere on to the page, or you can click the Brand Palette area to select the image from your computer. MOBLE will then instantly pick your colours for you. If you don't have brand or colour palette at this time, you can simply drag and drop any image on to the page that contains colours that you might like. As soon as you drop the image on to the page a website colour combination will instantly be created for you. This is a great way to get started quickly, you can keep dropping images on to the page as an accurate form of visual design inspiration.

STEP 2

Now you can start to customise your website to make it your own. In this case, I would like the Primary Colour to be blue and the Secondary Colour to be yellow. You can see that these colours have been picked from the image that you dropped on the page. Other colours have instantly been added to the colour picker. To view these you click on the  Primary and Secondary colours square. You can now select the colours that you prefer at any time.

STEP 3

Now that Primary and Secondary colours have been selected you can click Sync button. The Primary and Secondary colours will then automatically update across your website entire website CSS in the most logical way. The Sync algorithm aims to save you time, but of course, you can go ahead and tweak the colours for individual elements to create the precise look that you're after.

STEP 4

To offer a contrasting view of your colours, and serve as some initial additional inspiration, you can also toggle between Light and Dark vibes to get a feel of alternate ways that your colours may look.


All this, of course, aims to offer initial inspiration. Next, we look at the more granular elements of CSS colours, as we focus specifically on the colours of your Header, Function Colours, Accent Colours and finally your supporting colours that appear in your website colour palette through your website.