Comparing Divi 4’s And Divi 5’s Color Pickers

Color sets the tone before a single word is read, but traditional color pickers make it hard to achieve true brand consistency. Instead of precision, you often get guesswork and close-enough approximations.

That’s why Divi 5 completely reimagined its color system. In this post, we’ll compare it directly to Divi 4’s color picker and show how much more powerful and flexible it’s become.

The Color Pickers Compared

Put them side by side, and you’ll immediately see how powerful the new interface is. Divi 4’s color picker served us well with its familiar rainbow spectrum and drag-to-select approach.

You’d drag that white circle around to pick colors, work with hex codes, and organize things through the Saved, Global, and Recent tabs. Those small white triangles on color swatches told you which ones were global colors.

Beyond the looks, Divi 4’s color picker had a great foundation. The Magic Color tool was pretty smart, pulling from your page colors and recent picks to suggest palettes that actually worked together. This beat starts from scratch every time.

Where Divi 4 Got Limited

However, not all was perfect. Everything used hex or rgba codes only. Getting a lighter version of your blue meant guessing or using another app to figure it out. If your branding often needs 20% darker or 40% lighter colors than the main brand color, Divi 4 couldn’t do this for you.

Each color lived by itself. You couldn’t build smart color systems where colors are related to each other inside Divi itself. Building proper contrast ratios took manual work outside of Divi.

What Are Divi’s 5 Visual Changes

Divi 5 keeps the visual color picker but adds precise sliders with many more options (we will discuss this further). The Global tab evolved into a Dynamic Variable icon that connects directly to Divi’s variable system, which includes colors.

The color swatches themselves became smarter; they actually show you what type of color you’re working with and how it connects to your system.

What you’re seeing is Divi moving from individual color picking to a color system. Divi 4 was built for “I need this specific blue.” Divi 5 was built for “I need a blue that’s 20% lighter than my primary color and updates automatically when I change my brand colors altogether.”

The interface had to change because what it does changed.

Divi 5’s New Color Picker

Our team rebuilt the color system because the old approach couldn’t handle modern design workflows. This new picker centers around Hue, Saturation, and Lightness (HSL), relative color relationships, and deep integration with Divi 5’s variable system.

Instead of working with isolated hex codes, you can now build connected color families where changing one color automatically updates all related variations. There are separate sliders for hue, saturation, lightness, and opacity, which let you make precise adjustments. The interface shows you exactly what type of color you’re working with through visual indicators.

Color swatches now display information about themselves. You can see if a color is a static value, a variable, or a Relative Color with HSL modifications applied. The system shows all the color details you need to know.

How The New System Actually Works

Relative Colors start with a base color variable and allow you to apply variations. Pick your primary blue variable, reduce lightness by 20%, and save it as the “Royal Deep Blue” variable.

Divi 5’s HSL Color Picker vs Divi 4’s Color Picker

Both systems help you manage colors across your site but work in completely different ways. Understanding this difference explains why the interface had to change so dramatically and why the new approach speeds up building.

How Divi 4’s Global Colors Work

Divi 4’s global colors worked like a basic palette system. Save your brand blue once, then click it whenever you need that exact shade. Later, swap out that blue for a different one and watch every button, header, and background update across your entire site.

Most people set up three or four main brand colors this way. It beats hunting through hex codes or trying to remember if you used #2E86C1 or #3498DB for your links.

The problem came later when you had eight global colors and couldn’t remember why you saved that particular shade of gray. Was it for text? Borders? Background overlays? Global colors had no labels or descriptions to jog your memory.

Why Divi 5 Moved To Design Variables

Design Variables now handle more than just colors. Fonts, spacing numbers, images, and text strings all get the same treatment. Everything lives in one Variable Manager instead of floating around different panels.

Each variable gets a proper name and description. Instead of “Global Color 3,” you can call it “Header Text Gray” or “Subtle Background Overlay.” Six months later, you’ll know exactly what it’s for.

But here’s where things get interesting. Variables can reference each other and form relationships. Set your primary green as the foundation. Create a “Burnt Moss” that takes that green and reduces its brightness. Then, build a “Shadow (Burnt Moss)” that brings this burnt moss color and drops the opacity to 15%.

And, of course, all three variations update automatically if you change your primary green to orange. The burnt version stays less bright than whatever color you pick, and the shadow adapts accordingly. The relationships stick.

The Key Difference In Practice

Global colors meant having the same color in multiple spots. Variables mean having color relationships that adapt together. Hover states stay connected to base colors. Shadow colors relate to your brand palette instead of living as random grays. The system maintains these connections without you having to do extra work.

Setting Up Your Color System In Divi 4 vs Divi 5

Creating a proper color system determines whether your website looks professional or like a patchwork of random choices. Both Divi versions offer ways to organize your colors, but their approaches couldn’t be more different. Here’s how to build color systems in each version and why the process matters for your design workflow:

Setting Up Colors in Divi 4

