Skip to main content
The Divi Color Management System

How to use Divi's sophisticated color options.

Updated over a week ago

Divi's color management system has evolved over the years to become one of the most robust color systems in the WordPress universe.

Divi's color system, combined with the ability to edit and create saved, global, and recent color palettes based on user interaction, is truly unparalleled.

Understanding Divi's Color Management System

The Divi color manager has three color palettes that are always available no matter where you're accessing color options throughout Divi's visual builder:

  • Saved colors

  • Global colors

  • Recent colors

Saved Colors

Saving colors can be accomplished by setting a default color palette in Divi's theme options.

Navigate to Divi β†’ Theme Options β†’ General β†’ Color Pickers Default Palette to set your colors.

Divi color picker default palette

Once saved, colors are accessible anywhere within the Visual Builder's color options under the saved tab.

You can also edit your Saved color palette directly in the Visual Builder.

  1. Click the gear icon next to the color palette options.

    edit save color palette

  2. Click on the Edit icon to change the color.

    Change saved color

  3. Click the Finish Editing Saved Colors link to save your changes.

    Finish editing color

Global Colors

When accessing color options in the Visual Builder, the color palette next to Saved is called Global.

Global colors in Divi are designed to allow you to assign and edit colors easily across your entire site.

When you change a global color, any element across your entire website using that global color will change, too. This makes it possible to make sweeping yet consistent design choices from anywhere you can access color options in Divi.

Building a (Dynamic) Global Color Palette

Building a Dynamic Global Palette is an excellent Divi Color Management System feature.

Click on the Global tab in your module's color settings to access global colors.

Assigning a global color to elements is an easy way to keep colors consistent and change your design if you choose a different color scheme.

  1. Click into the module and head over to the design tab.

  2. Bring up the element's color settings by clicking on the global tab.

    Global colors tab

  3. Click on the + icon located just above the global color tab.

    Add a global color

  4. The Divi color picker will appear, allowing you to enter a hex code for your new global color or click the color picker to choose one.

  5. Click the green check button next to the color's hex code to save it.

    Saving a global color

You can add as many global colors as you would like. Once saved, global colors are located under the color picker. The white triangle in the lower right corner of the color swatch identifies them.

global colors

You can then choose any global color and assign it to your element. Once a global color is applied, you can easily change it to another color you choose.

As previously mentioned, elements with global colors applied will change dynamically when a global color is edited.

Recent Colors

The third color palette that is always available in the Divi Color Management System is your recent color palette.

  1. Click on any color option within a module, column, row, or section

  2. Click on the recent tab. There, you will find recently used colors during the design process.

Divi color management recent colors

Magic Color Suggestions

There is a fourth and final essential feature of Divi's Color Management System: Magic Color Suggestions.

Using Divi's proprietary algorithm, Recent and Saved colors are magically transformed into dynamic color palette extensions full of harmonious colors.

This one-of-a-kind color system enhances the design process and enables creativity by providing color suggestions based on the colors you already use.

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

  1. Expand the color palette by clicking on the ellipses or 3-dot menu under the eyedropper containing the active color.

    Divi magic color interface

  2. Once expanded, each color is displayed in its row based on similar or compatible colors. Each row is unique and provides quick access to nearly unlimited color suggestions for your design.

    Divi expanded color options

Using Divi's Color Management System

Divi's Color Management System allows users to update the default palette with colors you can update anywhere in the Visual Builder.

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

Unlike the default palette, there's no need to leave the Visual Builder to make changes. You can select, edit, and apply color changes on the fly.

How to Change Static Colors to Global Colors

With Divi's Magic Color Management system and Global Color options, it's easy to build a dynamic color palette to create a beautiful design for your website.

Once you've chosen a palette, static colors can be converted to global ones.

Example: This can be done with any of Divi's layout pack designs. Select any module, column, row, or section on the page to convert a static color to a global color.

  1. Select the global color tab next to saved and recent colors.

  2. To set a color as global, right-click and choose convert to global.

Convert to global color

Alternatively,

  1. Click the Global tab

  2. Click the + icon next to the last color listed.

  3. Click the green check button next to the hex code to save it.

This will add the currently enabled color swatch as a global color.

new global color Divi color managemen

How to Find and Replace Colors

Once your global palette is set, Divi users can find any instance of a global color and replace it across the page.

This saves time and allows you to test different color options for your website. You can use Divi's handy find and replace tool to find a color to be replaced.

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

  1. Right-click on the background color option

  2. Click Find and Replace

Divi find and replace

