Creating custom color palettes

Do you want to make large-scale style changes to your site? Custom color palettes help you make color changes for all your site elements at once.

You don’t need to pick and combine colors since all palettes have been curated by a professional designer. This helps create a consistent look and maintain a unified, professional online presence.

Here’s how to apply custom color palettes.

 

Change site-wide colors

To change your site's default colors:

1. In the main menu, click Design.

2. In the Design menu, click Colors.
3. Choose one of the existing color palettes and click on it. Click Save.

The new colors will apply across the website, including all buttons, icons, and font colors.

Tip: Try different color palettes to see which one works best with your site. 

 

Creating a custom palette

If you want more control over your site's colors, you can create your own custom palette.

To create a new custom palette, click on the + button in the Colors menu. 

 

You can assign custom colors to the following website color sections:

• Light color: This color will be used as a background color for your light-colored blocks
• Dark color: This color will be used as a background color for your dark-colored blocks
• Primary color: This color will appear on buttons and call-to-action elements
• Secondary color: This color will be used for your icons, links, and background overlays.

Every custom color option has a circle next to its label showing the current color.

To change any of these colors, click on the color section. You will enter the Color settings area.

 

The color picker

Use the color picker to choose a custom color for your site. 

To pick a new color, click circle 1 and move it around the color area to pick the shade you like. Once located, make a firm click on circle 1 for the color to be saved. 

To choose a completely different color, first, choose the color group by operating circle 2 in the bottom slider, then choose a shade by moving circle 1 in the area above.

 

Once you have selected the color, click Submit. The new color will be assigned to the custom color option.

 

Entering the color value

Choose the new color by entering the HEX value if you already know it.

Tip: A color HEX code is a way of specifying color using hexadecimal values. The code itself is a hex triplet, which represents three separate values that specify the levels of the component colors. The code starts with a pound sign (#) and is followed by six hex values, for example, #AFD645. You can get HEX color codes here.

The value field accepts any of these formats:

HEX: Example: #FFFFFF

RGB: Example: rgba(255, 0, 149, 1)

HSL:  Example: hsla(325, 100%, 50%, 1)

HTML: Example: 

To change the format of the color, click on the letters under each color entry fields:

 

To type in the HTML color, simply click on the window with numbers and type in the color name:

 

The color name will automatically transform into a HEX value for this color. 

Once you are happy with the color, click Submit to apply it to the corresponding custom color option.

Tip: The value field populates automatically when you use the color picker to find a color. You can copy and paste this code to assign the same color to other custom colors.

 

Managing custom palettes

To edit the colors in the palette, hover over it and click the “gear” icon: 

To delete a custom color palette, hover over a palette and click on the “trash” icon:

You cannot delete pre-designed color palettes in the Colors menu but you can customize any of them. Hover over a palette you want to edit and click on the “gear” icon. 

Customize the palette following the steps above. 

Tip: You can create several custom palettes for your site. They will be numbered automatically so you can easily find them.