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 are curated by a professional designer. This helps create a consistent look and maintain a unified 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.

Screen_Shot_2020-08-14_at_12.27.58.png

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

The colors will apply across the website. Buttons, icons, and font colors will all change.

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. 

Screen_Shot_2020-08-14_at_13.09.27.png

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

Screen_Shot_2020-06-15_at_17.47.20.png

  • Light color: This color will be used as a background color of your light-colored blocks
  • Dark color: This color will be used as a background color of your dark-colored blocks
  • Primary color: This color will appear on buttons and call-to-action elements
  • Secondary color: This color will be used on 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 the 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 the circle 1 in the area above.

palette3.png

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:

 palette4.gif

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

 

palette5.gif 

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: 

Screen_Shot_2020-06-15_at_17.49.50.png

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

Screen_Shot_2020-06-15_at_17.50.58.png

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.

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