Use the color picker to manage the color scheme of text, backgrounds, overlays, and more. You can select colors from a palette, input HEX or RGB values, or create custom gradients. The recent colors feature helps maintain a consistent, professional look across your site.
Selecting a color style
Before picking a color, decide if the element should use a single color or a gradient.
-
Single color
If using a single color, pick a color from the "Recent colors" tab or select Choose another color.
-
Gradient
Gradients are available for row, column, and widget backgrounds, as well as image overlays. To apply a gradient, make sure to:
- Select two colors for the gradient stops. You can reverse the colors to adjust the stop's positioning.
- Choose a gradient direction:
- The center option generates a radial gradient.
- Side options creates a linear gradient.
Note:
Gradients can't be saved in Theme Colors.
Managing global colors
Global colors allow you to define a primary color palette and link those colors to widgets. When you update a global color, every linked element updates automatically. This reduces design time and ensures style consistency across all pages. To learn how to configure these, see our Theme Colors article.
Saving and using colors
Saved colors
Save frequently used colors and gradients to the "Saved colors" list for easy access. You can save up to 48 colors and gradients in the saved colors list.
- Add a color: Click the Saved colors tab in the color picker and click +.
- Remove a color: Right-click the color and select Remove.
Recent colors
The "Recent colors" menu displays a sample of colors recently used on your site, allowing you to quickly re-apply existing shades.
Choose another color
Select a hue using the color palette or the color panel. Alternatively, enter a HEX or RGB value in the text box.
To match a color perfectly from an existing site element, click the eyedropper icon and select the desired color from the page.
Adjust opacity
Use the opacity slider to determine the transparency of an element. As you reduce opacity, the background color or image behind the element will blend with it.
Checking text contrast for accessibility
The contrast checker improves site accessibility by indicating if the contrast between text and its background meets AA or AAA standards. This tool appears automatically when using the color picker for text elements.
The following criteria determine accessibility levels:
| Type of text | Standards* | Font size | Minimum contrast ratio |
|---|---|---|---|
| Regular text | AAA | Under 18pt | 7:1 |
| Large text | AAA | 18pt or 14pt | 4.5:1 |
| Regular text | AA | Under 18pt | 4.5:1 |
| Large text | AA | 18pt bold or 24pt and larger | 3:1 |
- AA level: The colors have enough contrast to be readable for most, but may still present issues for some users.
- AAA level: High contrast that is readable for the vast majority of users.
Following is an example of the contrast color checker indicating that the text and background contrast meets AAA standard:
The contrast checker is disabled in the following cases:
- The selected text contains multiple colors.
- The text is placed on a gradient background.
- The text is placed on an image background.
Considerations
- Gradients aren't available for text. You won't see this option in the color picker for text elements within the "Global design" tab or widget editors.
- When working with backgrounds, switching between "Color" and "Image" resets the previous selection. For example, moving from a color to an image removes the color or gradient settings.
- Gradients override individual button backgrounds. To revert this, reselect the background for the individual buttons.
