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 Free, Bronze, or Silver 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 Yola Gold 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 totally 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 Gold 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.
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.
We hope this article has helped you. If you have any questions left, please contact our Support Team.
Ready to use your new knowledge? – Edit your site!