System updates

We’re experiencing issues that may affect your Square services. We’ll continue to update our status page with more information.

Home>Site Design and Content

Choosing Website Colours in Square Online

Want the colours on your website to match your company logo? No problem – you can customize the colours for your site to get just the right look.

Select Main and Accent Colours

Click the Site Design button in the website editor to open the settings.


Click on the main and accent colour buttons to choose one of the preset colours, or use the colour picker to select a different colour. You can also enter the hex code for a specific colour.

Edit Advanced Colour Options

Once you’ve set your main and accent colours, you can choose custom colours and set the default colours for your site background and buttons. Click the settings icon to open the Advanced colour options.


The background and button options update when you change the main and accent colours, and the button colours adjust according to the background color you choose. For example, selecting black as the background colour removes that option for buttons. Play around with the colour swatches to see how they affect one another.

Applying Colour Choices to Sections

Your global colour choices automatically generate a set of complementary colours and neutral shades. You can use these to further customize page sections.


While editing a section, select Customize and click on a tile to change the colours for that section. The colours on the tiles correspond to the section background, text and button colours, as shown in the image above.

Can't find what you need?