Bricks Builder has become the builder of choice for many professional WordPress developers because of its clean code output, CSS variable support, and developer-friendly architecture. PaletteRx provides a direct Bricks JSON export that maps your palette to Bricks' variable system.
Bricks' Variable System
Bricks allows you to define CSS variables in its global settings. These variables appear in every color picker throughout the builder, allowing visual selection of your palette colors. They also generate standard CSS custom properties available in any custom CSS.
Importing from PaletteRx
Export your palette from PaletteRx in Bricks JSON format. In Bricks, go to Settings, then Custom Variables. Paste or import the JSON. Each color from your palette appears as a named variable with your PaletteRx role names. The import takes less than a minute.
Using Variables in Bricks
Once imported, every color picker in Bricks shows your palette variables alongside standard color selection. Click a variable to apply it instead of a static hex value. This means every element on your site references the centralized palette. Change a variable value and every element using it updates.
Custom CSS in Bricks
For custom CSS within Bricks, reference your variables directly: border-color: var(--color-primary);. The variable names match what PaletteRx exported, so there is no translation needed between the PaletteRx documentation and the Bricks implementation.
Framework Integration
If you use Automatic.css (ACSS) with Bricks, PaletteRx also exports in ACSS format. The ACSS export maps your palette to ACSS's specific variable naming convention, which then cascades through ACSS's utility class system. One PaletteRx palette feeds both Bricks and ACSS simultaneously.