Skip to main content
All CollectionsWebsite editorSite Style
Change the colors on your site
Change the colors on your site
Naoko avatar
Written by Naoko
Updated over a week ago

If your site was created before Oct 3, 2023, opt into using color palettes by following the steps below.

Change the colors on your whole website

  1. Click Website > Edit.

  2. In the website editor, click the Style button (paintbrush icon) in the top right corner.

  3. Browse the available palettes. Use the dropdown to explore different moods (like Light, Dark, Retro, and more). Click one of the palettes to preview how it will look.

  4. Click “Save” in the top bar to apply the selected palette to your whole site or “Discard” to revert.

Create a custom color palette

If you don’t find a palette you like or want to modify an existing palette, you can create a custom palette.

  1. From color palette panel, click “Custom” to edit the current palette.

    Each of the 4 palette colors is actually a pair of colors: a background and an accent. The background color applies to the background of sections. The accent color applies to buttons within the same section and other highlighted elements.

  2. Click one of the 4 color pairs to customize it. Choose a background and accent that contrast with each other so that buttons are clearly visible.

  3. Click the back arrow to return to change other colors in the palette. Edit the other colors as desired.

  4. Click “Save” to apply the custom palette.

Change the color of a section or a button

So that buttons always stand out, they use the accent color of the section they appear in. To edit the color of a button, change the accent color of its section.

To change the color of a section, or a button in a section:

  1. In the website editor, click "..." and “Edit section” on an applicable section.

  2. Click the “Style” tab, then “Change” in the Colors section.​

  3. Select one of the 4 colors from the theme to change the background and button colors together.

  4. Alternatively, click “Custom” to choose a custom background and accent colors for the section.

    If you change to a different color palette later, the new palette will not change the custom colors.

  5. Click “Save” to apply the custom colors to the section.

Apply a gradient to a section

You can apply a gradient effect on the section of your choice.

  1. Click Website > Edit.

  2. Go to the section where you want to apply the gradient effect and click "..." and “Edit section.”

  3. Click “Style” > “Change” in “Colors.”

  4. You can choose from Solid or Gradient and the gradient direction from this editor. Click “Save” when finished.

Update your site to use color palettes

To start using color palettes on a website created before October 3, 2023:

  1. Click Website > Edit.

  2. In the website editor, click the Theme settings (paintbrush icon) in the top right corner.

  3. You will see this callout at the top of the Theme settings. Click “Try Color palettes” to continue.

  4. Select one of the provided color palettes to see how it will look on your site. If you don’t find a palette you like or want to customize a palette, click “Custom.”

  5. To keep your previous colors, click “Discard” at the bottom of the panel.

  6. To apply the selected palette, click “Save.”

Applying a color palette will affect all pages of your site. Once you apply the new palette, it is not possible to revert to the previous colors. Please be sure to review before you click “Save.”

Did this answer your question?