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 the Design panel and section styles to change the colors for your site’s text, lines, and background areas. 

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 the Design panel 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 section of text, like one individual 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. 

Change site-wide colors

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

  1. In the Home Menu, click Design, then click Colors.
  2. Click Edit next to Palette to choose a color palette. 
  3. Click Save at the top of the panel.

color_palette_-_click_edit.png

Choose from a few types of color palettes:

  • Designer Palettes - Choose from a set of preset palettes in complementary colors.
  • From Image… - Upload an image to create a palette based on the image's most prominent colors. 
  • From Color… - Choose a primary color for the palette using the color picker.
  • Custom Colors - Choose a color for every part of the palette using the color picker.  

The color palette creates the different color themes for your page sections. To see which theme a section is using: 

  1. In the Home Menu, click Design, then click Colors.
  2. Click Section Themes.
  3. Scroll through your site preview and review the section theme labels on each section. 

Change section colors

After setting site-wide colors, you can change any section's color theme to give it a distinct look: 

  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, select a theme. 
  5. Hover over Done on the page editor and click Save.

section_editor.png

Choose a theme:

  • Minimal - Text and headings are black or white and other colors apply to the background and smaller site elements.
  • Bold - 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.
  • Accent - The color on the left side of the palette applies to either the background (Dark) or text (Light) 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. 

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. In the Home Menu, click Design, then click Colors.
  2. Click Section Themes
  3. Click the pencil icon next to the theme you want to edit. 
  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. You may need to scroll to see all tweaks. 
  5. Use the opacity slider to change the transparency
  6. 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.
  7. Click Save.

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 choose a shade by clicking in the square above.

pick_a_color.png

Alternately, if you know the value for the color you want, you can 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, the left side is a very light tint, while the right side adds a darker tint. It's only possible to change the transparency of palette colors. 
  • In version 7.0, the left side is completely transparent, while the right side is completely solid. 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. In the Home Menu, click Design, then click Colors.
  2. Hover over your theme and click the pencil icon.
  3. Under Sitewide, click Inset Border and choose a color.
  4. Click the Colors arrow at the top to return to the Colors panel, then click Save to save your changes.

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 on 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 see 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

Background color options vary by template:

  • All templates - You can set the color of the main content area.
  • Some templates - You can set separate colors for the header, footer, and space around your content.

Keep in mind:

  • Background colors don’t transfer when you switch templates.
  • Some templates also support background images
  • 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?
73 out of 246 found this helpful