Available on: All plans

What Are Color Styles?

Color Styles let you save and manage frequently used colors, such as brand colors, in one place. Instead of manually entering color codes each time you add an element, you can apply a saved color instantly.

You can also organize your saved colors using labels and hierarchical groups, making color management more streamlined.

This guide will walk you through how to set up and manage Color Styles.

Managing Colors with Color Styles

In addition to saving colors, Color Styles allow you to assign labels and organize them into hierarchical groups.

Adding Labels

You can assign custom labels to your Color Styles (e.g., "Primary Color," "Background"). Using clear labels helps teams collaborate efficiently and maintain consistent color use within a project. You can edit labels anytime.

Screenshot: A list of labeled Color Styles.

Organizing with Hierarchy

You can create hierarchical groups by separating label names with a forward slash ("/"). This works like a folder system, making it easier to organize multiple colors.

For example, if you want to categorize text colors for headings and body text, you can label them as "Text/Heading" and "Text/Body." This automatically groups them under the "Text" category.

Screenshot: Managing "Text/Heading" and "Text/Body" in Color Styles.

Note: Label names can be up to 50 characters long, including slashes used for hierarchy.

Use Cases

Here’s how Color Styles can improve your workflow:

Consistent Team Collaboration
Registering colors in Color Styles ensures all team members use the same colors, preventing inconsistencies across the project.
Efficient Color Auditing
With Selection Colors, you can quickly identify colors that are not defined in Color Styles before publishing, ensuring uniformity across your site.
Easier Site-Wide Color Updates
If you need to change your color theme, updating a Color Style will automatically apply the change everywhere it's used—no need for manual adjustments.

How to Save a Color Style

Follow these steps to save a color as a Color Style:

Select a box in the editor.
Hover over the Color option in the top bar.
Open the Custom tab and choose a color.
Click Save as Color Style +.
Edit the label name and press Enter.

Editing Labels and Hierarchies

You can edit Color Style labels and folders anytime.

Setting Labels and Hierarchy When Registering

When registering a new Color Style, you can enter a label name. Use a forward slash ("/") to create a hierarchical structure.

Screenshot: Setting a label name when registering a Color Style.

Editing Labels and Hierarchy After Registration

You can update labels and hierarchy via the Style Panel or Style Bar.

Editing via the Style Panel

Open the Style Panel on the left and go to the Color tab.
Click the Color Style you want to edit.
Edit the label name and press Enter.

Tip: You can reorder Color Styles within the same hierarchy by dragging them in the Style Panel.

Editing via the Style Bar

Select a box in the editor.
Hover over the Color option in the top bar.
Open the Styles tab and click the edit icon next to a color.
Edit the label name and press Enter.

Note: You can create up to three hierarchy levels (e.g., "Text/Primary/Hover"). Beyond this, you'll need to use separate folders.

Applying a Color Style

To apply a saved Color Style to a box:

Select a box in the editor.
Hover over the Color option in the top bar.
Open the Styles tab and select a Color Style.

Note: Color Styles cannot be applied to CMS color properties or list color properties. These need to be set manually.

Editing a Color Style

Editing a Color Style updates all elements using that style.

Select a box in the editor.
Hover over the Color option in the top bar.
Open the Style tab and click the edit icon next to a color.
Choose a new color—changes are applied instantly.

Deleting a Color Style

Deleting a Color Style won’t remove the color from elements where it’s applied.

Open the Style Panel and go to the Color tab.
Click the Color Style you want to delete.
Click the three-dot menu in the top right and select Delete Style.

Viewing Color Styles

You can check all registered Color Styles in the Style Panel or Style Bar.

In the Style Panel

Go to the Color tab to view the full list.

In the Style Bar

Open the Color option and go to the Styles tab.

How to Check Pages Using a Color Styles

You can check which pages are using colors registered in Color Styles by following these steps:

Open the Style Panel and go to the Color tab.
Click on the Color Styles you want to review.
Click on the page listed to navigate to it.
Hover over the page to highlight areas where the color is used. Note that components and elements within lists are not included in the highlight display.