A dialog box will appear, allowing you to find the background color and select either a saved, global, or recent color.

Under within, select whether you'd like to replace the color in the section, row, column, or element settings.

For this example, we'll choose all button settings. Next, choose to change the color throughout the section, row, or column.

We'll choose this section. Next, click the global tab and select a color. Finally, tick the replace all box, then click replace.

find and replace all colors

How to Edit Saved and Global Colors

During the design process, there may be instances where you want to change Saved or Global Colors. Editing colors is a simple process.

To edit a Saved Color, follow these steps:

  1. Navigate to Divi β†’ Theme Options β†’ Color Pickers Default Palette.

  2. Click on the color to edit the hex code.

  3. Click Save Changes.

edit saved colors

Note: You can edit the saved color at the module level, but this will not change the saved color globally.

To edit a global color, follow these steps:

  1. Click into the background options for any element with color options

  2. Click on the Global tab, then select the color you want to change

  3. Once the color is active, click the eyedropper to edit the color's settings

  4. Enter a new hex code or click within the Divi color picker

  5. Click the check mark to save it.

Edit global colors with Divi Color Management

A popup will appear asking you to confirm your changes.

Note: Once you change a global color, it will change all instances of the color across your entire website.

How to Add Global Colors to Gradients

Another great feature of using Global Colors in Divi is the ability to assign them to background gradients.

  1. Click the Background options

  2. Click the Background Gradient tab

  3. Click the + to add a gradient.

    Global gradient stops

  4. Click on the first color stop to add a global color.

  5. Click the Global tab to select your color.

    Global color gradient stops

  6. Click the second Color Stop.

  7. Select the color for the stop.

    Gradient color stop 2

  8. Set the gradient type, direction, and other options for your gradient.

View our Background Options in Divi documentation to learn more about gradient options,

How to Rebrand a Premade Layout With the Divi Color Management System

As mentioned, the Divi Color Management System can edit colors on Divi layout packs.

Users can update colors to reflect a new global palette of their choosing. Let's walk through the steps of updating the static colors in the Chocolatier Divi layout pack to global colors.

  1. Load the landing page design from the Chocolatier Divi layout pack into your website, then publish the page.

    Divi layout pack

  2. Open the Button module settings in the page's header section

  3. Click on the Design Tab.

  4. Scroll down to the button background section.

  5. With the current color selected, click on the Global tab,

  6. Click the + icon.

  7. Click the green check to save your changes.

    Adding a new global color

We will use Find & Replace to edit all instances of that static color used in your site.

  1. Click on any section on your webpage

  2. Select an instance of the color.

  3. Right-click and select find & replace.

    find and replace button settings with Divi Color Management

  4. Leave the find the button text color as is

  5. Select all modules within

  6. Select this section throughout

  7. Select your newly created global color under the global tab

  8. Tick the Replace all box

  9. Click Replace to convert all instances of the color to your global one

replace all colors with Divi color management system

Tips and Best Practices for Divi Color Management

Now that we've explained how Divi's Color Management System works and how to use it let's discuss some best practices to implement when working within it.

Create Your Saved Color Palette First

Whenever you create a new website or redesign an existing one, it's useful to know the standardized building blocks of that site.

We encourage everyone to begin by creating a style guide using Divi itself. The first (and one of the most important) aspect of this style guide is determining the website's color palette.

Once that color palette is created, save it as your default palette, as shown above. You can then use these colors when designing your style guide's elements (including elements with color variations).

Once these elements are created, they can be saved to the Divi Library, where you can quickly and easily access them wherever you are working on your site.

Convert Static Colors to Global Colors Where Applicable

When using the same color from section to section and page to page, assigning the global version of that color to those elements in each instance is a good idea.

That way, if, for some reason, down the road, you want to change that color, you will only have to do it once instead of every instance where the color is used across your entire website.

This is a huge timesaver and one of the best features of the Divi Color Management System.

Embrace Color Palette Limits (Keep Things Simple)

Divi's Color Pickers Default Palette uses a maximum of 8 colors. This isn't done by accident. It's good design practice to limit the number of colors used in any design.

This is important to achieve harmony in color combinations, which is the backbone of color theory. Visual balance is essential in any website's design and is harder to achieve if too many colors are used.

After all, you want to ensure your site's visitors are manageable. Keep your design simple by choosing 3 colors, then focus on using hues of those colors to achieve a visually stunning color palette.

Continue Learning

For more information on the Divi Color Management System and how to use it to create stunning designs on your websites, check out a few related posts:

Did this answer your question?