Elementor color palette generator: global kit and contrast
Pick the four global colors and four global fonts, check the text is readable and download a kit to import into Elementor, or the CSS variables.
- Free
- no sign-up
- everything runs in your browser
Contrast (WCAG AA)
| Combination | Ratio | Normal text | Large text |
|---|
Preview with the fonts installed on your computer
Main heading
Secondary subheading
Paragraph text to check it reads well on the chosen background.
ButtonTo import into Elementor: Tools › Import / Export Kit › Import. Back up first.
How to build the global kit with the tool
Set the palette
Primary, secondary, text and accent, with the same IDs Elementor uses for its globals. For each one, a color, a font and a weight.
Check the contrast
Pick your site’s background. Each combination shows its ratio and whether it passes WCAG AA for normal and large text.
Download
A .zip kit to import into Elementor, or the --e-global-* CSS variables to paste into your theme or another tool.
What the global kit generator creates
A kit Elementor imports
The .zip follows Elementor’s export format: a manifest.json and a site-settings.json with the system colors and fonts. We tested it by importing it into Elementor 4.4: it creates a new kit with the four colors and four fonts exactly as set.
CSS variables with Elementor’s names
The variables use the same names Elementor generates (--e-global-color-primary, --e-global-typography-primary-font-family…), so they fit the CSS you already have for your site.
WCAG AA contrast
The table works out the ratio of each color on the background and of white on the button colors. AA asks for 4.5:1 for normal text and 3:1 for large text.
Preview
A heading, a subheading, a paragraph and a button with your colors and fonts, so you can check the combination reads well before importing it.
How to set Elementor global colors by hand
In the Elementor editor, open the menu and go to Site Settings. Global Colors and Global Fonts are there. The first four (primary, secondary, text and accent) are the system ones; below them you can add custom colors and fonts.
A widget uses a global color when you pick it from the globals icon in its color setting. Change that global and it changes in every widget using it. If the color was typed by hand, it doesn’t.
Doing it by hand is fine for one site. If you build several with the same brand, or want to check contrast before deciding, the kit saves steps: prepare it once and import it into each site.
What about the hand-typed colors already on the site?
A new kit doesn’t change widgets with a hand-typed color. The design system plugin finds them and turns them into globals or Elementor 4 variables.
Design system · Coming soon
What this tool doesn't do
- It doesn't change colors typed by hand in widgets: it only sets the globals.
- For fonts it sets the family and weight; size and line height are adjusted later in Elementor.
- The preview uses the fonts installed on your computer; on the site, Elementor loads them.
- It doesn't create Elementor 4 variables, which are a separate system from global colors.
Other free tools
Find and replace in Elementor JSON
Change text and links inside an exported template without breaking the JSON.
Consent text for forms
The first-layer data protection notice and checkboxes, in HTML.
Smart Search & Replace
Search and replace text and links across all of Elementor, with preview and undo.
Elementor global colors: frequently asked questions
Where are global colors in Elementor?
In the editor, under the menu › Site Settings › Global Colors. Fonts are next to them, under Global Fonts.
Will the kit delete my custom colors?
It shouldn’t: importing a kit, Elementor replaces the four system colors and fonts and adds custom ones to those you have. Back up first, as with any import.
What contrast ratio do I need?
WCAG 2.2 level AA asks for 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold).
Does it work with Elementor 4?
Yes. The kit was tested by importing it into Elementor 4.4. Elementor 4 variables are something else and this kit doesn’t create them.