Choose a color palette for your site, then apply specific colors to different page sections.

Whether you prefer a black-and-white theme or daring color combinations, you can use site styles and section styles to change your site's colors.

This guide provides an overview of how to change colors for the different elements on your site.

Watch a video

Before you begin

• Color changes you make in site styles apply site-wide. Changing one element of a page, such as the Button text, changes it on all areas using that theme (version 7.1), or on all pages (version 7.0).
• In text blocks on version 7.1, you can change the color of a specific piece of text, like a single letter or word in a sentence. To do this on version 7.0, or in other text areas, use a Markdown block.
• If you have coding experience, you can try making targeted color changes with CSS. Keep in mind, custom code falls outside the scope of our support.
• If your site is on version 7.0, the process for changing colors works differently. Visit the section below for specific steps.
• For tips on choosing the best colors for your site, visit Choosing the right fonts and colors.
• To review accessibility best practices, visit Creating accessible site content. 

Change site-wide colors

To change all colors on your site, choose a color palette:

1. Open the Site styles panel, then click ＞ next to Colors.
2. Click Edit palette to choose a new color palette. You can choose from these types of color palettes:
   • 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 most prominent colors.
   • From color - Choose a primary color using the color picker and generate palettes to complement that color.
3. Click Save to save your changes and keep editing, or Exit then Save to close the editor.

Keep in mind:

• All palettes always include black and white, which are generally used for text.
• When you generate a palette from an image, the colors are pulled from the image's three most dominant colors.
• In any palette, you can use the Palette editor to customize each color in the palette.

Change section colors

Your color palette generates different color themes for your page sections. After setting site-wide colors, you can change any section's color theme to give it a distinct look.

To confirm which theme a section is using:

1. Open the Site styles panel, then click ＞ next to Colors.
2. Scroll through your page preview and review the section theme labels on each section.

Note: If you encounter a blank box on a section instead of a theme label, your Heading (Large) color is probably set to the same color as your Section Background color. To see the theme label, click the theme that also appears blank in the Colors menu, then change Heading (Large) to a new color. See the next section for detailed steps.

To change a section's color theme:

1. Open the Pages panel.
2. Select the page you want to edit and click Edit in the top-left corner.
3. Click Edit section or the pencil icon on the section you want to change.
4. In the Colors tab, click a theme to apply it to that section.
5. Click Save to save your changes and keep editing, or Exit then Save to close the editor.

Note: Changing a section's color theme resets all colors for that section, including any text color changes made in the text block toolbar.

Types of themes

The type of theme (1 or 2) controls which color applies to the main text in a section and which color applies to other elements:

• Lightest 1, Light 1, Dark 1, and Darkest 1 - Text and headings are black or white and other colors apply to the background and smaller site elements.
• Lightest 2, Light 2, Dark 2, and Darkest 2 - The color on the left side of the palette applies to all text and headings, and other colors apply to the background and smaller site elements.
• Bright - The color on the left side of the palette applies to either the text (Bright 1) or background (Bright 2) and other colors apply to the background and smaller site elements.

In some cases, text and button colors default to white or black to provide better contrast against the background color.

Themes for other site areas

Use the steps below to find the color themes for these areas of your site:

• Announcement bar - The announcement bar always matches the color theme of your header.
• Mobile overlay menu button - The mobile overlay colors are set in your header.
• Section background - Open the Colors panel and look for the theme label, then click that theme to open all colors. Look for the color next to Section background.
• Built-in pages - The default 404 page, shopping cart page, order confirmation page, and built-in search page all use your template's default color theme.

Customize theme colors

You can further customize any theme by setting specific colors for different site elements. 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, then click ＞ next to Colors.
2. Click the theme you want to edit.
3. 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. You may need to scroll to review all the tweaks.
4. Use the opacity slider to change the transparency.
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.

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.

As you change theme colors, keep these tips in mind:

• If you're not sure which theme you need to edit, look for the color theme label on the area of the page you want to change.
• The Edit Theme menu shows all possible color tweaks for your site, even if the page you're currently editing doesn't include those items. For example, all blog color options will appear even if you're editing a layout page.
• If a section has a background image, use the Background Overlay tweak to set the opacity of the overlay color. If the section uses a background color or video, use Section Background to set the background color.

The color picker

Use the color picker to choose a custom color for an element of your site. Every color tweak has a circle next to its label showing the current color for that element.

To pick a new color, click the color circle next to the tweak you want to change. Click the bottom slider to select a color, then click in the square above to choose a shade.

