Overview

A professional website requires visual consistency; using the exact right colors is key to building trust and reinforcing your brand identity. The Color Picker is your advanced tool for precision color management, ensuring every element on your site from text to backgrounds is perfectly on brand.

This powerful design tool delivers confidence and professionalism:

• Guaranteed Consistency: The Recent Colors feature acts as your digital swatch book, allowing you to instantly reapply your core brand colors across your entire site for a unified look.

• Unlock Premium Design: Easily create modern visual effects by applying Custom Gradients to backgrounds and overlays, adding depth and polish to your design.

• Precision Control: Never settle for 'close enough.' Input your brand's official HEX or RGB codes to ensure pixel-perfect color matching every time.

Guide

When working with the Color Picker, you have the following options:

Color style

Before you pick the color scheme, you need to choose where you want to use single color or a gradient.

If you are using single color option, you can pick a color from Recent colors tab or jump to Choose another color.

Gradient background will be an available option for row, column and widget backgrounds and image overlays. To apply a gradient, make sure to:

• Pick 2 colors of the gradient stops
  • You can reverse the colors to adjust the stops positioning
• Choose gradient direction
  • Center option will generate radial gradient
  • Side options will create linear gradient

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.

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 a Color Picker for text elements in widgets design editor of Global Design 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.