Studio Editor: Working with Site Colors

4 min read

Site colors make up the overall color theme used across your client's site. This theme is divided into color ranges that are applied to different categories (e.g. background and text) and contain specific shades.

Both single colors and color ranges are customizable, so you can design and adjust specific parts of the site as needed.

How do I find site colors?

In this article, learn more about:

Editing colors on a site

Depending on your design needs, you can customize the overall range of a category, or a specific shade in a range.

To edit the site colors:

Click Site Styles on the left side of the editor.
Click the Colors tab.
Choose what you want to adjust - a color range, or an individual color:
- Color range:
  1. Click the Edit color range icon on the relevant range.
  2. Choose how to select the middle color in the range from the following options:
    - Select a new color from the picker using your cursor.
    - Input the HEX, RGB, or HSB information into the relevant fields.
    - Click the Dropper to select a new color from anywhere on your screen.
  3. Click Apply.
- Single color:
  1. Hover over the shade and click the Edit icon .
  2. Choose how to select the new color from the following options:
    - Select a new color from the picker using your cursor.
    - Input the HEX, RGB, or HSB information into the relevant fields.
    - Click the Dropper to select a new color from anywhere on your screen.
  3. Click Apply.

A color in a range is being changed. A new shade has been selected, and the cursor is clicking the Apply button.

Applying site colors to elements

As colors are assigned to categories, they're automatically applied to some themed elements in the Add Elements panel (e.g., styled text elements). You can also apply site colors to elements on the canvas using the Inspector.