ToolToUse

Color & Design

CSS Color Variables Generator

Generate a full :root color scale (50–900) from one base color.

The scale is a simple linear mix, not a perceptually uniform scale like Tailwind's hand-tuned palettes — check contrast ratios before using a step for text.

Color & Design

CSS Color Variables Generator

Local only
Everything stays in your browser

Your text is processed on your device — nothing is uploaded to a server.

How it works

Builds an 11-step scale by mixing your base color towards white (50–400) and black (600–900), with the base at 500. Copy the block into your stylesheet and use var(--brand-600) anywhere. The scale is a simple linear mix, not a perceptually uniform scale like Tailwind's hand-tuned palettes — check contrast ratios before using a step for text.

Good to know

Frequently asked questions

How do I use it?

Enter your text, adjust the options and press “Generate variables”. Check the result, then copy or download it.

How does it work?

Builds an 11-step scale by mixing your base color towards white (50–400) and black (600–900), with the base at 500. Copy the block into your stylesheet and use var(--brand-600) anywhere.

Are there limitations?

The scale is a simple linear mix, not a perceptually uniform scale like Tailwind's hand-tuned palettes — check contrast ratios before using a step for text.

Is my data uploaded?

No. Everything is processed in your browser and nothing is sent to a server. No account is needed.

Keep exploring

View all