How to Change Color Settings in Your Site Design - Complete Guide
Colors in Squarespace: A Complete Guide
Choose the perfect color palette for your website by adjusting site-wide themes or applying unique colors to individual sections.
Site-Wide Color Changes
- Open Site Style panel and select Colors
- Click Edit Palette to choose from:
- Preset palettes
- Image-based palettes (extracts 3 main colors)
- Custom color selection
Changing Section Colors
- Open Page Panel
- Select and Edit desired section
- Choose a color theme under the Colors tab
Available themes:
- Color 1 (black/white text)
- Color 2 (custom text colors)
- Light/Dark variations
Customizing Theme Colors
- Open Site Style > Colors
- Select theme to edit
- Adjust individual elements using:
- Palette colors
- Custom colors
- Opacity settings
Color Picker Options
Support for multiple formats:
- HEX (#FFFFFF)
- RGB/RGBA (rgba(255, 0, 149, 1))
- HSL/HSLA (hsla(325, 100%, 50%, 1))
- HTML color names (lowercase)
Block Background Colors
Available for:
- Accordion blocks
- Form blocks
- Newsletter blocks
- Quote blocks
- Summary blocks
- Text blocks
Default Theme Areas
Applies automatically to:
- Access denied screen
- Announcement bar
- Search pages
- 404 pages
- Shopping cart
- Order confirmation
- Product quick view
Version 7.0 Specific Instructions
- Open Design panel > Site Style
- Select page to edit
- Choose element to modify
- Pick colors and adjust opacity
- Save changes
Remember to maintain proper contrast for accessibility and consider mobile viewing when selecting colors.
Related Articles
How to Choose the Best Squarespace Template for Your Website
