If none of the predefined colour palettes suits your brand, you can create your own custom palette in Loopia Sitebuilder. Predefined palettes are put together by professional designers, so you don’t have to pick and combine colours yourself – but a custom palette lets you match your brand exactly.
About colour palettes and colour customisation
Each palette consists of six complementary colour schemes. When you change a colour in one of the schemes, it’s applied automatically to every block with the same colour scheme across your whole site.
Note: full palette customisation requires Sitebuilder Large. On a basic plan you’re limited to setting the six base colours of the palette, which are applied consistently across your site:
- Colour 1 – for light (white) sections
- Colour 2 – for grey sections
- Colour 3 – for dark (black) sections
- Colour 4 – for neutral or mixed blocks (for example dark grey)
- Primary colour – for buttons, highlights and key interactive elements
- Secondary colour – for subtle accents and secondary actions
With Sitebuilder Large you get the full feature set and can change the colour of individual elements on your site:
- Typography, including the site name, headings, text links and price labels.
- Navigation links (active and default).
- Decorative elements such as borders, feature icons and social icons.
- Primary and secondary buttons – both text and background.
You see a live preview as you customise, so you can check straight away how your choices affect your site.
Customising a colour palette
You can customise the palette you like best by changing just a couple of its colours, or change all the available colours to create a completely unique palette.
Note: unlike Block settings → Appearance → Block style, where a colour scheme change only applies to the current block, changes in the Colour palette affect every block with the same colour scheme across your site.
Your current palette is always at the top of the list, with a blue tick next to its name.
Start by clicking Design in the top bar and choosing Colours from the dropdown. Then:
- Click Edit palette to choose a completely different palette or change just some of the colours with the colour picker.
- To change just one of your block colour schemes, scroll down in Design → Colours, choose the scheme you want to work on, and click its Settings icon.
In a colour scheme’s settings you can change the block background colour and, with Sitebuilder Large, the colours of key elements:
- Typography elements (site name, headings, paragraphs, links and more).
- Navigation items in the header and footer.
- Primary and secondary buttons.
- Decorative elements (borders, icons and dividers).
Note: at the top of the window you can switch to another colour scheme without going back a step.
When you’ve finished with the colours in the scheme, click Save, then Save again to confirm. The changes apply to every block with that colour scheme across your site.
Note: once saved, the palette appears at the top of the list with a new name, for example Custom palette 1. You can create several custom palettes, and they’re numbered automatically.
Deleting a custom palette
You can’t delete the predefined palettes on the Colours tab, but you can delete a custom palette you’ve created. Hover over it and click the bin icon. Your site then reverts automatically to your base palette.
Remember to save your changes and publish your site for them to show.