CSS Variables Generator
Generate CSS custom properties from your colors, with optional shade scales.
About the CSS Variables Generator
Turn a list of colors into clean CSS custom properties. Name each color, optionally generate 50–900 shade scales and RGB channel variables, and copy the result.
How to use it
- Add colors and give each a name.
- Choose a prefix and output options.
- Review the generated :root block.
- Copy or download the CSS file.
Examples
- --color-primary: #4f46e5;
- --color-primary-100 … --color-primary-900 scales.
Frequently asked questions
What are RGB channel variables?
Variables such as --color-primary-rgb: 79 70 229 let you write rgb(var(--color-primary-rgb) / 50%) for transparency.
How are the 50–900 scales made?
Lighter steps mix toward white and darker steps toward black in OKLab for even perceptual spacing.
Are names sanitized?
Yes, names are converted to lowercase kebab-case.