If you know the value for the color you want, you can also click the value field to edit it. 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

For help finding a specific color value, you can visit external sites like color-hex.com or imagecolorpicker.com.

Tip: The value field populates automatically 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.

Transparency

To change a 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.

• In version 7.1, it's only possible to change the transparency of palette colors.
• In version 7.0, some color tweaks don't 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. 

Change inset border color

When a section has a background image, you can display the image at Full bleed or Inset.

• Full bleed extends the image from one edge of your browser window to the other, spanning the width of your site.
• Inset indents the image slightly and creates a border around the image.

When the image is set to Inset, you can change the border color:

1. Open the Site styles panel, then click ＞ next to Colors.
2. Click the color theme for the section you want to change.
3. Under Sitewide, click Inset border and choose a color.
4. 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.

Change block background colors

Block background colors are only supported on version 7.1 sites.

Some blocks include a background color feature. This is a great way to make a block stand out, or to help make overlapping blocks more visible in Fluid Engine. Add background colors to the following blocks by switching the Background toggle on in the block's Design tab:

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

You can also enable background colors on text blocks by clicking the text block, then the block background icon. After switching the Background toggle on, click Color to select a color from your site's color palette or a custom color. Make blocks with matching background colors, or give each block its own unique color.

Default color themes

Every version 7.1 template has a default color theme. This 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
• Product quick view page
• Sections with a background image or video
• Shopping cart page

You can't assign a different theme to these areas of your site, but you can make changes to the default theme to customize these pages. To find your template's default theme:

1. Add a blank section to a page.
2. Open the Site styles panel, then click ＞ next to Colors.
3. Look for the theme label. New sections are assigned the default color theme.

Tip: Another way to determine the default color theme is to open one of the system pages, press / and search for Site Styles. You can access the Colors panel and review the theme indicator from there.

Gap between page section and footer

On pages with only one section or very short pages, a gap may appear between the last page section and the page's footer. The gap inherits the section background color of your default theme.

When the gap is a different color, like when your section and footer use different color themes than your default, it may be more noticeable.

To fix this, set the section background color of your default theme to match the section background color of your page section or footer's theme.

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

Changing colors in version 7.0

If your site is on version 7.0, the process for changing your site's colors works differently.

Tip: Cover pages have their own style options.

Open the Design panel, then click Site Styles to manually set your site's colors with style tweaks. The specific tweaks depend on your site's template. Review your template's guides for more in-depth help with changing your site's colors.

To change colors on a version 7.0 site, first navigate to a page where you want to make changes. Some tweaks only display when you're on the page they affect, so navigating to the page you're editing will help the right tweaks appear. You can also preview your style edits on the selected page as you make them.

To find tweaks specific to an element on the page, click the element in the preview. Site styles only displays the style tweaks for that element and hides the rest. This shortcut is available in most templates and for most areas of your site. Click Show all to display all the tweaks for the page again.

To change your site's colors:

1. Open the Pages panel and click the page you want to change.
2. When your site preview shows the correct page, return to the Website panel.
3. Click Design, and then click Site styles.
4. Scroll down to review all available tweaks on the page you’re viewing. Click the tweak you want to change, then choose a new color.
5. Use the opacity slider to change the transparency.
6. Click anywhere outside the color window to close the color picker.
7. 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.
8. Click Save at the top of the panel.

Change background colors

These template families have customizable background areas:

Template family	Background areas
Adirondack	Site Canvas Navigation bars Header
Avenue	Site Canvas
Aviator	Site Canvas Header/Footer
Bedford	Site Header Prefooter Footer
Brine	Site Canvas Border Top header Footer Mobile bars
Farro	Site Border Header Footer Mobile bar
Five	Site Canvas Canvas border Header Navigation
Flatiron	Site Header/Footer
Forte	Site
Galapagos	Site Header
Ishimoto	Site Page border
Momentum	Site Canvas Navigation
Montauk	Site Canvas
Native	Site
Pacific	Site Header Index alternating section Prefooter Footer
Skye	Site
Supply	Site Header/sidebar navigation
Tremont	Site Navigation overlay Index
Wells	Site
Wexley	Site Mobile nav
York	Site Banner

Keep in mind:

• Background colors don’t transfer when you switch templates.
• Some templates also support background images.
• In some templates, a banner can display behind the header.
• When you're logged in, the background displays a white color when loading a page, regardless of the color selected in site styles. This isn't visible to visitors.

For more help, visit the guide for your template.

Watch a video

This video applies to version 7.0.