Skip to main content
All CollectionsEditorProcess optimization
Viewing and Changing Selection Colors in Bulk
Viewing and Changing Selection Colors in Bulk

Quickly view and edit the colors used in selected elements. Learn how to highlight color usage and adjust your page’s color scheme.

Saika avatar
Written by Saika
Updated yesterday

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.

Using the Selection Colors feature
  • 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.

Screenshot: Selecting the topmost layer,&nbsp;, 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.

Screenshot: Creating and reviewing different color scheme designs in Studio.

How to View Colors in a Selected Element

  1. Select a box containing child boxes.
    To view colors for the entire page, select the topmost layer <Base> in the Layers panel.

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

Viewing a list of colors used in the selected areas

Note:

Please be aware that the following colors will not appear in the list:

How to Change Colors in Bulk

Update all instances of a color used in a selected box with just a few clicks.

  1. Select a box.

  2. Open the Box menu in the top style bar and hover over Selection Colors.

  3. Click on a color from the list and update it using a color code or selection tool.

Batch updating colors using Selection Colors

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.

  1. Select a box in the editor.

  2. Hover over Selection Colors at the top.

  3. Click on a color and open the Custom tab.

  4. Click Save as Color Style + .

Once added, the color will be displayed in blue text.

GIF: Registering a new Color Style.

Did this answer your question?