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 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.  

The full customization of palettes is a premium feature, meaning that for the free, Bronze, or Silver plan users, it’s limited to customizing the Background block color and the Accent colors of each color scheme.

With Yola Gold plan, you can access the feature full-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.

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 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 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.)
   
   
3. In the next window, click the color scheme you want to customize to open its settings.
   
   
   
   
4. 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. 
5. In the next window, use the color picker with the full palette to select your desired color. You can preview the changes on the site immediately. 
6. Click Submit when you are happy with the color you’ve selected. 
7. Repeat steps 3 to 6 with other color schemes if needed.
8. 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.