
How to Change Website Colors: A Complete Guide for Site Customization
Modify site colors by managing color palettes and section themes for a cohesive design.
Setting Site-Wide Colors
- Open Site Styles panel and select Colors
- Click Edit Palette to choose from:
- Presets
- From Image (uses dominant colors)
- From Color (builds palette around primary color)
Note: All palettes include black and white for text elements.
Changing Section Colors
- Open Pages panel
- Select page and click Edit
- Click Edit Section
- Choose theme from Colors tab
- Save changes
Theme Types
- Type 1 (Lightest, Light, Dark, Darkest): Black/white text with colored backgrounds
- Type 2: Left palette color for text, other colors for backgrounds
- Bright: Left color for text (Bright 1) or background (Bright 2)
Customizing Theme Colors
- Open Site Styles > Colors
- Select theme to modify
- Choose element to change
- Pick new color from palette or customize
- Adjust opacity if needed
Color Formats Accepted
- HEX: #FFFFFF
- RGB/RGBa: rgba(255, 0, 149, 1)
- HSL/HSLA: hsla(325, 100%, 50%, 1)
- HTML: white (lowercase only)
Block Background Colors
Available for:
- Accordion Blocks
- Form Blocks
- Newsletter Blocks
- Quote Blocks
- Summary Blocks
- Text Blocks
To modify:
- Select block
- Toggle Background switch in Design tab
- Choose color from palette or customize
Version 7.0 Specific
- Open Design panel > Site Styles
- Navigate to page requiring changes
- Select element to modify
- Choose new color
- Adjust opacity if needed
- Save changes
Note: Background colors won't transfer between templates. Some templates support background images.
Related Articles

Guide to Joining Squarespace Circle: Member Benefits & Features
