LESS Variable Generator

The LESS variable generator writes a palette out as LESS variables in the @name form, ready to paste into a stylesheet that is compiled with Less.

What is LESS Variable Generator?

• The LESS variable generator presents a list of name-and-colour rows and writes one variable declaration for each.
• Two rows are provided to begin with, primary and danger, and Add appends more, each seeded with a random colour.
• Every row has a text field for the name, a colour field for the value and a delete button; the output panel, headed LESS, updates as you type and a copy button takes the whole block.

The syntax Less expects is the reason a dedicated page is useful. Where Sass declares a variable with a dollar sign, Less uses an at sign, so a name typed as primary becomes @primary followed by a colon and the value. Both compile to the same result; only the notation differs, and moving a palette between the two is a mechanical change that a generator removes the risk from. Values are written as hex, so they can also be used directly in colour functions that Less provides.

• Naming is worth a moment before copying, because Less is more permissive than JavaScript about what a variable name can contain.
• Hyphens are legal, so surface-muted is as valid here as surfaceMuted would be — unlike the CSS-in-JS generator in this domain, where a hyphen produces code that will not run.
• The convention worth adopting is consistency with the rest of the stylesheet rather than any particular spelling, since the whole point of a variable is that the name is the thing call sites depend on.

The output is deliberately minimal: one declaration per row, nothing else. No @import, no namespace, no comments and no grouping. That makes it easy to splice into an existing variables file, and it means the block is not a complete Less file on its own. Because the values are hex, they can also be composed with Less's colour functions — lightened, darkened, mixed — at the point of use, which is often the better pattern than generating every tint here.

In practice the shortest workflow is to name the tokens the way the project already refers to them, set the values, and copy. If you are migrating from Sass, keep the same names and change nothing else; the declarations will drop into the existing file and the call sites stay valid because only the sigil changed.

What it does not do is mixins, nesting, guards or any other Less language feature — this is a colour variable exporter, and every line is a name bound to a hex value. There is no validation, so a blank name produces a declaration with no variable and a duplicate name silently produces two declarations of the same variable, with the later one winning. And it emits one flat list rather than a scoped structure.

Within those limits it does the one job cleanly. To generate less variables from colors is the whole job, and it removes the sigil errors and typing that come with transcribing a palette by hand. For anyone generating less variables from colors — or simply assembling a set of less color variables as a less color palette code block for a compiled stylesheet — the workflow is a list of names, a copy, and a paste. The same row interface also drives the SCSS and CSS-in-JS outputs, so the naming decisions carry across if the project later changes preprocessors.

How to use LESS Variable Generator

1. Replace the default names with the tokens your stylesheet uses, hyphens are fine in Less.
2. Set each value with the field beside its name, or add rows with Add.
3. Copy the block from the LESS panel into your variables file.

When to use LESS Variable Generator vs related tools

Use this when a palette has to reach a stylesheet compiled with Less. Use the SCSS generator for Sass syntax, or the CSS variables generator when the tokens should be custom properties instead of build-time variables. The css-in-js color object generator is the sibling whose syntax will not tolerate the hyphens this one accepts, and a token set that has to stay available at runtime is the CSS custom properties exporter's output.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about LESS Variable Generator