Site-wide colors

Site-wide colors are colors that you can create, name, and reuse throughout your site. You can apply these colors to objects, backgrounds, image tints etc. across all your pages. When you change a site-wide color that you've saved, the change will automatically be applied everywhere the color is currently being used. What a time saver! 

To learn more about how site-wide colors will help you keep a consistent color scheme across your site and dramatically speed up your update process check out our blog.


Creating a site-wide color

There are two ways to create a site-wide color: 1. manually, or 2. with the color assistant.


Creating site-wide colors manually

  1. Open the new in-Editor Site settings at the bottom of the left sidebar.
  2. Click the 'New Color' button.
  3. Create your color by using one of the following methods:
    • Select a color from the available swatches
    • Create and new color using the color selection controls
    • Enter (or paste) your custom color code into the text field below the color controls. You can paste RGB, RGBA, and HEX color code values.
  4. Make the color your own by naming it! In the field that says 'New Color' type the new name. This may be a name that implies how to use that color, for example, Accent, Brand color, Light background etc.
  5. Click 'Update site-wide color' to save your new site-wide color.

Creating site-wide colors automatically with the color assistant

Our color assistant will suggest frequently used colors found throughout your site (colors you have not already added as a site-wide color), allowing you to quickly build out your list of Sste-wide colors. 

When you open a new page to edit, our color assistant will automatically suggest colors to add to your site-wide colors list. As you build your site-wide color list, our color assistant will find those colors across other pages on your site and let you know if the color exists on a new page when the page is opened. 

To create new site-wide colors using the color assistant: 

  1. Open the new in-Editor Site settings at the bottom of the left sidebar.
  2. Click the 'Suggestions' button.
  3. You will see up to 8 colors that our color assistant is suggesting. Click on each color that you would like to add to your site-wide colors.
  4. Once you have selected all the colors you want to add (you can always come back and add more) click the button 'Add selected colors'.
The following updates have taken place;
  • Your new colors are now in your site-wide colors list. 
  • Colors have been named using the hex color value, you can edit that to be something more familiar to you.
  • You can continue to access Color suggestions.
  • Objects on the current page have been updated to use the new site-wide colors. (This does not update the entire site at this time, only the current page. Colors with transparency are not updated at this time, you will need to update those individually.)

Next steps. Now that you have added your colors to build out your site-wide colors list, navigate through your existing pages and update the colors across your objects to use the new site-wide colors.

Applying site-wide colors


Applying site-wide colors to objects

  1. Select an object or add one to the page.
  2. Click to apply a color as you normally would.
  3. Choose one of your new site-wide colors.

Applying site-wide colors to text

  1. Select a text-box or add one to the page.
  2. Click to apply a color as you normally would.
  3. Choose one of your new site-wide colors.

Notice how the site-wide colors are presented and not the traditional color picker? This is intentional, we want to encourage the reuse of existing colors, especially site-wide colors.

Applying site-wide colors to Section or Column background

  1. Select the Section or Column you want to apply a background color to.
  2. Click the 'Section/Column background' depending on what you are applying the color to.
  3. Choose the 'Color' option.
  4. Select the site-wide color you would like to apply.

Applying site-wide colors as an image tint

  1. Select an image.
  2. In the Style tab select 'Color Tint'.
  3. Choose one of your site-wide colors.
  4. Use the opacity slider to control the tint of the color.

You can use the opacity slider whenever you apply a color to an object to.

Change a site-wide color

Ok, now that we have this new site-wide color used all over your page let's change it, everywhere, in one step!

  1. Open Site settings. You can open Site settings by clicking on the menu item in the left sidebar or clicking the "Edit site-wide colors" button in the color view in the Editing menu.
  2. Click on the color you would like to change. You can click on the color chip or the Edit button, both will open the color picker popover. 
  3. Change your color, you can see a preview of what the color will look like on your page. 
  4. Once you are satisfied click the button "Update site-wide color" to save your update.
  5. Magic, well not really, but close. And, like everything with Pagecloud, you can undo.

Once you save this page the site-wide color will be updated accross all pages.

Copying a site-wide colors

  1. Copy the color value. 
  2. Click on an object. 
  3. Paste the color value into the color input feild.

Updating your current pages with site-wide colors


  1. Using the above steps create your site-wide colors.
  2. Navigate to each page in your site and add apply your site-wide color to your desired objects.

Once you have applied a site-wide color to an object changing the site-wide color will change all objects across the site with that color

Managing site-wide colors

Manage your site-wide colors in Site settings located in the left sidebar. 


Rename a site-wide color

  1. Open Site settings located in the left sidebar.
  2. Move the mouse over the site-wide color you want to rename and click 'Edit'.
  3. Replace the old name with the new name.
  4. Click 'Update site-wide color' to save your new site-wide color's name.

Sort site-wide colors

The list of site-wide colors in Site settings can be organized. By clicking to the left of the color swatches you can drag and drop the colors to reorder the list.

Remove a site-wide color

There are two ways to remove a site-wide color: 'Replace with another color' or 'Remove site-wide color'.

Remove a site-wide color with 'Replace with another color'

Replacing one site-wide color will help you consolidate similar colours into one for easier application and updates and broadly apply visual updates.

  1. Open Site settings located in the left sidebar.
  2. Move the mouse over the site-wide color you want to rename and click 'Remove'.
  3. Select 'Replace with another color'.
  4. In the dropdown select the replacement color.
  5. Click 'Yes, replace color'.

The site-wide color that you removed will be replaced across your site with the site-wide color you select. This cannot be undone once you save the page.

Remove a site-wide color with 'Remove site-wide color'

  1. Open Site settings located in the left sidebar.
  2. Move the mouse over the site-wide color you want to rename and click 'Remove'.
  3. Select 'Remove site-wide color'.
  4. Click 'Yes, remove color'.

Using a Custom Color


You still have the option to use custom colors on a page that you've updated with site wide colors.

  1. Select the object you want to add a custom color to.
  2. In the 'Style' tab select 'Color'.
  3. Click the 'Custom Color' button.
  4. Add your custom color.

A custom color is a color that does not update site-wide and is best used for a color that is only used once.

User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!