WordPress

Setting Up a Color System in Divi Builder with PaletteRx

Divi Builder is one of the most popular WordPress page builders. Its Global Color system lets you define palette-wide colors that appear in every color picker throughout the builder. PaletteRx's exports integrate with Divi through two approaches.

Method 1: Divi Global Colors

Open Divi Theme Options (or the Visual Builder's Global Colors panel). Add each PaletteRx color by pasting the hex value and naming it to match your PaletteRx roles: Primary, Supporting, Light Base, Dark Base, etc. These colors then appear as preset options in every Divi module's color settings.

Method 2: CSS Variables

For more control, export CSS Variables from PaletteRx and add them to your Divi child theme's stylesheet or the Divi Custom CSS panel. Then reference variables in Divi's custom CSS fields on individual modules: background-color: var(--color-primary);

Combining Both Methods

The best approach uses both: Global Colors for visual editing (team members can select colors from the picker) and CSS Variables for custom CSS (developers can reference semantic names in code). This covers both visual and code-based workflows.

Divi Presets

Divi's Preset system lets you save module styles (including colors) as reusable templates. After setting up your Global Colors, create presets for common patterns: a "Primary Button" preset with your primary color, a "Dark Section" preset with your dark base background, etc. These presets enforce palette consistency across pages.

💡 Recommended: Use PaletteRx's CSS Variables export for the stylesheet and manually enter the same hex values as Divi Global Colors. Both reference the same palette. The Global Colors make visual editing faster. The CSS Variables make custom development cleaner.

Ready to Build Your Palette?

PaletteRx guides you from color selection to accessible, export-ready design systems in minutes.

🎨 Launch PaletteRx