Elementor Global Styles Generator
Start from one brand colour and get a complete Global Colors and Global Fonts setup. Every pairing is graded against WCAG, and anything that fails comes with a fix you can apply in one click.
Brand ramp
Click any swatch to copy its hex. The step marked "yours" is the exact colour you entered.
Neutral ramp
Greys carrying a trace of your hue. Text, headings and surfaces come from here: a saturated ramp rarely has enough dark steps to keep body copy readable, and fully neutral greys look detached from the brand.
Roles
#2563EB
Global Colors > Primary
#3D4047
Global Colors > Secondary
#282A2E
Global Colors > Text
#134DCD
Global Colors > Accent
#FFFFFF
#F7F7F8
#7E8491
#676D79
Contrast check
12/12 pass AA| Pair | Ratio | Normal | Large | UI |
|---|---|---|---|---|
| Text on Background | 14.37:1 | AAA | AAA | AA |
| Text on Surface | 13.42:1 | AAA | AAA | AA |
| Primary on Background | 5.16:1 | AA | AAA | AA |
| Primary on Surface | 4.82:1 | AA | AAA | AA |
| Secondary on Background | 10.38:1 | AAA | AAA | AA |
| Secondary on Surface | 9.69:1 | AAA | AAA | AA |
| Accent on Background | 7.06:1 | AAA | AAA | AA |
| Accent on Surface | 6.6:1 | AA | AAA | AA |
| Muted on Background | 5.19:1 | AA | AAA | AA |
| Muted on Surface | 4.85:1 | AA | AAA | AA |
| Border on Background(outline, needs 3:1) | 3.75:1 | n/a | n/a | AA |
| Border on Surface(outline, needs 3:1) | 3.5:1 | n/a | n/a | AA |
Typography
Need fluid heading sizes as well? Generate a clamp() scale and paste it alongside these settings.
Apply it in Elementor
- 1. In the Elementor editor, open the hamburger menu and choose Site Settings.
- 2. Open Global Colors and paste each hex into its matching slot:
- 3. Open Global Fonts and set the four presets to Inter, weight 700 for headings and 400 for text.
- 4. Background, Surface, Border and Muted have no built-in slot. Add them under Global Colors with the plus button, or use the CSS variables below.
/* Global colours from snapelement.com/tools/elementor-global-styles */
:root {
--brand-primary: #2563EB;
--brand-secondary: #3D4047;
--brand-text: #282A2E;
--brand-accent: #134DCD;
--brand-background: #FFFFFF;
--brand-surface: #F7F7F8;
--brand-border: #7E8491;
--brand-muted: #676D79;
}Kit settings JSON (for developers)
The same values in the shape Elementor stores on its kit post, so you can apply them from code or WP-CLI instead of clicking through the panel. Back up the site first: writing kit settings replaces the current Site Settings.
Preview
Your headline in this palette
Body copy sits on the page background at the size and weight you chose. If this is hard to read here, it will be hard to read on the real site, which is exactly what the contrast table above is measuring.
A card sitting on the surface colour.
Global styles only pay off if your components inherit them. Snapelement components ship unstyled on purpose, so they pick up the palette you just built instead of fighting it.
Common questions
What are Elementor Global Colors and why do they matter?
They are four named colour slots (Primary, Secondary, Text, Accent) stored on the site kit. Widgets that reference a global colour update everywhere when you change that slot. Widgets with a hard-coded hex do not, which is why a rebrand on a site without globals takes days.
What contrast ratio do I actually need?
4.5:1 for body text and 3:1 for large text (roughly 24px regular or 18.66px bold) to meet WCAG AA. AAA asks for 7:1 and 4.5:1. Interface pieces like icons, input borders and focus rings need 3:1 under WCAG 1.4.11. The table here grades all three at once.
Will this overwrite my existing Site Settings?
Not by itself. The default path is copying hex values into Elementor by hand, one slot at a time, which changes nothing until you save. The developer JSON download does replace kit settings when applied through code, so back up before using that route.
Why does the generator change the colour I picked?
It does not change your brand colour, which always appears in the palette exactly as you entered it. It picks a different step from the same ramp for body text or buttons when your brand hex cannot reach 4.5:1 on the page background. Your brand stays your brand; the text stays readable.