Choosing Website Colors in Square Online

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

Select Main and Accent Colors

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

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

Edit Advanced Color Options

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

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

Applying Color Choices to Sections

Your global color choices automatically generate a set of complementary colors 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 colors for that section. The colors on the tiles correspond to the section background, text, and button colors, as shown in the image above.