← All postsPublished: Dec 6, 2024Updated: Sep 20265 min readDesign

Squarespace Color Palette: How to Change Your Site Colors

To change your Squarespace color palette, click the paintbrush icon in the top right to open Site Styles, click Colors, then Edit Palette. Change the palette colors there and every section using them updates at once.

Editing your Squarespace color palette

Click the paintbrush icon in the top right of the editor to open Site Styles, then click Colors, then Edit Palette.

You're now editing the small set of colors your entire site draws from. You can pick from Squarespace's presets or enter your own hex codes.

Change a color here and every section using it updates instantly. That's the point of a palette: you set the brand colors once rather than hunting through pages.

Keep it tight. A palette of three or four colors plus a light and a dark neutral covers almost any site. More than that and you'll end up with pages that don't look related.

How section themes actually work

This is the part that confuses people, and it's worth understanding because it explains why changing one color affects sections you didn't expect.

Squarespace doesn't apply colors to sections directly. It applies themes, and each theme is a recipe that says which palette color to use for the background, the text, the buttons and the links.

So when you change a palette color, every theme that references it changes too, everywhere on your site.

On the Colors panel, below the palette, you'll see the individual themes. Click one and you get settings for each element within it. That's how you adjust, say, only the button color in your dark sections without touching anything else.

Want this handled for you?Custom Squarespace design and development, built and handed off in 2-5 weeks.Book a free call

Assigning a theme to a section

To change one section's colors, you don't edit colors on the section. You give the section a different theme.

Hover the section, click Edit Section, and you'll find the color theme option in the settings. Switch it and the whole section adopts that theme's recipe.

This is why alternating light and dark sections is easy in Squarespace and why one-off colors are hard. The system is built around consistency, which is a good constraint most of the time.

Keeping the contrast readable

The failure mode here is picking colors that look great in the palette editor and produce unreadable text on the page.

Body text needs a contrast ratio of at least 4.5 to 1 against its background. Large headings can go down to 3 to 1. Any free contrast checker will tell you the number if you paste in two hex codes.

The usual offenders are light grey text on white, and mid-tone brand colors used for body copy. Both look refined on a big bright monitor and become genuinely hard to read on a phone outdoors.

Brand colors are often better as accents, on buttons and links, than as text or full backgrounds.

Saving and checking

Click Save in the top left and the changes go live across the site.

Then click through a few different page types, because palette changes surface in places you forget: form fields, footer links, the mobile menu, and any button sitting on an image.

Buttons on images are the classic one. A color with plenty of contrast against white can disappear entirely over a photo.

Frequently asked questions

How do I change the color of just one section in Squarespace?

Assign that section a different color theme through Edit Section, rather than editing colors on the section itself. Squarespace applies color through themes, not per section.

Can I use my exact brand hex codes?

Yes. In Edit Palette you can enter any hex value instead of using a preset.

Why did changing one color affect other sections?

Because palette colors are shared across themes, so a change flows through every theme that references it. That's the intended behavior, and it's what keeps a site consistent.

How many colors should be in my palette?

Three or four plus a light and dark neutral covers most sites. Restraint reads as considered design, and long palettes tend to look accidental.

Want a palette built properly, with contrast that holds up on a phone in daylight? Book a free call.

I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.

Don’t miss these

All posts