WordPress

Setting Up Elementor Global Colors with PaletteRx

Elementor Global Colors provides site-wide color management. Colors defined as globals appear in every color picker throughout the editor.

Mapping PaletteRx to Elementor

PaletteRx Primary to Elementor Primary. PaletteRx Supporting to Elementor Secondary. PaletteRx Dark Base to Elementor Text. Then add custom globals for Light Base and additional accents.

Configuration Steps

Open the Elementor editor. Go to Site Settings, then Global Colors. Edit each default color with your PaletteRx hex value. Add custom colors for palette entries not covered by the four defaults.

CSS Variables Too

Add PaletteRx CSS Variables to the Custom CSS section. This gives both Elementor globals (visual editing) and CSS Variables (custom styling).

After configuring globals, create a Style Guide page showing every color in context. This catches missed color assignments and serves as a team reference.

Ready to Build Your Palette?

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

🎨 Launch PaletteRx