CSS Variable Theme Generator

CSS variable theme generator for light and dark tokens

This CSS variable theme generator turns 13 named color roles into a ready-to-paste design token set. You edit light and dark values, see them on a live UI preview, check WCAG contrast, then copy CSS custom properties, a Tailwind v4 theme block, Tailwind v3 config or SCSS. It is free, runs in your browser and needs no signup.

How to build a CSS variable theme step by step

1. Click a card under Theme Token Presets (Blue, Emerald, Rose or Indigo slate), or keep the default Blue values.
2. Change any role in the sidebar with the color picker or by typing a value into its text field. HEX works, and so do CSS color names and functions such as rgb() or hsl().
3. Press Dark at the top of the sidebar to edit the dark values, or press Derive dark tokens from light to generate them automatically.
4. Watch the Live UI Preview and the contrast table update as you edit.
5. Set the options: OKLCH 50 to 950 scales, dark mode tokens and corner radius tokens.
6. Open the CSS variables, Tailwind v4, Tailwind v3 or SCSS tab and copy the code, or use Export CSS and Export SCSS to download a file.

The 13 color roles in a CSS custom properties theme

A theme token set names colors by job instead of by shade, so --color-primary can change value without changing any component. The generator uses 13 roles in four groups.

Each role is exported as a --color-* variable, for example --color-on-primary. Keeping the label color as its own role means a light primary in dark mode can switch to a dark label without touching your components.

How do CSS variables handle dark mode?

CSS variables handle dark mode by redefining the same custom property names under a different selector, so every component picks up the new values automatically. The MDN guide to CSS custom properties explains how values are inherited through the cascade.

When "Include dark mode tokens" is on, the generated CSS puts light values in :root. Dark values then apply in two ways: automatically when the visitor's system uses a dark scheme (see prefers-color-scheme on MDN), and manually when you set data-theme="dark" on the html element. Setting data-theme="light" forces light mode even on a dark system.

:root {
  --color-primary: #2563EB;
  --color-on-primary: #FFFFFF;
  --radius-md: 8px;
}
:root[data-theme="dark"] {
  --color-primary: #60A5FA;
}

What does the derive dark tokens button change?

The button creates a dark counterpart of your light theme in one click. It lifts brand and status colors to a lighter value, builds a dark background, surface and border tinted with your background hue, and picks white or the dark background for text on primary, whichever contrasts more.

Treat the result as a first draft. Switch to Dark and adjust any role by hand, then check the contrast table.

Theme token contrast check against WCAG

The Theme Token Contrast Check tests 10 token pairs in light and dark mode and marks each Pass or Fail. Text pairs need 4.5:1, the WCAG 2.2 Contrast (Minimum) criterion for normal text. Status icons need 3:1, the threshold in WCAG Non-text Contrast.

The audit covers text on background, text on surface, muted text on both, text on primary, the primary link on surface, and the success, warning, error and info icons on surface. Ratios are rounded down to two decimals, so 4.49:1 never passes as 4.5:1.

Worked example with the default Blue preset

White #FFFFFF on primary #2563EB reaches 5.17:1, which passes for button labels. Warning #D97706 on white reaches 3.19:1, enough for an icon but not for text. Success #059669 on white reaches 3.77:1, also an icon-only pass.

That is why the status colors appear as icons and badge dots in the preview, not as small body text. If you need status text, darken the color until it reaches 4.5:1, or confirm single pairs with the contrast ratio checker.

CSS, Tailwind v4, Tailwind v3 and SCSS export formats

The generator exports the same tokens in four formats, so you can match the stack you already use. Each tab has a one-line hint, and a copy button sits on the code block.

In Tailwind v4, each theme variable becomes utilities such as bg-primary and text-on-primary. In Tailwind v3, the semantic colors reference the CSS variables and switch with the theme, but the 50 to 950 shades are fixed HEX values, so paste the CSS variables tab into your stylesheet too.

The quick buttons Copy CSS, Copy Tailwind, Export CSS (theme-variables.css) and Export SCSS (_tokens.scss) work from any tab. Share link copies a URL that restores both light and dark values, and Reset restores the defaults.

Should you add OKLCH scales and radius tokens?

Add scales when you need hover states, tints and borders in your brand colors. The "OKLCH 50 to 950 scales" option creates eleven steps each for primary, secondary and accent, such as --color-primary-50 to --color-primary-950, with your chosen color kept at 500. Colors that fall outside the sRGB range are pulled back inside it, so every step is a normal HEX value.

OKLCH is a perceptual color space, which keeps steps visually even. For more on how it differs from HSL, read OKLCH vs HSL. To build a scale for any other color, use the Tailwind scale generator.

The Corner radius tokens menu adds --radius-sm, --radius-md and --radius-lg. Choose Sharp (0, 0, 0), Subtle (2, 4, 6 px), Medium (4, 8, 12 px) or Round (6, 12, 20 px), or choose No radius tokens to leave them out.

Who uses a CSS custom properties generator?

A CSS custom properties generator helps anyone who needs one shared color source for a site or app. The same tokens can drive a marketing page, a dashboard and a component library.

• Front-end developers start a project with a consistent theme and a working dark mode switch.
• Designers hand over named tokens that match the mockup, with contrast already checked.
• Tailwind users get a v4 @theme block or a v3 config without writing every variable by hand.
• Sass teams get a tokens map for loops and lookups.

CSS variable theme mistakes to avoid

• Naming by shade. A variable called --blue-500 breaks when the brand turns green. Role names such as --color-primary survive a rebrand.
• Reusing light values in dark mode. A saturated mid-tone that works on white often looks heavy on a dark surface. Lift brand colors and check each dark pair.
• Pure black and pure white. A very dark gray background with slightly softer text is easier to read for long periods.
• Relying on color alone. Success and error need an icon or label too. Run your palette through the color blindness simulator to confirm.
• Ignoring the accent. The accent role is not part of the contrast table, so test it yourself before using it behind or beside text.

Use the generator at the start of a project to settle your design tokens, or when adding dark mode to an existing site. Designers can share the link with developers, and developers can paste the output straight into a stylesheet or Tailwind file.

If you already have a list of HEX values and need tokens in other formats, try the HEX to design token exporter. To pick a starting color, the color harmonies generator suggests matching brand colors. To convert any value you type, use the color converter.