Color Shades Generator: Create 100–900 Shade Scales for Design Systems
A color shades generator produces a systematic series of progressively darker variants of a base color. The tool converts your HEX input to HSL color space, then decrements the Lightness channel in equal steps to produce a 9-stop scale (100–900) — matching the color scales used in Tailwind CSS, Material Design, and most modern design systems. Hue and Saturation are held constant so every shade belongs to the same color family. All processing runs client-side with no uploads.
Where step ranges from 0 (lightest, shade 100) to 8 (darkest, shade 900) and increment is the lightness step size. The base color's Hue and Saturation are preserved unchanged across all shades.
Why Systematic Shade Scales Matter
Ad-hoc color choices — picking a slightly darker blue for a hover state by eye — create inconsistency across a codebase. A shade scale solves this by providing a named, predictable set of tonal variants from the same hue. Designers and developers share the same vocabulary: 'use blue-600 for hover, blue-700 for active, blue-100 for the badge background.' This consistency is the foundation of a scalable design system.
How HSL Makes Shade Generation Accurate
RGB arithmetic alone cannot reliably darken a color — incrementally subtracting values from all three channels often produces muddy or hue-shifted results. HSL solves this by separating what color it is (Hue) from how vivid (Saturation) and how dark (Lightness). Reducing only Lightness while fixing H and S produces true shades that look unmistakably like the base color, just darker.
Using Shades for Dark Themes and Hover States
In dark mode, swap your surface from shade 50 to shade 900, and text from shade 900 to shade 50. Interactive states follow a consistent rule: default = shade 500, hover = shade 600, active = shade 700, disabled = shade 200. This predictable progression makes dark theme implementation a mechanical remap rather than a creative exercise per component.
Frequently Asked Questions
How are color shades calculated from a hex color?
The tool converts your HEX input to HSL (Hue, Saturation, Lightness). Shades are generated by decrementing the Lightness value in equal steps while keeping Hue and Saturation fixed. A 9-stop scale from 100 to 900 is standard: shade 100 has the highest Lightness, shade 900 the lowest.
What is the difference between a shade and a tint?
A shade is created by adding black — reducing Lightness in HSL. A tint is created by adding white — increasing Lightness. This tool generates shades (darker variants). For lighter variants, use the Color Tints Generator. Both operations preserve the original Hue.
How does Tailwind CSS name its color shades?
Tailwind uses a numeric scale from 50 (lightest) to 950 (darkest), with 500 as the base color. You can map generated shades into tailwind.config.js under theme.extend.colors as named tokens — for example, primary: { 100: '#dbeafe', 500: '#3b82f6', 900: '#1e3a5f' }.
What is the HSL color space and why is it best for generating shades?
HSL (Hue, Saturation, Lightness) separates color into intuitive components: Hue (0–360°) defines the color family, Saturation (0–100%) controls vividness, Lightness (0–100%) controls brightness. Adjusting only Lightness produces true darker variants that stay in the same hue family — unlike raw RGB arithmetic, which often produces muddy or hue-shifted results.
How do I use shades to build a design system?
Define shade tokens as CSS custom properties: --blue-100 through --blue-900. Then map them to semantic tokens: --color-surface: var(--blue-100); --color-primary: var(--blue-500); --color-hover: var(--blue-600); --color-active: var(--blue-700). This layered approach lets you retheme an entire UI by changing one set of primitive values.
What is the relationship between shades and WCAG accessibility contrast?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text. In a shade scale, text on a 100–200 background typically needs 700+ as the text color to pass AA. The exact ratio depends on the base color's saturation and the lightness spread of your scale — always verify specific shade pairs with a contrast checker.