How to Use the Squarespace 7.1 Palette Editor to Change Sitewide Colors (Step-by-Step Guide)
When rebranding or styling a Squarespace 7.1 website, manually adjusting colors section-by-section can take hours. The fastest way to establish a cohesive brand identity across your entire site is through the Squarespace Palette Editor.
The Palette Editor controls the root 5-color master palette of your website. By changing these five core colors—either by sliding the color picker or inputting exact 6-digit hex codes—Squarespace automatically updates the 10 color themes across all current and future pages.
Understanding how the Palette Editor maps to your website elements will give you complete creative control over your typography, backgrounds, buttons, and links.
🌐 See Squarespace in Action: Explore Live Demo Websites
Both Dozro.com and our subsidiary WOZRO.com are built entirely on the Squarespace CMS platform. If you want to see what is possible with advanced Squarespace design, explore our fully interactive, industry-specific live demo websites:
🍕 Restaurant Demo: Experience a high-converting, mobile-first food menu layout at our Premium Pizza Restaurant Live Demo.
👤 Personal / Creator Demo: See an edge-to-edge, distraction-free digital profile at our Personal Website & Premium Link-in-Bio Demo.
🚀 Explore All Demos: Browse our complete catalog of industry-ready websites at WOZRO.com.
Understanding the 5 Master Color Slots in Squarespace 7.1
Inside the Palette Editor, you will see 5 color circles arranged horizontally from left to right. Squarespace assigns a specific role to each slot:
Light Neutral (Circle 1): Typically pure white or an off-white tint. It acts as the primary background for light theme sections and light body areas.
Light Accent (Circle 2): A subtle, secondary light shade used for soft background cards and understated accents.
Primary Accent (Circle 3): Your primary brand color. Squarespace uses this color prominently for primary buttons, active links, announcement bars, and high-impact callouts.
Dark Accent (Circle 4): A secondary dark hue used to provide rich contrast and depth in dark themes.
Dark Neutral (Circle 5): Usually deep charcoal or black. It serves as standard body text on light backgrounds and the primary background for dark theme sections.
How to Access and Customize the Palette Editor
Accessing the Editor:
Open your website in edit mode and click the Site Styles icon (the paintbrush in the top-right corner).
Click Colors, then select Edit Palette.
You will see your active 5-color palette along the top.
Method 1: Changing Colors with the Interactive Color Picker
Click on any of the 5 color circles at the top of the panel (for example, Circle 3 for your primary button color).
Use the color gradient square to adjust brightness and saturation by dragging the circle.
Use the bottom hue slider to shift across the color spectrum.
Watch your live website preview update in real time as you adjust the slider.
Method 2: Applying Exact Brand Colors via Hex Codes
If you have exact brand colors from your logo, graphic design guidelines, or an external palette tool:
Select the specific color circle you wish to replace.
Click on the HEX input field below the color gradient square.
Type or paste your 6-digit hex code (e.g., #FFC107 or #0B5ED7).
Press Enter. Squarespace will instantly calibrate that color slot across all related themes.
Macro vs. Micro Color Changes: Knowing the Limitation
The Palette Editor is designed for macro (global) level styling. It sets the foundational color DNA for the entire website.
What the Palette Editor Does:
Updates the primary palette across all 10 color themes (Lightest 1/2, Light 1/2, Bright 1/2, Dark 1/2, Darkest 1/2).
Changes default section backgrounds, main text colors, and primary button fills sitewide.
What Requires Micro-Level Theme Tweaks:
The Palette Editor does not allow you to set different colors for individual heading tiers (such as making Heading 1 gold while keeping Heading 2 white) or customize individual elements like newsletter borders, accordion dividers, or form block inputs.
💡 How to make micro-tweaks: Go back to Site Styles > Colors, hover over any of the 10 themes, and click the pencil icon. This opens detailed settings for every single block, heading, paragraph, button, and line on that theme.
Ensure Your Palette Passes WCAG Accessibility Standards
When changing master palette colors, it is easy to accidentally choose combinations where button text or paragraph typography becomes hard to read against background colors.
Under WCAG (Web Content Accessibility Guidelines), standard text requires a minimum contrast ratio of 4.5:1 against its background.
If you want professionally balanced, contrast-tested palettes ready to plug directly into your site, explore our Premium Squarespace Color Themes for pre-checked, accessible color systems.
❓ Frequently Asked Questions (FAQ)
Does editing a color in the Palette Editor change all pages on my site?
Yes. The 5 master color slots are sitewide. Adjusting any of these five circles recalculates color values across all 10 generated color themes, updating every page on your website immediately.
Which circle in the Palette Editor controls button colors?
Circle 3 (Primary Accent) is the default color assigned to primary call-to-action buttons across most Squarespace 7.1 templates. However, button background and text colors can also be individually overridden inside specific themes by clicking the pencil icon next to that theme in Site Styles > Colors.
Why did my text disappear after I changed a background color in the Palette Editor?
If your text color and background color are set to identical or very similar shades (for example, white text on a newly assigned white background), the text will blend in and become invisible. Simply click on the text color circle (often Circle 5 or Circle 1) and select a high-contrast shade.
Can I undo my color adjustments if I make a mistake?
Yes. While still in edit mode, you can use the Undo arrow at the top of the editor. If you have not clicked Save, you can click Exit > Discard Changes in the top-left corner to restore your website’s previous colors.
More Resources
Check more resources which are helpful in designing a Squarespace website.
Get Squarespace Website Design Package on Turnkey Basis.
Explore Our Premium Custom Squarespace Color Themes for Your Website.
How to Change Squarespace Colors for All Major Blocks: Buttons, Forms, Carousel, Text, Social Links, Newsletter, Announcement Bar, Line, Links, Scrolling Text, Logo on Different Pages, Section Background, and Change Color Palette.
Method to Change Squarespace Colors through Color Themes.
Method to Change Squarespace Colors through Palette Editor.
Find the Default Dominant Color Theme in a Squarespace Template.
Squarespace Color PRESETS: Method to Change Color.
Three Easiest Options for Color Selection on a Squarespace Website.
Squarespace support article for changing colors.
Methods of Font customization in Squarespace website.
Check more learning resources about Squarespace.
Join our Facebook Group about Squarespace help.
ExploreServices List offered by Dozro.
Download FREE Banners for Facebook, or YouTube, or other Social Media, or Advert Flyers.
Check Dozro Services List or visit the Homepage of our website.
Be sure to check out Dozro's social media platforms, including our YouTube channel and Facebook page.