Your color choices shape how visitors experience your website. Have a look at the approach to color management Divi 4 takes:

1. Add Your Global Colors

Divi 4’s color setup relied on the global color system and manual organization. You’d start by navigating to any element’s color options, then create global colors by navigating to the “Global” tab, clicking the plus icon next to the color picker, or editing an existing Global Color by clicking on it. The interface lets you enter hex codes directly or use the visual picker to select colors.

Do you already have a color applied that you want to convert? Right-click on it and choose “Convert To Global.” This adds that exact color to your global palette and switches the module to use the global version. It’s super helpful when you realize you should have made something global from the start.

Magic Color Suggestions

Divi 4’s Magic Color feature builds coordinated palettes from your existing design choices. Instead of guessing which colors work together, this tool creates suggestions based on what you’ve already used.

Look for the three dots (ellipses) under your active color’s eyedropper. Click those dots to get a bunch of color palette suggestions. Divi looks at what colors you’ve already used on your page and in recent projects and shows you combinations that should work together.

2. Applying Your Global Colors

Using them is pretty straightforward once you’ve set up some global colors. Click into any module where you want to apply a color. Then, head to the Design tab and find the color setting you want to change.

Click on Global to see your global color palette. Click any global color swatch, and it applies to your module immediately.

3. Modifying Your Global Colors

Here’s where things get interesting. When you want to change a global color, you don’t need to hunt through every module that uses it. Just go to any color setting, click the Global tab, and find the color you want to edit.

Setting Up Your Colors In Divi 5

Building a proper color system in Divi 5 takes four steps. Following this approach beats the old method of guessing color codes whenever you need a slightly different shade:

1. Create Your Base Color Variable

Open the Design Variable Manager and add your primary brand colors as existing Primary and Secondary color variables. You may also add more colors, such as tertiary or accent colors. These become your foundation colors. Your base colors should represent your main brand palette, which defines your visual identity.

2. Build Relative Colors From Your Base

Now you can create color variations linked to your base colors. Add a new color in the Design Variable Manager and pick your base color.

Use the HSL sliders to adjust it: lower lightness by 25% for heading text, 20% for body text; raise lightness by 20% for hover states, or change saturation for muted backgrounds. Give these variations clear names like “Deep Orange” and “Bright Crimson,” or “Hover State (Primary Color),” “Muted Background (Secondary Color).”

All design variables can be stacked, so you can build more colors from your created ones. They all stay connected to the system.

If you change your base color later, these related colors update automatically, keeping the relationships intact.

3. Apply Variables to Your Elements

Use the Dynamic Content icon in any color field to access your variables. The interface shows whether each color is static, a variable, or a relative color with HSL modifications.

Pick from your organized color system instead of creating random one-off colors that break consistency.

When you change the properties of any of your base or constructed colors, everything inherited from those will automatically adapt to the new changes. No need to manually scrub and replace colors when you decide on a brand refresh.

4. Building Presets That Reference HSL Color Variables

Build your strategy using Option Group Presets for specific design parts. These presets differ from Element Presets. Option Group Presets target style groups like background, border, or text colors using your variables.

Save a shadow as an Option Group Preset using a shadow color variable based on your primary color.

Use this preset on columns, sections, rows, and modules.

Create separate Option Group Presets for different colors: one for borders with your accent color, another for text with your secondary color, etc. Mix these presets across elements without changing other styles.

Element Presets save full module setups, including content and all styles. Making an Element Preset for a styled button locks in the Option Group Presets and color variables used. Applying it instantly gives you the exact same button.

5. Rolling Out Colors Across Your Site

The Extend Attributes feature takes this further by letting you copy design properties between elements. When you’ve perfected an icon’s color scheme using your variables, you can extend those attributes to other icons across your row, page, or entire site.

This maintains your color relationships while spreading consistent styling without manual work.

Divi 5’s Find and Replace feature speeds up the conversion process for existing sites with scattered static colors. Right-click any color field and select “Find and Replace.”

Set your scope to target specific elements, entire sections, or the whole page. Under “Replace With,” choose your new variable from the Global tab. Check “Replace all found values” to swap every instance of that color with your variable.

This works perfectly when migrating older designs to the new color system. You can replace dozens of similar but not identical oranges in seconds with one consistent variable.

All aspects work together: establish your color variables, use Find and Replace to clean up existing inconsistencies, then use Extend Attributes to maintain design standards as you build new sections. Then, build pages normally, as the styles can be easily applied using Option Group and Element presets.

The New Color Picker Will Fit Your Workflow

Divi 5‘s color system fixes the workflow problems that have slowed projects for years. You no longer have to use external tools to find the right shade. HSL sliders give you precise control without leaving the builder.

Your color decisions stay connected through Design Variables. When you change your primary brand color, related colors update automatically while keeping their relationships. This beats manually hunting down every blue variation you created by eye.

Try out the new color system in Divi 5 today!