Basics of the Squarespace 7.1 Color Editor

Section Theme Applied@2x.png

The newest version of Squarespace (version 7.1) changes the way you build websites. One major change is the way colors are stored and applied to elements on the page. It all starts with a very simple Color Palette, based on three colors.


The Color Palette

Changes to the Palette are reflected in all of the Themes, which means – in a few clicks – you can make sweeping changes to your whole site, fast and easy. Now, I’ve seen many people online complaining about being limited to only three colors, but trust me – it’s all you really need to create a beautifully balanced color scheme for your website.

Color Palette@2x.png

Design → Colors

All the colors of your website are controlled with a Color Palette that drives a full set of themes used on every section you make.

Color Themes

Using the Color Palette as a base, the system adds black and white to the mix, then generates a set of 10 Color Themes that can be assigned to any section you create. These themes cover a range of shades from light to dark, each with a Minimal and Bold version.

One of the themes will be marked as Default. This theme will be automatically applied to each section you create while building your site. The Default Theme is selected in this view (Design → Colors), and is outlined to indicate its status. To change the Default, just click on your preferred Theme.

Customize any Theme (after dialing in your Color Palette first) by clicking the pencil icon for each Theme (shown while you hover your mouse). You can really tweak those colors to exactly what you want … each Theme contains colors for all major section elements like backgrounds, headings, text, and buttons.

Sample palette with themes

Section Themes

Section Colors Tab@2x.png

Section Colors

While creating or editing a section on one of your pages, the Colors tab reveals the applied color theme. Unless it’s been changed, the default theme will be enabled.

 

To apply a different Color Theme to any particular section, click the pencil icon to edit the section, then click the Colors tab. Disable the default theme to unlock access to all 10 available themes.

With this new, layered approach to colorization, you can make big changes to your websites look with very little effort. What took hours in previous versions, now only takes minutes.


Learn more in this Squarespace Help Article →

E2A Studio

E2A Studio is a Squarespace design agency specialized in building beautiful, impactful websites. Work is focused on helping individuals & small businesses own their web presence.

https://bio.site/e2astudio
Previous
Previous

How to Use the Inter Font Family on Your Squarespace Website

Next
Next

New Squarespace Version Quietly Released