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
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.
Why lightness stepping in HSL rather than perceptual color?
HSL stepping is simple, reproducible, and produces good-enough results for most UI work. Perceptually-uniform stepping (in OKLCH or LAB) gives more visually-even spacing — colors that look 'one step lighter' rather than 'mathematically lighter.' This generator uses HSL for compatibility; for advanced perceptual scales, use a tool like Leonardo or color2k with their oklch() option.
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).
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: