Elementor's Global Colors system lets you define site-wide colors that are available in every widget's color picker. PaletteRx generates a reference format that makes importing straightforward.
Elementor's Color System
Elementor uses four default global colors (Primary, Secondary, Text, Accent) plus any additional custom colors you add. Each gets an internal ID that Elementor generates on its own, which means you set up colors through the Elementor interface rather than importing a file.
The PaletteRx Export
The Elementor export from PaletteRx gives you a structured reference showing each color's name, hex value, and intended role. While you will enter these manually through Elementor's Site Settings, the export provides the exact values and naming to use.
Setting Up in Elementor
Open Elementor, then go to Site Settings and find Global Colors. Edit the default four colors to match your PaletteRx palette. For additional colors, click "+ Add Color" and add each remaining palette color with its role-based name.
Once set, these global colors appear in every color picker throughout Elementor, in the "Global Colors" tab, identifiable by their names.
var(--color-name) without manually adding each to Global Colors.