CSS Variable Generator
Turn one or two brand colours into a complete set of CSS custom properties: eleven-step colour scales from 50 to 950, semantic tokens for text, surfaces and borders, dark mode values, spacing, radius and shadow tokens. Or paste an existing stylesheet and let the tool collect its colours into variables and rewrite the CSS to use them.
- Runs in your browser
- No sign-up
- Free to use
How to use CSS Variable Generator
- Choose Generate or Extract.
- Pick the primary and accent colours, or paste your CSS.
- Set the spacing unit, prefix and output format.
- Copy the variables (and the rewritten CSS when extracting).
CSS Variable Generator features
Colour scales
50–950 shades mixed in OKLab, your colour at 500.
Semantic tokens
bg, surface, text, muted, border, primary, focus.
Dark mode
Semantic values swapped in prefers-color-scheme: dark.
Spacing and more
Spacing scale, radius and shadow tokens.
Three formats
CSS, Sass + CSS, or W3C JSON design tokens.
Extract mode
Collects repeated colours and finds near-duplicates.
When to use CSS Variable Generator
- Starting a design system or theme.
- Adding dark mode to an existing site.
- Cleaning up a stylesheet full of hard-coded colours.
- Exporting tokens for design tools and other platforms.
CSS Variable Generator FAQ
Why mix shades in OKLab?
Mixing in OKLab keeps the hue stable and the steps perceptually even. Mixing in RGB tends to make tints chalky and shades muddy.
What are semantic tokens?
Names that describe a role, such as --color-text or --color-border, instead of a colour. Components use the roles, so a theme change only redefines the roles.
How does dark mode work?
Only the semantic tokens change inside @media (prefers-color-scheme: dark), pointing to other steps of the same scales. Components need no changes.
What does Extract do?
It finds every colour in declarations, groups identical colours (even if written differently), names them by hue, rewrites the CSS with var() and lists nearly identical colours you could merge.
What is the JSON format?
The Design Tokens Community Group format with $value and $type, readable by tools such as Style Dictionary and Tokens Studio.
Is anything uploaded?
No. Everything happens in your browser.
Design tokens with CSS custom properties
Custom properties, often called CSS variables, let a stylesheet define a value once and reuse it everywhere. Design systems use them as tokens: named decisions about colour, spacing, radius and shadow that every component shares. Changing a token updates the whole interface, and themes such as dark mode become a matter of redefining a few values.
The generator builds colour scales the way many design systems do, with steps from 50 for the lightest tint to 950 for the darkest shade. Your colour sits at 500, and the other steps are mixed towards white or black in the OKLab colour space, which keeps blues blue instead of drifting to purple and keeps steps even to the eye.
On top of the scales sit semantic tokens. Text uses a dark neutral, muted text a lighter one, borders a pale one, and the primary action colour a step dark enough for white text. The notes report contrast ratios so you know whether muted text and primary links pass WCAG AA on white.
Spacing tokens follow a base unit, four or eight pixels being the most common, and are written in rem so they scale with the user’s font size. Radius and shadow tokens complete a basic system that covers most interfaces.
If you already have a stylesheet, the extract mode is a quick way to see how many different colours it really uses. It groups colours written in different formats, sorts them by how often they occur, rewrites the CSS to use variables and points out near-duplicates such as two greys that differ by a single digit.