CSS Variables Generator
Generate a shade scale from a base color — 50/100/200/…/900 steps as CSS custom properties.
How to Use
- Pick a base color from the color picker — this becomes the middle (500) of the scale.
- Set the prefix (e.g., "brand", "accent", "primary") — that becomes the variable name (--brand-50, --brand-100, etc.).
- Set the number of steps (typically 9 or 11 to match Tailwind's 50/100/200/.../900 convention).
- Adjust the lightness min and max to control how dark and how light the extremes are.
- The preview shows every step from lightest to darkest with its hex value.
- Click Copy CSS to grab a :root block ready to paste into your stylesheet.
Output
About the CSS Variables Generator
Meet the CSS Variables Generator: a free, no-fuss tool for colour and design work with nothing to install and no sign-up. Generate a shade scale from a base color — 50/100/200/…/900 steps as CSS custom properties.
How it works
Pick your options and the tool makes the result right away. Do not like it? Make another one — you can do this as many times as you want. When it looks right, copy it into your own project. Everything is made on your device, so it is yours alone.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
Why generate a shade scale instead of just picking colors by hand?
Consistency. A hand-picked scale almost always has at least one off-step that breaks the visual progression. A computed scale walks lightness uniformly while keeping hue and saturation fixed, so the relative spacing between shades is even. This matters for design systems where the same token (--brand-200) is used in many places — they should all relate to one another in a predictable way.
What's the Tailwind 50–900 convention?
Tailwind CSS popularized a 9-step or 11-step scale numbered like font weights: 50 is the lightest tint, 500 is the base color, 900 is the darkest shade. Many design systems (shadcn/ui, Material UI 3, Chakra) follow the same naming. The numbers don't directly correspond to lightness percentages — they're labels for ordinal positions.
What is the difference between the OKLCH and HSL modes?
Both sweep lightness while holding the hue and chroma of your base color, but in different color spaces. <strong>HSL</strong> stepping is simple and classic, but its steps look uneven — a 50% HSL blue reads much darker than a 50% yellow. <strong>OKLCH</strong> is perceptually uniform, so equal numeric steps look like equal visual steps; it produces noticeably smoother, more even scales and is the recommended default for design-system palettes. OKLCH is the same modern space used by CSS Color 4 and this site's Universal Color Converter.
What if my color is too saturated or too desaturated at the extremes?
Pure-lightness stepping in HSL keeps saturation constant, which can make the lightest shades look washed out and the darkest shades look black-with-tint. Manual adjustment is sometimes warranted — Tailwind's actual color scales aren't pure HSL stepping; they're hand-tuned by the team. For a design system you'll iterate on, accept this generator as a starting point and tweak.
How do I use these variables in components?
Reference them with var(): <code>background: var(--brand-500); color: var(--brand-50);</code>. Combine with prefers-color-scheme media queries or :root.dark overrides for dark mode. In Tailwind, you can register the scale via theme.extend.colors and use Tailwind utility classes like <code>bg-brand-500</code>.
Do I need 11 steps?
Typically 9–11 covers most use cases. Smaller scales (5–7 steps) are easier to memorize and reduce decision fatigue. Larger scales (15+) get unwieldy and most steps go unused. The sweet spot for most design systems is 10 (50, 100, 200, ..., 900) or 11 (adding 950 for a near-black variant).
How do I use the CSS Variables Generator?
Simply pick your options and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Setting up a design system
Generate a complete color scale for your brand colors when initializing a new design system.
Tailwind theme customization
Build custom color scales to register in your tailwind.config.js for consistent component utilities.
Dark mode color tokens
Generate a scale, then invert it (50↔900) for dark mode token mapping.
Brand application across UI
Plug a single brand hex value in and get all the lighter/darker variants needed for hover, active, disabled states.
Component library theming
Override default themes in component libraries (Chakra, Mantine, MUI) with custom scales.
Documentation site styling
Quickly establish a usable color palette for a new project's docs without overthinking it.
Last updated: