Selection Colors is a feature that lets you view all the colors used within a selected box or group at a glance. You can check and bulk-change colors on a per-page or per-element basis, making it easier to review and adjust your color scheme.
While this isn't a site-wide color management feature, it does let you see and change all the colors used within a selected range or page.
Use Cases
Selection Colors can help streamline your design and workflow in scenarios like the following.
Check color usage before publishing
You can see a list of all the places where colors not registered in Color Styles are being used. Before publishing, you can verify that no unintended colors are present and fix them on the spot.
Explore page color schemes in the editor
Use the bulk color change feature to quickly create different color patterns and compare how the entire page looks.
Note: Colors used in the following ways will not appear in the Selection Colors list.
Colors changed via Responsive settings (they appear when you switch to the relevant breakpoint).
Colors set in Shadow.
Colors specified via CMS Color Properties.
Form placeholder colors.
Colors changed via Conditional Styles (they only appear in the list when Conditional Styles are turned on).
Viewing Selection Colors
Selection Colors appear at the bottom of the [Box] tab in the right panel.
Select the box element whose colors you want to review.
To view all colors used on an entire page, select the top-level layer <Base> in the Layers panel.
When you select a box that contains child boxes, you can see all colors used within that element at a glance.
If you select a single box with no child boxes, Selection Colors will not be displayed.
Select the [Box] tab in the right panel. If the panel is closed, open the right panel first.
Scroll down to the bottom of the panel to find [Selection Colors].
Click the down arrow next to the color count to see the details of all colors in use.
Colors are displayed in the list as follows:
Colors registered in Color Styles (or My Color): shown in blue text
Unregistered colors: shown in black text
Hover over a color to highlight the elements using that color in the editor.
Gradient colors not registered in Color Styles are all displayed as "LINEAR."
Bulk-changing colors within a selected element
You can bulk-change all colors used within a selected element using Selection Colors. Changes made this way only apply to the selected element or page — they don't affect the rest of your project.
In the Selection Colors list, click the color you want to change.
Pick a new color from the Color Palette and apply it.
Tip: Want to change colors across your entire project?
To change colors across your entire project at once, use the Color Styles feature. When you edit a Color Style, the change is automatically applied to every element using that style.
For more details, see Setting up Color Styles.
Adding a Selection Color to Color Styles
In the Selection Colors list, click the color you want to register as a Color Style.
Select and open the [Custom] tab in the Color Palette.
Copy the color code and keep it for later.
Select and open the [Styles] tab.
Click the [Register Color Style] button. If you have many styles registered and the button isn't visible, scroll to the bottom of the list.
The selected color will immediately be replaced with the default Color Style color and registered as a Color Style named [New Color].
Paste the color code you copied in step 4.
If needed, rename the Color Style label.
