What Are Selection Colors?
Selection Colors allow you to quickly check and modify all colors used in a selected element. This feature makes it easy to review and adjust colors efficiently.
Viewing Used Colors
When you select a box containing child boxes, you can view all colors used within it by accessing the Selection Colors feature in the top bar.
Saved and Unsaved colors are displayed differently:
Colors saved to Color Styles or My Color → Displayed in blue text
Unsaved colors → Displayed in black text
Hover over a color in the list to highlight where it’s used in the editor.
This feature is not available for standalone boxes without child boxes.
Unregistered gradient colors will be labeled as "LINEAR."
To check all the colors used across the entire page, select the topmost layer,
<Base>, in the layer panel.
Notes:
This feature is not available for individual boxes that don't contain child boxes
All gradient colors will be displayed as "LINEAR"
Bulk Updating Colors in Selected Elements
You can modify colors directly from the Selection Colors panel. Changes made in the Selection Colors panel apply only to the selected element and won’t affect other elements.
Tip: Using the "Color Styles" feature allows you to update colors across the entire project at once. For more details, see How to Set Up Color Styles.
Use Cases
Here’s how this feature can streamline your workflow:
Check color usage before publishing
When used with the Color Styles feature, you can quickly identify colors that deviate from your brand palette. Ensure that no unintended colors are present before publishing and make instant adjustments.
Easily update page-wide color schemes
Quickly test different design variations by adjusting all colors on a page within the editor.
How to View Colors in a Selected Element
Select a box containing child boxes.
To view colors for the entire page, select the topmost layer<Base>in the Layers panel.Open the Box menu in the top style bar and hover over Selection Colors.
The color list will appear. Hover over individual colors to highlight their usage in the editor.
Note:
Please be aware that the following colors will not appear in the list:
Colors changed in Responsive settings
*Colors will appear in the list when you switch breakpoints.Colors used in Shadow settings
Colors specified in CMS Color Properties
Form placeholder colors
Colors changed in Conditional Styles
*Colors specified within Conditional Styles will only appear in the list when Conditional Styles are turned on.
How to Change Colors in Bulk
Update all instances of a color used in a selected box with just a few clicks.
Select a box.
Open the Box menu in the top style bar and hover over Selection Colors.
Click on a color from the list and update it using a color code or selection tool.
Note: If you have overridden colors within a Rich Text box, these settings take precedence. As a result, any color changes you attempt to make using the Selection Colors feature will not be applied to these elements.
How to Save Colors to Color Styles
Easily save colors from Selection Colors to Color Styles for consistent use across your project.
Select a box in the editor.
Hover over Selection Colors at the top.
Click on a color and open the Custom tab.
Click Save as Color Style + .
Once added, the color will be displayed in blue text.
