Choosing Website Colors in Square Online Store

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 hashtag to enter the hex code for a specific color.

The main and accent colors you choose here will automatically generate a set of complementary colors and coordinating shades of grey that you can use when editing sections on your website. For example, the main and accent colors in these screenshots generated the color palette shown above. No matter what background color you choose, the color of the text automatically adjusts to maximize readability, so your website will always look professional.

Advanced Color Options

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

The colors choices here adjust depending on what you select. For example, if you select black as the background color, you can’t also choose black for the button color - that would make them invisible on your pages. Play around with the color swatches to see how they affect one another. Click the X icon to close the panel when you’re done, and don’t forget to publish your website to make your changes live.