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.
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.
Click the gear icon next to the color palette options.
Click on the Edit icon to change the color.
Click the Finish Editing Saved Colors link to save your changes.
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.
Click into the module and head over to the design tab.
Bring up the element's color settings by clicking on the global tab.
Click on the
+icon located just above the global color tab.
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.
Click the green check button next to the color's hex code to save it.
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.
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.
Click on any color option within a module, column, row, or section
Click on the recent tab. There, you will find recently used colors during the design process.
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.
Expand the color palette by clicking on the ellipses or 3-dot menu under the eyedropper containing the active color.
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.
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.
Select the global color tab next to saved and recent colors.
To set a color as global, right-click and choose convert to global.
Alternatively,
Click the Global tab
Click the
+icon next to the last color listed.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.
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.
Right-click on the background color option
Click 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.
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:
Navigate to Divi → Theme Options → Color Pickers Default Palette.
Click on the color to edit the hex code.
Click Save Changes.
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:
Click into the background options for any element with color options
Click on the Global tab, then select the color you want to change
Once the color is active, click the eyedropper to edit the color's settings
Enter a new hex code or click within the Divi color picker
Click the check mark to save it.
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.
Click the Background options
Click the Background Gradient tab
Click the
+to add a gradient.
Click on the first color stop to add a global color.
Click the Global tab to select your color.
Click the second Color Stop.
Select the color for the stop.
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.
Load the landing page design from the Chocolatier Divi layout pack into your website, then publish the page.
Open the Button module settings in the page's header section
Click on the Design Tab.
Scroll down to the button background section.
With the current color selected, click on the Global tab,
Click the
+icon.Click the green check to save your changes.
We will use Find & Replace to edit all instances of that static color used in your site.
Click on any section on your webpage
Select an instance of the color.
Right-click and select find & replace.
Leave the find the button text color as is
Select all modules within
Select this section throughout
Select your newly created global color under the global tab
Tick the Replace all box
Click Replace to convert all instances of the color to your global one
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: