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 and color customization
Each palette consists of six complementary 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.
We've made it easier than ever to personalize your website's look and feel with our new custom color palettes.
Note: Full palette customization is a premium feature. If you're on a Basic plan, you're limited to setting the six basic colors of your palette.
These six base colors are applied consistently across your entire site and include:
Color 1 – for light (white) sections
Color 2 – for gray sections
Color 3 – for dark (black) sections
Color 4 – for neutral or mixed-tone blocks (e.g., dark gray)
Primary color – for buttons, highlights, and key interactive elements
Secondary color – for subtle accents and secondary actions
With the Premium plan, you can access the full feature scale and 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.
You’ll see a real-time preview as you customize, so you can instantly see how your choices affect the look of your site.
Customizing a color palette
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 unique palette.
Note: Unlike in Block settings → Appearance → Block 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 at the top of your list. It also has a blue checkmark icon near its name.
There are a few ways to change colors in your palette. But all of them start with clicking Design on the Topbar and choosing Colors from the dropdown menu.
After doing that, you have several options:
Click the Edit palette button. Here you can either pick a completely different palette or just change some of its colors via the color picker, as shown in the video below.
To change just one of your Block color schemes, go Design -> Colors, scroll down, and choose the one you want to work with, then click its Settings icon.
Here you can change the color of your Block background, as well as tune the colors of important website elements (available for Premium plan users only), such as:
- Typography elements (site name, headings, paragraphs, site links, and more)
- Header and footer navigation items
- Primary and secondary buttons
- Decorative elements (borders, icons, and dividers)
Note: At the very top of this window, you can also switch to another color scheme without returning to the previous step.
When you’re done customizing all the colors of the color scheme, click Save and then Save again to confirm the changes.
At the end of it, you see that the changes apply to all blocks with the color scheme of your choice on the page (and on the site, too).
Note: After you save the changes, the palette appears at 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.
Creating a custom color scheme
You can create custom color schemes to use throughout your website. Here’s how to do this:
- On the Topbar, go to Design → Colors.
- Click Edit color palette.
- In the bottom of the Block color schemes section, click Add color scheme.
- In the Color settings dialog, choose either a solid color or a gradient.
Creating a solid color scheme
- Select the Solid option.
- Choose a color from the color picker or enter a HEX color value.
- Click Submit. The Edit color scheme dialog will open, where you can customize additional settings, such as text colors and other elements used in the color scheme.
- Click Save to add the new color scheme to your color palette.
Creating a gradient color scheme
- Select the Gradient option.
- From the dropdown menu, choose one of the available gradient types:
- Linear – Adjust the gradient direction, choose the gradient stop colors, or select one of the ready-made options from the Website gradients section.
- Radial – Choose the gradient colors and adjust the gradient position by dragging and dropping the center point.
- Optionally, choose a separate color scheme color. If you do not specify one, the first gradient stop color will be used automatically.
- Click Submit. The Edit color scheme dialog will open, allowing you to further customize the color scheme.
- Click Save to add the new color scheme to your color palette.
Your custom color scheme will now be available throughout the editor, including in Block Settings and Element Settings. Gradients are also available in Global Colors, making it easy to reuse them across your website and maintain a consistent design.
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.
After you delete it, your site will come back to your basic palette automatically.
Remember to save the changes and publish your website to make them live.