DevLab
◉
Colorsbeginner

Color Shades Generator

generate tints and shades of any color for design systems

By Bikram NathLast updated

Paste any hex or HSL color and get a full 10-stop scale — 50 through 900 — of tints and shades calibrated for design system use. Useful when you have a brand color like #2563EB and need the lighter hover states and darker pressed states to populate a Tailwind CSS theme. The output mirrors the structure Tailwind uses internally, so the stops drop directly into a `colors` config without manual adjustment.

In development

Interactive Color Shades Generator — coming soon

We're still building the interactive Color Shades Generator. The guide below explains exactly what it does and how to use it. In the meantime, here are DevLab tools that already work in your browser:

ColorsColor ConverterCSSCSS Gradient Generator
Browse all working tools →

What is Color Shades Generator?

Color Shades Generator takes a single base color and derives a graduated scale of lighter tints (mixed toward white) and darker shades (mixed toward black), outputting each stop as hex, RGB, and HSL values. Feed it a mid-range brand blue at the 500 position and it fills in everything from a near-white 50 to a near-black 950, giving you the full ramp a component library expects.

When developers need a color scale, the common alternatives are reaching into Tailwind's default palette directly, or using Adobe's Leonardo tool (leonardocolor.io) which targets contrast ratios against a background. This tool is narrower: you supply the anchor color and get deterministic stops out, which is faster when you already have a brand-approved hex and just need the surrounding ramp to satisfy a design token schema.

The main gotcha is that simple lightness mixing in HSL space produces perceptually uneven steps — the jumps between stops 100–200 often look larger than 700–800 even when the numeric lightness delta is identical. This is a property of human vision (the HK effect), not a bug. If perceptual uniformity matters — accessibility tooling or printed output — verify contrast ratios with a checker rather than trusting the numeric spacing alone.

When to use Color Shades Generator

✓Populate a Tailwind `extend.colors` block from a single brand hex your designer handed you.
→Generate hover, active, and disabled state variants for a button component without guessing hex values manually.
⚡Seed a Figma variable collection with a token ramp before exporting to CSS custom properties.

Frequently Asked Questions

Why does my base color end up at the 500 stop instead of matching exactly at the shade I picked?
Most shades generators treat the 500 stop as the canonical mid-point and derive the full scale from it by interpolating toward white (for 50–400) and toward black (for 600–950). If you paste #2563EB and it appears at 500, the output is working as designed — the surrounding stops are computed, not sampled from an existing palette. If you need your exact hex to land at a different stop, look for a tool that lets you anchor the input to a specific scale position, or adjust the input color's lightness in HSL until 500 matches your target.
How is this different from just using Tailwind's default color palette?
Tailwind ships a fixed palette — slate, blue, emerald, etc. — hand-tuned by its maintainers. If your brand color is #1A7F5E, there is no Tailwind green that anchors there. This tool generates a custom ramp from your hex so the resulting scale has the same structural shape as a Tailwind palette but centered on your specific brand color. The tradeoff is that Tailwind's palette was manually adjusted for perceptual balance; a programmatically generated ramp may have uneven-feeling jumps that you would catch with a contrast checker.
Does the tool generate shades in HSL, HSB, or by RGB channel mixing?
Tints and shades produced by mixing toward white and black happen in RGB space by default — the tool blends each channel linearly. HSL-based interpolation (adjusting the L channel while holding H and S) produces different results: RGB mixing can shift hue slightly toward gray at extremes, while HSL mixing keeps the hue locked but can oversaturate mid-range stops. Neither is universally correct. For most design token use cases RGB-mixed shades match what designers expect when they say 'lighter version of this color.'
How many stops does the generator produce, and can I change the count?
The default output follows the Tailwind convention: 11 stops — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. This covers the full range needed for text, border, background, and interactive state tokens in a typical component library. If you need a finer ramp (say, 20 stops for a data-visualization gradient), this tool is not the right fit — reach for Leonardo (leonardocolor.io) or write a short script using chroma.js's scale() method, which lets you specify arbitrary stop counts.
Why do the very light stops (50, 100) look almost identical in some colors?
High-saturation input colors — particularly reds and oranges — compress quickly toward white at the light end of the scale because their base lightness in HSL is already relatively high. A saturated red like #E53E3E sits around L 56% in HSL; mixing toward white only has about 44 percentage points of lightness headroom, so stops 50 through 200 can feel visually indistinct. One fix: adjust your anchor color to a slightly darker starting point (lower L value) before generating, so the lighter stops have more room to spread.

Related Tools

Colors
Color Converter
convert between HEX, RGB, HSL, HSB, and CMYK color formats
Colors
Color Palette Generator
generate harmonious color palettes from a base color
Colors
Color Contrast Checker
check WCAG color contrast ratio for accessibility compliance
CSS
CSS Gradient Generator
generate CSS linear, radial, and conic gradients visually

Learn more

◉
Color Spaces Explained: RGB, HSL, HEX, and Beyond
Understand how computers represent color. Learn the differences between RGB, HSL, HEX, HSV, and OKLCH — and when to use each one.
◉
Color Contrast for Developers: WCAG Rules and How to Check
Learn the WCAG contrast requirements for text, icons, and interactive elements — and how to test contrast ratios in your projects.