CSS Color Variable Generator
Turn a color palette into CSS custom properties — named :root variables, or a full 50–900 shade scale from one base color. Copy-ready. Free.
💡 How to use
- Define your brand colors once as CSS custom properties in
:root, then reuse them everywhere withvar(--name). - The shade mode builds a 50–900 scale from one base color — handy for hovers, borders, and backgrounds.
- Change a variable in one place to re-theme your whole site.
Free CSS Color Variable Generator
Turn your color palette into CSS custom properties in seconds. Add named brand colors and get a clean :root block of CSS variables — or generate a full 50–900 shade scale from a single base color. Copy ready-to-use code for consistent, themeable design. Free, no sign-up, runs in your browser.
What are CSS variables (custom properties)?
CSS custom properties, also called CSS variables, let you store a value once and reuse it everywhere with var(). Defined on the :root selector, a color variable like --primary can be referenced across your entire stylesheet, so changing that one value re-themes the whole site. They make design systems maintainable, dark mode straightforward, and hard-coded hex values a thing of the past.
Two ways to use this tool
The generator has two modes:
- Palette → variables — add your named brand colors and get a tidy :root block of custom properties.
- Shade scale — pick one base color and generate a full 50–900 range of tints and shades.
- Both produce copy-ready CSS you can paste at the top of your stylesheet.
- Duplicate names are de-duplicated automatically.
Why a 50–900 shade scale is useful
Modern design systems (and frameworks like Tailwind and Material) express each color as a numbered scale — 50 is the lightest tint, 500 the base, 900 the darkest shade. Having the whole range as variables means you always have the right shade on hand: a light tint for backgrounds, a mid tone for borders, and darker steps for hover and active states. This tool builds that scale by blending your base color toward white for the light steps and toward black for the dark steps.
How to use the variables in your CSS
Paste the generated :root block near the top of your stylesheet, then reference the colors anywhere with var(), for example color: var(--text) or background: var(--primary-100). Because the values live in one place, updating your palette or adjusting a shade is a single edit. You can also redefine the same variables inside a dark-mode selector to switch themes without touching any of your component styles.
Naming your color variables well
Good variable names describe the role, not just the hue — --primary, --accent, --danger, and --surface age better than --blue or --light-grey, because the underlying color can change without the name becoming misleading. For scales, the numbered suffix (--primary-500) is clear and predictable. Keep names lowercase with hyphens, which this tool enforces, so they are consistent and easy to type.
Pro tip
Define semantic aliases on top of your scale — for example --border: var(--primary-200) and --text: var(--primary-900) — so your components reference meaning rather than raw shades, making a future re-theme trivial. To fine-tune individual colors before adding them, use our Color Converter, and check contrast with a WCAG contrast checker.
FAQ
Is this Color Variable Generator free?
What are CSS custom properties used for?
How do I generate a shade scale from one color?
How do I use the variables in my CSS?
Can I use these variables for dark mode?
How should I name color variables?
Do CSS variables work in all browsers?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Gradient Generator for a faster SEO workflow.