Studio Two Editor: Working with Site Colors

Use site colors to give the site a consistent look. Edit the default colors or add your own in the Site Styles panel.

Every site you create in the Studio Two Editor comes with 9 colors by default, named Color 1 to Color 9. The top 6 are the default colors for apps and elements.

Whether you've created a site with Aria or chosen a template, these colors reflect the site's initial style. You can change them and add your own.

Customize the site's colors in the Site Styles panel to match its branding.

1. Go to your editor.

2. Click the Site Styles icon on the left side of the editor.

3. Select the Colors tab.

4. Click the color you want to customize.

5. Choose a new color from the picker. You can select it from the palette, use the dropper, or enter the hex code into the field.

6. Click Apply.

1. Go to your editor.
2. Click the Site Styles icon on the left side of the editor.
3. Select the Colors tab.
4. Choose what you want to do:
   • Add a new color:
     1. Click the Add color icon .
     2. Choose a new color from the picker. You can select it from the palette, use the dropper, or enter the hex code into the field.
     3. Click Apply.
   • Manage colors:
     1. Hover over the relevant color and click the More Actions icon .
     2. Use the options to manage the color:
        • Rename: Click Rename and enter the new name for the color into the field.
        • Delete: Click Delete to remove the color.

As colors are assigned to categories of elements and content, they're automatically applied to some themed elements in the Add Elements panel (e.g. styled text elements).

You can apply site colors to elements from the action bar.

1. Go to your editor.
2. Click the relevant element on the canvas.
3. Click the color you want to change on the action bar.
4. Click the Brand icon in the panel.
5. Select a color under Site colors.