Divi 5 introduces a completely redesigned Color Picker that’s built for modern design systems. You now have powerful tools for managing and customizing colors with precision, thanks to support for HSL, relative color filters, and a tighter integration with design variables.
The new interface replaces the old swatch grid with a focused modal, giving you complete control over hue, saturation, lightness, and opacity.
You can also create relative color values using filters, which lets you define one color and generate consistent variations based on it - ideal for managing brand palettes and design consistency.
How to Use the New Color Picker
New Color Field
Open any element's settings panel by clicking on the Gear Icon or by clicking on the element itself.
Click on any Color Field, for example, Background color in the Background option group, or Text Color.
Use the visual spectrum and sliders to manually adjust the color or type a value in hex, RGB, or HSL format.
Expand the Color Filters drawer below the picker.
Use sliders to shift the Hue, Saturation, Lightness, and Opacity values.
Note: The value field also supports CSS variables and automatically validates input when you press Enter or unfocus.
Manage website color palette
With the introduction of Design Variables, managing your entire site's color palette is effortless.
Open the Global Variables Manager by clicking the Manager's icon
located in the left sidebar.Expand the Colors selection.
Edit or Add New Global Colors.
Notes:
You can use or change any of the four global colors: Primary Color, Secondary Color, Heading Text Color, and Body Text Color.
You can reference any of those default colors as a base color and customize its opacity, hue, Saturation, and Lightness to obtain a brand new color.
These relationships stay intact. If the base color changes, all linked colors update too.