CSS Generators·free · no signup

CSS Variables Generator

Generate a complete CSS custom-property color scale (50–950) from one base color, ready to drop into :root.

Base color

Variable name

---500

Output

tokens.css

:root {
  --brand-50: #F3F0FF;
  --brand-100: #E2DBFF;
  --brand-200: #C2B3FF;
  --brand-300: #9980FF;
  --brand-400: #6C47FF;
  --brand-500: #3F0FFF;
  --brand-600: #2E00E6;
  --brand-700: #2600BD;
  --brand-800: #1D008F;
  --brand-900: #140066;
  --brand-950: #0C003D;
}

How to use the CSS Variables Generator

From your base color the tool derives a lightness scale (lighter tints through darker shades) and names each step as a CSS custom property inside a :root block. Because the values live in variables, you change the palette in one place and every var() reference across your stylesheet updates with it.

1
Choose a base color
Pick or paste the brand color the system will be built around.
2
Review the variables
See the generated --color tokens for each step of the scale in a :root rule.
3
Copy into your stylesheet
Paste the block into your CSS and reference colors with var(--color-500) and friends.

Frequently asked

What are CSS custom properties?

They are variables declared in CSS (like --color-500: #7C5CFF) and used with var(--color-500). They cascade and can be changed at runtime, which makes theming easy.

How do I create a dark theme with these variables?

Redefine the same variable names under a selector such as :root[data-theme="dark"] with darker values; every var() reference switches automatically.

Can I use these variables with any framework?

Yes — CSS custom properties are native browser features, so they work in plain CSS, Sass, Tailwind, React or any framework that ships CSS.

Why use variables instead of hard-coded colors?

A single source of truth means you can rebrand or adjust the palette in one place instead of find-and-replacing hex codes throughout the codebase.

More css generators

Tailwind Config Generator

Generate a tailwind.config color scale from any color.