Creating a custom color palette for your site

With predesigned palettes, you don’t need to pick and combine colors since all palettes are curated by professional designers. But if you want a particular color palette that suits your brand, you can create one.

About color palettes

Each palette consists of six complementing color schemes picked by professional designers. When you change a color in one of the color schemes, it automatically applies to the blocks with the same color scheme across your website.  

You can change the color of various site elements:

  • Typography, including your site name, various headings, text links, and price labels;
  • Navigation links (active and default); 
  • Decorative elements like borders, feature icons, and social icons;
  • Primary and Secondary buttons – both their texts and backgrounds.

Note: The full customization of palettes is only available for premium plan users. You may need to upgrade your plan to access the feature full-scale.  

Customizing a color palette

Every palette has six basic color schemes, and all of them are customizable. You can customize the palette you like the most by changing just a couple of its colors, or you can change all available colors to create a totally unique palette.

Note: Unlike in Block settingsAppearanceBlock style, where color scheme change only applies to the current block, in Color palette settings, ​​the changes you make affect all blocks of your site that have the same color scheme.

Your current palette is always named Palette 1 and is always on the top of your list. It also has a blue checkmark icon near its name. 

To change a color in the palette, follow these steps: 

  1. Click the Design button on the Topbar to open the Website design menu.
  2. In the Colors tab, hover over the palette you want to customize and click the Settings icon. (Or click the Plus (+) button if you want to customize your current palette.)WL - Custom palette - 1.png
  1. In the next window, click the color scheme you want to customize to open its settings.

    WL - Custom palette - 2.png

  2. The Color scheme settings menu gives you an explanation of what every color is used for. Read it carefully and click the color you want to replace. 
  3. In the next window, use out the color picker with the full palette to select your desired color. You can preview the changes on the site immediately. 
  4. Click Submit when you are happy with the color you’ve selected. 
  5. Repeat steps 3 to 6 with other color schemes if needed.
  6. Click Submit and Save in the next windows to apply the changes. 

Here’s the video of the color customization process for a site’s Light color scheme.

At the end of the video, you see that the changes apply to all blocks with the light color scheme on the page (and on the site, too). 

Note: After you save the changes, the palette appears on the top of your list with the new name, for example, Custom palette 1. You can create several custom palettes for your site, and they will be numbered automatically.

WL - Custom palette - 3.png

Deleting a custom palette

You cannot delete predesigned color palettes in the Colors tab. But you can delete a custom palette you’ve created. Hover over the palette you want to delete and click the trash bin icon. 

WL - Custom palette - 4.png

Remember to save the changes and publish your website to make them live.

Was this article helpful?
1 out of 1 found this helpful