Colour handling is a single option with a large downstream effect. Getting it right before you convert saves a lot of re-styling later.
The two modes
- Keep original colours — every text colour, background, border colour and shadow colour is written to the widget as an explicit value. The result matches the source exactly.
- Use site colours — per-widget colours are skipped and Elementor’s Global Colours are referenced instead: headings map to Primary, body text to Text, button backgrounds to Accent, and so on.
When to use each
Choose site colours when you are pulling a block into an existing branded site. The section adopts your palette immediately, and when you later change a Global Colour the imported section changes with it. This is the maintainable choice for anything that will live on your site long-term.
Choose original colours when the design is the point — a client mock-up, a one-off landing page, or when the source palette is deliberately different from the rest of the site.
What colour values survive
Solid colours convert directly. Two-stop linear gradients are recognised and become Elementor gradient backgrounds with the angle and both stops preserved. More complex backgrounds — radial gradients, multi-stop gradients — cannot be expressed in the same control, so the first solid colour is used as a sensible fallback rather than producing an empty background.
Box shadows come across too, but Elementor’s shadow control holds a single shadow. If your CSS layered several shadows, the front-most one is kept and a warning tells you the rest need adding by hand.
CSS variables
Custom properties like var(--brand) are resolved by the browser before they are read, so what you get is the final computed colour, not the variable name. That is usually what you want. If you rely on variables for theming, switch to site colours and drive the palette from Elementor’s Global Colours instead — that is the WordPress-native equivalent of the same idea.
Transparency
Fully transparent backgrounds are treated as “no background” rather than being written as a transparent colour, which keeps the settings panel clean. Semi-transparent values like rgba(255,255,255,.88) are preserved as-is.
A practical recommendation
If you are unsure, convert once with original colours to verify the layout is faithful, then convert again with site colours for the version you actually publish. Comparing the two takes two minutes and makes the decision obvious.