USE PRIMARY COLOURS FOR AN INSTANT DESIGN


S02 | E05 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  4 min read |  4 min video

Web School Series 2 Episode 5

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW

Now that you have selected your Header and picked your fonts, it's time to choose the base colours for your Brand. You can do this in moments first with a helping hand from our AI, then you can tweak your colours manually to determine your final look.

Click the 'Colours' Tab in the Styles area and let's get started.


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 also 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 also be yellow.
MOBLE CMS Primary Colours

Primary Colours in the Colours area.


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 Palette' button. Our AI will have a go at updating the Primary and Secondary colours across your entire website in an instant. The AI will help 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 manually, which we will cover in the next Episodes.

  2. Your Primary Colours also define the base colours that are used in your Layouts. When you drag in new Layouts and drop them on to the page the Layouts will use your Primary Colours to quickly reflect your brand. These colours give you a quick head start 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

To make this easy for you, if your brand has a logo or colour palette, you can drag and drop an image containing these 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 a 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 1: ADD YOUR BRAND PRIMARY COLOURS OR DROP AN IMAGE

If you already know your brand colours the most accurate method is to type in the 6-digit hex codes and click 'Sync Palette', then save your page.

However, if you're feeling playful, you can experiment with our AI. Drop an image on to the page and our AI will attempt to detect and apply your colours for you.

MOBLE CMS AI Colour Picker

When playing with the AI, images with a small number of flat colours, like logos, work much better than busy photographs that might have thousands of colours.


STEP 2: ADJUST YOUR COLOURS

Now you can start to customise your website to make it your own.

In this example, 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 was dropped on to the page. Other colours have instantly been added to the colour palette from the image too.

To open the colour picker, you can click on the Primary and Secondary colours square. You can now select the colours that you prefer at any time.

MOBLE CMS Colour Palette

When you update you Primary and Accent colours the colour palette will remember you selections so you can quickly reapply to other elements.


STEP 3: SYNC PALETTE

Now that Primary and Secondary colours have been selected, you can click the 'Sync Palette' button. Our AI will then automatically apply the Primary and Secondary colours and automatically update your colours in the most logical combination across your entire website. The machine learning 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.

MOBLE CMS Sync Palette

Once you've selected your Primary and Secondary colours. We highly recommend using the 'Sync Palette' button and our AI will attempt to best select all of your colours for you in an instant.


STEP 4: PREVIEW AND SAVE

Now you can go on to manually play with the other elements of your colour palette. As you do always remember:

  1. As you update a colour click the 'Preview' button to view you change
  2. When you're happy with your colour click 'Save' on the top right of the page to lock down your changes


In the forthcoming Episodes, we look at the more granular elements of CSS colours, as we focus specifically on the colours of your Header, Function, Accent Colours, Supporting and Widget colours.

MOBLE CMS Colour Preview Save

Use the Preview Button to review your manual tweaks. When you're satisfied, remember to click the Save Button.

In the forthcoming Episodes, we look at the more granular elements of CSS colours, as we focus specifically on the colours of your Header, Function, Accent Colours, Supporting and Widget colours.

LAUNCH


14 DAY FREE TRIAL

MINI


12 PAGES

PLUS


50 PAGES

PRO


500 PAGES

CUSTOM


UNLIMITED PAGES