Do I type the double dash in the name field?

No. Type primary and the generated declaration reads --primary. The prefix is added at output time, which keeps the field free of syntax errors.

What happens if two variables share a name?

Both declarations are emitted. CSS resolves the conflict by letting the later one win, so the second row effectively overwrites the first. Nothing warns you.

Does it generate dark-mode variables?

No. The output is a single :root block. To theme for dark mode you would duplicate the block inside a prefers-color-scheme media query yourself.

What format are the values?

Hex, taken straight from the colour field. The generator does not emit rgb(), hsl() or oklch() values, so translations between notations are not part of the output.

Can one variable reference another?

No — the value field is a colour picker, so every property comes out as its own hex. A chain like --brand: var(--base) is a one-line edit in the copied block.

CSS Color Variables Generator

Variables

CSS

:root {
  --primary: #3B82F6;
  --background: #FFFFFF;
  --foreground: #0F172A;
}

You Might Also Need

CSS Custom Properties Exporter

Export a palette as CSS custom properties

Color Palette CSS Exporter

Export a palette as CSS

The CSS color variables generator builds a :root block of custom properties from a list of name-and-color pairs you control, so a palette can be named in the same language your project already uses.

What is CSS Color Variables Generator?

The CSS color variables generator starts from three rows — primary, background and foreground — and lets you rewrite, remove or extend them.
Every row has a text field for the variable name, a colour field for its value and a button that deletes it; Add creates a new row named color plus a number, seeded with a random colour.
The panel beside the rows renders the live result: a :root block containing one custom property per row.

The name field is the part that earns its keep. Values are easy; naming is a decision, and it is the one that determines whether a palette survives a redesign. Type the name without the leading double dash and the generator adds it, so filling in background produces --background. That keeps the field free of syntax and reduces the temptation to type a stray character that would make the declaration invalid. Because the output is regenerated on every keystroke, you can rename a variable and watch the block change under your fingers.

There is a real design argument for semantic names here, which makes css variable naming the decision that outlives the palette.
A property called --background survives a rebrand, because the surface is still a surface, while --blue-500 becomes a lie the first time the brand moves off blue.
The generator does not enforce either approach, so it suits both: model a token set around roles for application chrome, or around scale positions when documenting a palette that has to stay faithful to a source.

The output is plain and deliberately narrow. Each row becomes one --name: value; declaration inside a single :root rule, with the value exactly as the picker produced it, in hex. Copy takes the whole block, so it drops into a stylesheet as-is. Nothing is validated: two rows with the same name produce two declarations of the same property, and the later one wins, which is how CSS works but is almost never what was intended.

As a css custom property generator it fits a specific job — you already know what the tokens are called and just want the syntax written out. The palette exporters in this domain take the opposite route: they start from a generated palette and derive names from position, which is useful for speed and awkward when the names need to match a brand guide. For preprocessor syntax there are separate SCSS and LESS generators, and for a JavaScript theme object there is a CSS-in-JS generator. This page is the one where you choose the names as well as the values.

The limitations are worth knowing before you paste. The generator emits a :root block only: no dark-mode media query, no fallback values, no comments and no grouping. Blank or malformed names are passed through untouched, so an empty field yields a declaration with no property. And every value is a hex colour, so gradients, shadows and numeric scales are out of scope. Within that remit, the shortest way to generate css color variables is to type the names you already use, set the colours, and copy one root css variables block — and the naming discipline it encourages is arguably the more durable benefit.

How to use CSS Color Variables Generator

Replace the default names — primary, background, foreground — with the tokens your project uses, typed without the leading double dash.
Set each value with the colour field beside its name.
Use Add variable for extra tokens, and the delete button to drop any you do not need.
Copy the generated :root block from the CSS panel.

When to use CSS Color Variables Generator vs related tools

Use this when the token names are already decided and you need the custom-property syntax written correctly. Use the palette exporters when you want names derived from a generated palette instead, or the SCSS and LESS generators for preprocessor syntax. When the set has to travel as a document rather than a stylesheet, the design token generator is the carrier, and one common dialect of the same syntax is written out by the shadcn/ui color exporter.

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.