Global Tools Hub
Current language: English

CSS Variable Generator

Build a color token list, preview each variable, and copy ready-to-use CSS custom properties.

How to use

  1. Enter a variable prefix such as brand, theme, or ui.
  2. Update each variable name and pick a color.
  3. Add more rows if you need extra variables.
  4. Copy the generated CSS and paste it into your stylesheet.

Color preview

--brand-primary

--brand-secondary

--brand-accent

Generated CSS variables

:root {
  --brand-primary: #4f46e5;
  --brand-secondary: #06b6d4;
  --brand-accent: #f59e0b;
}