Color styles let you register and manage colors you use repeatedly across your site, such as brand colors.
You can organize them with labels and hierarchy, making it easy to manage colors efficiently — even for team projects or large-scale sites.
Use cases
Color styles can streamline your design and workflow in situations like these:
Consistent color management for team projects
By registering colors as color styles in advance, you can prevent unintended use of similar colors and maintain consistency across your entire site.
Efficient color auditing
Use the Selection Colors feature to identify colors that aren't defined as color styles. Before publishing, you can spot unintended colors and batch-replace them on the spot.
Streamlined site-wide color changes
With color styles, you can update all instances of a color at once. There's no need to change colors element by element, saving you time on revisions.
Registering a color style
You can register a color style from the Style panel or from a color setting.
Register a color style from the Style panel
Click the [Style] icon
in the left navigation to open the Style panel in the left panel.
Select the [Color] tab.
Click the [+] button in the upper right, or click [+ Add].
A new color style named "New Color" is added immediately.
Set the color using the color palette.
To rename the color style from "New Color," click the label field in the color palette and edit it.
Register a color style from color settings
Select the box element you want to set a color for.
In the right panel, open the color palette from a color setting menu such as [Background Color] or [Color] under [Typography]. If the panel is closed, open the right panel first.
Click the [Style] tab.
Click [Register Color Style]. A color style is added immediately and applied to the element you selected in step 1.
Set the color using the color palette.
To rename the color style from "New Color," click the label field in the color palette and update it.
Managing color styles with labels
You can manage your registered color styles more effectively by giving them descriptive names (labels) that indicate their purpose or where they're used.
Separate label names with a "/" (forward slash) to create a hierarchy, similar to organizing items into folders.
Set a name (label) for a color style
You can give each color style any name you like. Using descriptive labels makes it easier for team members to understand the intended use of each color.
You can edit label names from the Style panel or from color settings.
Edit the label from the Style panel
Click the [Style] icon
in the left navigation to open the Style panel in the left panel.
Select the [Color] tab.
Click an existing color style.
Click the label field in the color palette to change the label name.
Edit the label from color settings
Select a box element that has the color style whose label you want to edit.
In the right panel, click the color style name shown in the color setting menu to open the color palette. If the panel is closed, open the right panel first.
Click the [Style] tab.
Click the icon next to the color style's label name. If you haven't renamed it, it will appear as "New Color."
Click the label field and update the label name.
Create a hierarchy for color styles
When you separate a label name with a "/" (forward slash), the text before the slash acts like a folder, letting you organize color styles into a hierarchy.
Example: Grouping color styles used for text on your site
Color style for heading text: Text/Heading
Color style for body text: Text/Body
In this case, "Heading" and "Body" are nested inside a parent group called "Text."
Label naming rules and notes
Label names can be up to 50 characters long, regardless of character type.
When using "/" (forward slash) to create hierarchy levels, the slash counts as one character.
You can create up to 3 levels of hierarchy (e.g., Text/Primary/Hover).
To move a hierarchical color style to a different level, edit the label text directly. Drag & drop cannot be used to change hierarchy levels.
Applying a color style to a box element
You can apply color styles from the color settings of box elements or text.
Select the box element you want to apply a color style to.
In the right panel, open the color palette from a color setting menu such as [Background Color] or [Color] under [Typography]. If the panel is closed, open the right panel first.
Click the [Style] tab.
Select the color style you want to apply from the list.
Note: Color styles and color properties
Color styles cannot be applied to CMS color properties or List color properties.
Editing a registered color in a color style
When you edit a color style's registered color, the change is reflected everywhere that color style is applied.
Edit a registered color from the Style panel
Click the [Style] icon
in the left navigation to open the Style panel in the left panel.
Select the [Color] tab.
Click an existing color style.
Use the color palette to change the registered color.
Edit a registered color from color settings
Select a box element that has the color style you want to edit.
In the right panel, click the color style name shown in the color setting menu to open the color palette. If the panel is closed, open the right panel first.
Click the [Style] tab.
Click the icon next to the color style's label name.
Use the color palette to change the registered color.
Deleting a color style
You can delete a color style from the Style panel.
After deletion, the color settings on any box elements that used the style will remain intact, but the color will no longer be managed as a color style.
Click the [Style] icon
in the left navigation to open the Style panel in the left panel.
Select the [Color] tab.
Click an existing color style.
Click the three-dot menu next to the label field in the color palette.
Click [Delete Style] to remove it.
Viewing registered color styles
You can view all registered color styles in the Style panel or in the [Style] tab within the color palette.
Style panel: Under the [Color] tab in the Style panel on the left side of the editor
Color palette: Under the [Style] tab in the color palette opened from a color setting menu
Reordering color styles
In the Style panel, you can drag and drop color styles to reorder them within the same hierarchy level. You cannot drag and drop across different hierarchy levels.
Click the [Style] icon
in the left navigation to open the Style panel in the left panel.
Select the [Color] tab.
Click the reorder icon in the upper right of the panel.
Drag the icon that appears at the beginning of each color style to reorder them.
Checking where a color style is used
You can check which pages use a specific color style from the Style panel.
Click the [Style] icon
in the left navigation to open the Style panel in the left panel.
Select the [Color] tab.
Click an existing color style.
At the bottom of the color panel, [Usage] shows the number of places where that color style is used.
Click the down arrow next to the usage count to display the list of pages where it's used.
With the usage pages expanded, hover over a page to highlight where the color style is used on that page.
Note: Elements inside components and lists are not included in the highlight display.
FAQ
Q. What happens when I copy and paste a box with a color style to another project?
Q. What happens when I copy and paste a box with a color style to another project?
A. When you copy and paste to another project, the colors are preserved as they are.
However, the color style settings are not carried over — the colors are treated as regular color settings in the destination project.
If you want to manage them as color styles in the new project, you'll need to register them as color styles again in that project.
Q. Are color styles included in version history?
Q. Are color styles included in version history?
A. Yes, color styles are covered by version history, which saves changes and who made them as "versions" that you can restore if needed.