Web Services Support

BRANDING: Color Picker


Colors allow you to define a color palette and link the individual colors to any or all widget with color settings. The color of any element that is linked to the theme colors will automatically be updated when the linked color is changed in the theme colors settings. This allows you to quickly make color changes, which helps reduce design time and ensures your site's style is consistent across pages.


Theme Colors

Theme colors allow you to define a color palette and link the individual colors to any or all widgets with color settings. The color of any element that is linked to the theme colors will automatically be updated when the linked color is changed in the theme colors settings. This allows you to quickly make color changes, which helps reduce design time and ensures your site's style is consistent across pages.

You can configure up to 20 theme colors.

To configure theme colors:

  1. In the side panel, click Theme.
  2. Select the arrow next to Colors.
  3. Click the Plus icon next to Primary, or whichever setting you need to define.
  4. Type the HEX or RGB value of the desired color, or use the eye dropper tool to select a color.
  5. (NEW BRANDING FEATURE ALERT!) You can generate colors from your logo. Click to open the primary color, then open the Brand tab and click + Add Logo (if you added a logo to your Business Info in the Content Library, it will appear here). After adding your logo, a set of colors is generated.
  6. If you need to remove or replace the logo, click the three-dot icon next to your logo and select either Remove or Replace Image. Note that you need Content Library & Business Info permission to upload, remove, or replace the logo.



Recent Colors

When picking a color, the recent colors menu shows a sample of colors that were recently used in your site. This allows you to quickly pick colors that are already on your site.


Choose Another Color

Select a color's hue using the color palette on the right or the color panel. Alternatively, you can enter the HEX or RGB value of the color you want in text box below the vertical color gradient.

To match a color perfectly from anywhere on your site (images, texts, and so on), click the eyedropper () tool and select the color from your site you want to use. No need to spend any time trying to figure out a color’s exact name or value.


Opacity

The opacity slider determines the transparency of an element. Keep in mind that as you reduce an element's opacity, whatever is behind it (background image or color) will begin to blend with that element.


Considerations

  • Gradient is not available for text elements, so you will not see it in the Color Picker for text elements in the widgets design editor of the Theme tab.
  • When working with backgrounds, switching between Color and Image will set the settings on the previous option to null. To give an example, if you were using a color and changed the setting to Image, any color or gradient settings will be removed.
  • Gradients override individual button backgrounds. To change them back, reselect the background for individual buttons.