WordPress

Exporting Your Palette to Bricks Builder 2.2: Complete Guide

Bricks Builder 2.2 introduced a proper Color Manager with JSON import and export. PaletteRx generates the exact JSON format Bricks expects, so you can go from palette to production in about 30 seconds.

The Export Process

In PaletteRx Step 5 (Export), select the Bricks 2.2 tile. PaletteRx generates a JSON file containing your colors with proper naming, hex values, and HSL decomposition, which Bricks uses internally for shade generation.

Click Download JSON to save paletterx-bricks-palette.json to your computer.

Importing into Bricks

Open your WordPress dashboard and navigate to Bricks > Settings > General > Color Palette. You will see a section for managing global colors. Click the Import button and select the JSON file you downloaded.

Your PaletteRx colors will appear immediately in the Color Manager, ready to use in the Bricks editor. Each color gets a descriptive name based on its role and is available in every color picker throughout the builder.

How Bricks Uses the Colors

Bricks converts imported colors to CSS custom properties with the format --bricks-color-[id]. These are available globally and can be referenced in custom CSS, conditions, and dynamic data. The Color Manager also generates lighter and darker shades automatically from the HSL values PaletteRx provides.

💡 Alternative method: If you prefer not to use JSON import, PaletteRx also generates CSS Variables format that you can paste into Bricks' Custom CSS field. Both approaches work. JSON is cleaner for the Color Manager; CSS Variables are more flexible for custom styling.

Ready to Build Your Palette?

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

🎨 Launch PaletteRx