Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Changing colors

Whether you prefer a black-and-white theme or daring color combinations, you can use site styles and section styles to change the colors for your site’s text, background areas, and other elements.

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, will change it on all areas using that theme (version 7.1) or on all pages (version 7.0).
  • To change the color of a specific piece of text, like one word in a sentence, 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. See the section below for specific steps.
  • For tips on choosing the best colors for your site, visit Choosing the right fonts and colors.

Change site-wide colors

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

  1. While editing a page, click the paintbrush icon in the top-right corner, then click 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. To save your changes, hover over Done in the top-left corner of the page editor and click Save.

colors_-_edit_palette.png

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. While editing a page, click the paintbrush icon, then click 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.

section_themes_on_preview.png

To change a section's color theme:

  1. In the Home menu, click Pages.
  2. Select the page you want to edit and click Edit in the top-left corner.
  3. Click the section's pencil icon.
  4. In the Colors tab, click a theme to apply it to that section.
  5. Your edits will stay in place while you edit other page content. To save your changes, hover over Done in the top-left corner of the page editor and click Save.

section_theme_editor.png

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 will 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.
  • Built-in search page - Close the page preview and open your search page by adding /search to the end of your domain, then open the Colors panel and look for the theme label.
  • Default 404 page - Close the preview and navigate to a page that doesn't exist by adding a string of letters to the end of your domain, like /xyz. From there, open the Colors panel and look for the theme label.
  • 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.
  • Shopping cart - Open your shopping cart page by adding /cart to the end of your domain, then open the Colors panel and look for the theme label.

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 will apply to all areas of your site using that theme.

To edit a theme:

  1. While editing a page, click the paintbrush icon, then click 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 will stay in place while you edit other page content. To save your changes, hover over Done in the top left corner of the page editor and click Save.

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.

pick_a_color.png

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.

custom_color_value.png

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.

adjust_the_opacity.png

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. While editing a page, click the paintbrush icon, then click 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 will stay in place while you edit other page content. To save your changes, hover over Done in the top left corner of the page editor and click Save.

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.

In the Design panel, use the tweaks in site styles to manually set your site's colors. The specific style 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 see changes. Some tweaks only display when you're on the page they affect, so navigating to the page you're editing will help you see the right tweaks. 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 will display only the style tweaks for that element and hide 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.

site_styles_-_show_all.png

To change your site's colors:

  1. In the Home menu, click Pages, then click the page you want to change.
  2. When your site preview shows the correct page, return to the Home menu.
  3. Click Design, and then click Site styles.
  4. Scroll down to review all tweaks available 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 will display a white color when loading a page, regardless of the color selected in site styles. This won't be visible to visitors.

For more help, visit the guide for your template.

Watch a video

This video applies to version 7.0.

Was this article helpful?
110 out of 384 found this helpful