Brand guides
Give developers the brand palette as variables.
Content / widget · Elementor module
CSS Palette Variable Generator Widget Plugin for Elementor
Let visitors list colours, named or not, and get CSS custom properties, SCSS variables or JSON design tokens with swatches, ready to copy or download.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / CSS palette variable generatorProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published widgets running in your browser; edit the colours to see the variables update.
02 / Inside WordPress
CSS palette variable generator controls in Elementor
Output sets live or button generation, the syntax, colour values, :root wrapping, the visitor prefix field, swatches, visitor options, the download file name and the most colours. Labels sets the heading, the colours and prefix labels and starting values, the hint and every button and message. The Style tab covers the layout, the fields, the variables panel and swatches, and the buttons.
03 / Website use cases
Where to use css palette variable generator
Brand guides list colours, but stylesheets need them as variables with consistent names and formats. Writing --brand-primary by hand for every shade, and converting each value, is slow and error-prone. CSS palette variable generator turns a simple list into ready-to-paste variables in the syntax and colour format a project uses.
Theme building
Turn a designer’s colour list into theme tokens.
Migrations
Convert old hex palettes into OKLCH variables.
04 / Installation and setup
How to add a palette variable generator in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable CSS palette variable generator in the Complementor library.
Add the widget to a style guide or developer resources page.
Choose the syntax (CSS, SCSS or JSON) and the colour format.
Optionally fill a starting palette and prefix, such as your brand colours.
Style the panel and swatches, then download or copy the variables.
05 / Content and style controls
Customize css palette variable generator in Elementor
Configure the settings available for this module to suit the page you are building.
Colours one per line, named as primary: #1d4ed8 or #1d4ed8 primary, or numbered.
Any CSS colour syntax, including names such as royalblue.
CSS custom properties in :root, SCSS variables or JSON design tokens.
Values as typed or converted to HEX, RGB, HSL or OKLCH.
Safe variable names from any text, with duplicates numbered.
Swatches for every colour and notes for lines that are not colours.
Download as .css, .scss or .json, Copy and Clear.
06 / Choose the right approach
CSS palette variable generator and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
CSS colour format converter
Converts one colour into every format.
Elementor global colours
Store colours for the site; this widget produces code for other projects.
07 / Requirements and compatibility
CSS palette variable generator compatibility with Elementor
- Requires Elementor.
- Colours in sRGB; names need the visitor’s browser.
- Runs in the visitor’s browser.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot css palette variable generator
Check these settings if the published page behaves differently from the editor.
Why was a line skipped?
It is not a colour this tool can read, or its name has no letters or numbers. The note gives the line number.
Why did my prefix change?
Variable names use letters, numbers and hyphens, so other characters are replaced; the note shows the prefix used.
Why does a name end in -2?
Two colours had the same name; the second is numbered so both stay.
Why are some colours numbered?
Lines without a name are numbered 1, 2, 3 in order.
CSS palette variable generator plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Is anything sent to a server?
No. Everything runs in the visitor’s browser.
What JSON format is used?
Design tokens with $type and $value, as in the W3C Design Tokens format.
Can I keep my colour notation?
Yes. Choose As typed for the values.
How many colours can I list?
200 by default, up to 1,000.
10 / Annual All Access subscription
Get css palette variable generator with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.