Magic Color Suggestions

Using Divi's own algorithm, recent and saved colors are magically transformed into dynamic extensions of color palettes filled with harmonious colors.

This unique color system improves the design process and encourages creativity by offering color suggestions based on the colors you already use.

Each row of color is unique and is based on a recent or saved color. Infinite possibilities can be used for many situations, such as developing a new color palette or editing an existing one. Accessing the magical system of colors is easy.

1. Expand the color palette by clicking on the ellipses or 3-point menu under the dropper containing the active color.
   
2. Once expanded, each color is displayed in its row based on similar or compatible colors. Each row is unique and offers quick access to almost unlimited color suggestions for your design.
   

Use of Divi Color Management System

This is a great function during the design process, especially if you change your mind on your color palette.

Unlike the default palette, you don't need to exit the visual builder to make changes. You can select, edit and apply color changes instantly.

How to Change Static Colors to Global Colors

Once you choose a palette, static colors can become global.

Example: This can be done with any Divi package design. Select any module, column, row or section on the page to convert a static color to overall.

1. Select the overall tab next to the saved and recent colors.
2. To set a color as a global, right-click and choose to convert to global.
   

Alternatively:

• Click on the Global tab

• Click the + icon next to the last color listed

• Click on the green mark next to the hexadecimal code to save it

This will add active color as a global color.

How to Find and Replace Colors

This saves time and allows you to try different color options on your site. Use Divi's search and replace tool to find a color you want to change.

Example: You can change the background color of your buttons in a section.

• Right click on the background color option
  

• Click Search and Replace
  

Under "within", select whether you want to replace the color in the item section, row, column, or item settings.

For this example, we will choose all the button settings. Then, choose to change the color throughout the section, row, or column.

We select this section. Then click on the overall tab and select a color. Check the "replace everything" box and click replace.

How to Edit Saved and Global Colors

To edit a saved color:

• Browse Divi → Theme Options → Default Color Selection Palette.
  

• Click the color to edit the hexadecimal code.
  

• Click Save Changes.
  

To edit a global color:

• Open the background options for any item with color options

• Click the Global tab and select the color to change

• With the active color, click the dropper to edit the color settings

• Enter a new hexadecimal code or use the Divi color selector

• Click on the brand to save

A warning will appear to confirm the changes.

How to Add Global Colors to Gradients

• Click on the background options

• Select the background gradients tab

• Click + to add a gradient

  

• Click the first color stop to add a overall color.
  

• Click the Global tab to select your color.
  

• Global color gradient stops
  

• Click on the second color stop.
  

• Select the color for the stop.
  

How to Break a Premade Design with the Divi Color Management System

1. Upload the Chocolatier package landing page and publish it.
   
2. Open the button module settings in the page header.
3. Click the Design tab.
4. Scroll to the bottom section of the button.
5. With the current color selected, click the Global tab.
6. Click the + icon.
7. Click on the green mark to save.
   We will use Search and Replace to edit all instances of that static color on the site.

1. Click on any section of your page.
2. Select an instance of the color.
3. Right-click and choose Search and Replace.
   
4. Leave the color of the text of the button as is.
5. Select all the modules inside.
6. Choose this section for the entire replacement.
7. Select your new global color from the Global tab.
8. Check the Replace everything box.
9. Click Replace to convert all instances to global color.
   

Tips and Good Practices for Color Management in Divi

• Create your saved color palette first
  When you create a new site or redesign one, it is useful to define the standardized blocks on the site.

We recommend starting by creating a style guide using Divi. The first and most important thing is to define the color palette of the site.

Once created, save it as the default palette. Then use those colors when designing the elements of your style guide, including variations.

Items created can be saved in the Divi Library for easy access anywhere.

• Convert static to global colors when possible
  If you use the same color in multiple sections or pages, assign the overall version to facilitate future changes.

This saves a lot of time and is one of the best features of the color management system.

• Limit the color palette (maintain simplicity)
  The default palette uses up to 8 colors. This is good design practice to maintain harmony and visual balance.

Too many colors make it difficult to achieve a balanced and attractive design.

Choose 3 colors and use variations of those shades for a visually shocking palette.

Continue learning

• For more information on the Color Management System and how to create amazing designs, check out these related posts:

• How to apply color palettes to your Divi site

• Manage the full color scheme from the visual builder

• Divi function preview: a powerful new color manager