How-to: Apply a colour scheme to your website

In this post we run through colour application and how to assign colour to different elements on your Moonfruit website, using both Moonfruit ready-made colour themes, and your own choice of colour combinations.

Ready-made themes

Add a fresh, Moonfruit-made colour scheme to your site with our colour combination tool. Theme colours automatically assign to your website elements – including icons, buttons, links and link hover effects! We discuss themes in more detail here: Introducing Themes: Fantastic ready-made colour schemes for your website.

In the Moonfruit responsive page editor, open the right side panel if it isn’t already visible, and choose the ‘Site’ tab. Under ‘Site Colour Theme’ click the default palette to bring up our full palette collection. Simply click to select a palette, and that’s it! All your responsive page elements – including buttons, backgrounds, text and links- will change right away. What’s more, whenever you open the colour picker on any page, your pre-selected theme colours will appear at the top for quick and easy application.

Make-your-own themes

If you’d prefer to make your own colour combination from scratch, a handy tool to use is a theme generator such as Coolors. You’ll need the hex codes to add a predefined colour scheme to your website. A hex code (for example #CBEAA6) is a six character code used in HTML and CSS to specify colour. Note down the hex code of each colour in your palette.

In the responsive page editor, open the right side panel if it isn’t already visible, and select the ‘Site’ tab. Scroll past the preset site colour themes, and you’ll see a colour picker for each of your website elements – including background, text, links, buttons and icons.

Click on the colour thumbnail for any element, select the ‘Custom’ tab and paste the colours hex code in the ‘Hex’ field. Any changes you make here will be applied across all responsive pages when you hit ‘Save’.

Testing your theme

If you notice some elements not taking on your theme colours, make sure you haven’t applied colour already at element level. Under the ‘Element’ tab, click the ‘x’ next to the colour to set it to Default. It should then take on your pre selected theme colours under the ‘Site’ tab in future.

Now that you’ve applied your colour scheme, it’s time to review it across devices. Check for readability of text, location of colour, and use of white space. Does your accent colour draw attention where you need it? Is your base hue predominant on a smaller device?

Now’s the time to swap your assigned colours if necessary. If it really isn’t working out, try a few different pre-made themes or colour combinations until you get it right. Through the ‘Site’ tab it should only take a few clicks to make changes to your theme.


Make your website your own with Moonfruit colour themes – get started now with our 14-day free trial.