Using the Color Picker

Within the design options of columns, rows, and widgets, you can alter the color of elements and backgrounds by clicking the round icon to open the Color Picker.

There are three options within the color picker that allow you to easily apply consistent colors throughout your site:

• Theme Colors

  Theme colors are used to easily keep consistency across a site, you can have up to 10 theme colors. When an element is using a theme color and that theme color is later changed within the theme design panel, all elements using that color will automatically be updated to use the new color.

  

• Recent Colors

  Recent colors are automatically generated whenever a new color is selected from the color picker, or when the eye drop tool is used within the color picker window.

  

• Saved Colors

  Colors can be manually saved in the Saved Colors section for use again later, to do this simply select a color from the color picker and use the + icon.

  

  
  

• Color Contrast Ratio:

  This measures the contrast between text and background. Color contrast is important for your site's accessibility and SEO.

  

• Color Picker

  The color picker also allows you to select a new color from the panel and alter the hue with the color gradient on the right.

Alternatively, if you have a specific set of brand colors you can enter the hexadecimal or RGB value.

You can adjust the transparency of the element by using the Opacity slider. As you adjust the opacity of the element it will fade into the background (and disappear into the background element at 0%).