Choose a palette for your site, then customize the colors of specific elements.

Use color palettes and color themes to style colors throughout your site, whether you prefer a black-and-white theme or daring color combinations.

These color options are available in version 7.1 sites. Version 7.0 sites have different color settings.

Video on changing site colors

Watch this video for a walkthrough of your site’s color palette and color themes.

Change colors with site-wide color palettes

All Squarespace sites use a palette with five colors for cohesive visual styling. You can immediately change the colors on your site by customizing the palette or selecting a new palette, which applies the palette’s colors throughout your site.

Edit your current color palette

To edit the selected color palette:

1. Open the Site styles panel.
2. Click ＞ next to Colors.
3. Click Edit palette. Palettes use five colors, and most include black and white, which are used for text.
4. Click one of the palette’s colors, then click and drag the sliders in the color picker to change it. If you have code for a color you want to use, you can enter the hex, RGB, or HSL code in the field below.
5. Repeat these steps for each color in the palette, then click Save.

Set a new color palette

To set a new color palette:

1. Open the Site styles panel.
2. Click ＞ next to Colors.
3. Click Edit palette, then choose:
   • Presets - Choose from a set of preset palettes in curated colors.
   • From image - Upload an image to generate a palette based on the image's three most prominent colors.
   • From color - Choose a primary color using the color picker and generate palettes to complement that color.
4. Click Save.

Change section colors with themes

Your palette sets the colors for your site, and your site’s color themes use those colors in different combinations. Every palette has ten color themes, so you can give your sections unique looks that still fit together.

In some cases, text and button colors default to white or black to provide better contrast against the background color. Review our accessibility best practices when selecting colors.

Set a section theme

To select a color theme for a section:

1. Open the Pages panel.
2. Click the page you want to edit and click Edit in the top-left corner.
3. Click Edit section on the section you want to change.
4. Click Colors, then click a color theme.
5. Click Save.

Note: Choosing a new color theme changes all colors in the section, including any text color changes made in the text block toolbar.

How can I tell what theme a page section uses?

To check which color theme a section uses:

1. Open the Pages panel.
2. Click the page you want to edit.
3. Scroll through your site preview and check the color theme labels that display in the top-right corner of each section.

Why is my color theme label blank?

If a blank box appears instead of a theme label, the font color and background color might match, making the text invisible. To make the theme label visible:

1. Open the Site styles panel.
2. Click ＞ next to Colors.
3. Click the theme that appears blank in the Colors menu.
4. Click Heading (Large) and change the color.
5. Click Save.

What themes do other site areas use?

Other areas of your site have specific color theme settings:

• Announcement bar - If your site header has a color theme, the announcement bar follows the same theme. Otherwise, it follows the default color theme.
• Built-in pages - Built-in site pages, like the default 404 page or shopping cart page, follow your template's default color theme.
• Mobile overlay menu button - Set a color theme for your mobile overlay when you edit your site header.
• Site header - Set a color theme or set a custom color for your site header.

Change colors of specific site elements

You can customize color tweaks for specific elements in any color theme.. Any changes made to a theme's colors apply to all areas of your site using that theme.

To edit a theme:

1. Open the Site styles panel.
2. Click ＞ next to Colors.
3. Click the theme you want to edit. If you're not sure which theme you need to edit, look for the color theme label on the section you want to change.
4. Click the tweak you want to change, then choose a new color. You can use a preset color from the Palette tab, or click Custom to use the color picker.
5. To undo any changes before saving, click the undo icon at the top of the panel, or click the dot next to a specific tweak.
6. Your changes stay in place while you edit other page content. Click Save to save your changes and keep editing, or Exit then Save to close the editor.

Use the color picker to select a custom color

Every color tweak has a circle next to its label showing the current color for that element. Typically, these colors are from your site’s palette.

To pick a custom color with the color picker:

1. Click the tweak you want to change.
2. Click Custom to open the color picker.
3. Click the bottom slider to select a color, then click the square above to choose a shade, or use the value field to enter a specific color code.
4. If the tweak has an opacity slider, you can use it to change the transparency.

Select a specific color with a color code

If you know the value for the color you want, you can click the value field below the color picker to add it. For help finding a specific color value, you can visit external sites like color-hex.com or imagecolorpicker.com.

The value field accepts any of these formats:

• HEX - Example: #FFFFFF
• RGB or RGBa - Example: rgba(255, 0, 149, 1)
• HSL/HSLA - Example: hsla(325, 100%, 50%, 1)
• HTML (must be lower case) - Example: white

Tip: The value field automatically shows the color code when you use the color slider to find a color. You can copy and paste this code to add the same color to other tweaks in the theme.

Change a color's transparency

To change a custom color’s transparency, use the opacity slider by dragging the circle below the color picker. The opacity slider is particularly useful for overlay colors, which display over images. Not all tweaks include an opacity slider.

Tip: If you use the opacity slider to make a section's background color transparent, the background color of your template's default color theme may show through.

What are default color themes?

Every version 7.1 site has a default color theme. The default color theme is automatically applied to the following built-in pages and areas on your site:

• Access denied screen
• Announcement bar
• Built-in search page
• Default 404 page
• Dynamic header over a background image or video
• Order confirmation page
• Page gaps caused by scrolling horizontally beyond the edge of the page
• Product quick view page
• Shopping cart page

How do I find my site's default color theme?

To find your template's default theme:

1. Open the Pages panel.
2. Click Edit on a page, then click Add Section.
3. Click + Add Blank, then click Section. New sections start with the default theme.
4. Click the paintbrush icon to open the Site styles panel, then click ＞ next to Colors.
5. Look for the theme label on the new section.

Can I change my site's default theme?

No. It’s not possible to assign a new default theme for your site, but if you know your default theme, you can change your color palette or change the theme’s individual color tweaks to customize your built-in pages and other sections that use the default theme.

How do I change the color between page sections and my footer?

A gap may appear between the last section on a page and the footer, or under the footer. These gaps use the section background color of your default theme. When your section and footer use different color themes than your default, these gaps may be more noticeable.

To match the gap’s color to your page sections or footer:

1. Open the Site styles panel.
2. Click ＞ next to Colors.
3. Click your default theme.
4. Click Background Color and change it to match the section background color in your page section or footer’s color theme.

Tip: If you match the section background color in your default theme to the page background color, your page will look consistent as it loads. Background colors load before images.

Change block background colors

You can add a background color to some blocks. This is a great way to make a block stand out, or to help make overlapping blocks more visible in Fluid Engine.

You can add background colors to these blocks:

• Accordion blocks
• Form blocks
• Newsletter blocks
• Quote blocks
• Summary blocks
• Text blocks