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, with the color picker open, click the drop down above the color palette (it may say Color), select Gradient, then make sure to:

Theme 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.

To learn how to configure theme colors, see Theme Colors.

Save colors that are frequently used across your site by adding them to the Saved Colors list in the color picker.

To add a color to the saved colors, click the Saved Colors tab on the color picker and click the + icon. To remove a color from the Saved Colors list, right-click the color and select Remove.

You can save up to 48 colors and gradients in the Saved Colors list.

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.

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.

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.

The contrast checker for text colors helps improve the accessibility of sites by indicating if the contrast between the text and the background meets the AA or AAA standard*. The contrast checker appears in the color picker whenever the color picker is being used for text.

Following is the criteria that determines if the AA or AAA standard is met:

*In accessibility standards, "AA" and "AAA" represent different levels of color contrast requirements. AA level means your colors have enough contrast to be readable, but might still present problems for some users. AAA level means you have high contrast that should be readable for the vast majority of your users.

Following is an example of the contrast color checker indicating that the text and background contrast meets AAA standard.

The contrast checker will be disabled in the following circumstances: