Beaver Builder uses a Global Color Presets system that lets you define reusable colors across your entire site. Any module's color picker can reference these presets, and changing a preset automatically updates everywhere it appears. PaletteRx generates the hex values and optional CSS variables to populate these presets.
How Beaver Builder Handles Colors
In Beaver Builder, you set up color presets in the Global Settings panel under the Colors tab. Each preset gets a name and a hex value. Once defined, presets appear in every color picker throughout the builder — rows, columns, modules, and custom CSS all reference the same central palette.
This is exactly the design system approach: a single source of truth. But building that source of truth with accessible, balanced colors is where most people struggle. That is where PaletteRx comes in.
The PaletteRx Workflow
Build your palette in PaletteRx through all five steps. The WCAG compliance check ensures every color has at least one accessible partner. The role assignments (Primary, Secondary, Light Base, Dark Base) map naturally to Beaver Builder's preset naming convention.
Select Beaver Builder from the WP Page Builders section in Step 5. PaletteRx generates a hex reference card with each color labeled by role, plus CSS variables you can add to your site's custom CSS for additional flexibility.
Setting Up Presets
Open your site in Beaver Builder, then go to Tools and Global Settings. Navigate to the Colors tab. For each color in your PaletteRx export, click the "+" button to add a new preset. Paste the hex value and name it according to its role: "Primary," "Secondary," "Light Base," and so on.
If you have multiple colors of the same role (Secondary 1, Secondary 2), name them descriptively. Beaver Builder does not limit the number of presets, so add every color in your palette.
Using CSS Variables Alongside Presets
Beaver Builder presets work within the visual builder, but CSS variables give you additional power in custom CSS and code modules. Copy the CSS Variables output from PaletteRx and paste it into Appearance, Customize, Additional CSS. Now you can reference var(--primary) in any custom CSS field throughout your site.