Understanding the Colour Palette System

Overview

Blocksy makes it very easy to set up and use colours for your designs. So easy, in fact, that understanding the colour palette system won’t take more than a couple of minutes.

For this, you’ll need to open the Colours panel located in the Customiser and the first option is the Global Colour Palette, which can be summarily described as a collection of colours that work really well together.

There are 15 colour palettes to choose from and with just one click, you can change the entire colour scheme of your website. This is very useful when you’re trying to decide what colours would look good or when you want to make an instant but dramatic change to your website.

Each colour inside a palette can be freely edited and if you plan on doing so, here’s a simple guideline to make sure you’re using them correctly:

Color 1 – the primary brand colour
Color 2 – alternative colour
Color 3 – colour used for general text paragraphs
Color 4 – colour used for headings, subheadings and titles
Color 5 – colour used for borders
Color 6 – colour used for subtle backgrounds (page hero, footer)
Color 7 – colour used for the site’s background
Color 8 – lighter alternative colour, to be used in header backgrounds

The Global Colours section lets you set the colours for different elements on your website: base text, links, text selection, borders, headings and site background. Changes made here will reflect on the entire website.

For a more granular approach, you can access the Design tab for each element, where you will find the colour options relevant for that particular Blocksy generated element.

The Blocksy colour palette integrates well with many 3rd party page builders and the colours you set in the Customiser can easily be detected by Gutenberg plugins or Elementor.

We hope we made it easy for you to pick and personalise a fitting colour scheme and if we managed to colour you impressed, drop by and let us know 🙂