CSS Variable Generator

How the CSS Variable Generator Works

CSS custom properties, commonly called CSS variables, are declared with a double-hyphen prefix — for example --color-primary: #2563eb; — usually inside a :root selector so the value is available globally through the document. Unlike preprocessor variables, custom properties are resolved by the browser at runtime, which means they participate in the normal CSS cascade: they can be inherited, overridden at any more specific selector, read and written from JavaScript, and swapped instantly inside a media query for things like prefers-color-scheme dark mode.

This tool takes the color, HEX value, and name you enter for each palette row and formats them into four different outputs. The CSS tab wraps each entry as --name: value; inside a :root block. The SCSS tab instead emits $name: value; — a Sass variable that gets substituted at compile time rather than resolved in the browser, so it has no runtime flexibility but works in any Sass-based build pipeline. The JSON tab produces a flat name-to-value object suited to design-token tooling or importing directly into a JavaScript theme file. The Tailwind tab formats the same palette as a colors object shaped for theme.extend.colors in a Tailwind config file.

Because the generator runs entirely as client-side JavaScript, editing a color or a name updates all four output formats immediately with no network request involved — nothing about your palette is transmitted anywhere. Once you have a working token set, it pairs naturally with color decisions made in the Contrast Checker, since accessible foreground/background pairs are exactly the kind of relationship worth encoding as named variables rather than scattered literals.