Project-wide colors

Last Modified on 07/29/2024 11:58 am EDT

Project-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 project-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 project-wide color

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

Creating project-wide colors manually

  1. Open the new in-Editor Project 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 project-wide color' to save your new project-wide color.

Creating project-wide colors automatically with the color assistant

Our color assistant will suggest frequently used colors found throughout your project (colors you have not already added as a site-wide color), allowing you to quickly build out your list of project-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 project-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 Project 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 project-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 project-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 project-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 project-wide colors list, navigate through your existing pages and update the colors across your objects to use the new project-wide colors.

Applying project-wide colors

Applying project-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 project-wide colors.

Applying project-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 project-wide colors.

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

Applying project-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 project-wide color you would like to apply.

Applying project-wide colors as an image tint

  1. Select an image.
  2. In the Style tab select 'Color Tint'.
  3. Choose one of your project-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 project-wide color

Ok, now that we have this new project-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 project-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 project-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 project-wide color will be updated accross all pages.

Copying a project-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 project-wide colors

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

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

Managing project-wide colors

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

Rename a project-wide color

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

Sort prject-wide colors

The list of project-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 project-wide color

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

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

Replacing one project-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 project-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 project-wide color you select. This cannot be undone once you save the page.

Remove a site-wide color with 'Remove project-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 project- 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 project-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!