
How to Change Website Colors: A Complete Guide to Color Customization
Select and adjust your website's color scheme through website styles and section settings for a cohesive visual design.
Change Colors for Your Entire Website:
- Open website styles menu and click "Colors"
- Select "Edit Palette" to choose from:
- Presets with curated colors
- Image-based palettes
- Custom color-based palettes
- Click Save to apply changes
Modify Section Colors:
- Open Pages menu
- Select and Edit the desired page
- Click Edit Section
- Choose a color design from the Colors tab
- Save changes
Design Types:
- Light 1/Dark 1: Black/white text with colored backgrounds
- Light 2/Dark 2: Palette colors for text with contrasting backgrounds
- All designs include automatic contrast adjustments for readability
Customize Specific Elements:
- Access website styles menu
- Select the design to modify
- Choose elements to customize
- Use preset colors or color picker
- Adjust opacity as needed
Color Picker Options:
- HEX codes (#FFFFFF)
- RGB/RGBa values
- HSL/HSLA format
- HTML color names
Background Colors:
- Available for accordion, form, newsletter, quote, and overview blocks
- Enable backgrounds through the Design tab
- Choose from palette or custom colors
Accessibility Tips:
- Maintain sufficient contrast between text and background
- Consider color-blind users when selecting combinations
- Test designs across different devices
For Version 7.0:
- Open Design menu
- Select Website Styles
- Navigate to desired page
- Choose color adjustments
- Save changes
Remember to maintain consistent branding throughout your website while ensuring readability and accessibility.
Related Articles

How to Set Up a Third-Party Subdomain on Squarespace: Step-by-Step Guide
