About Color Shades & Tints

Generate 9 darker shades + 9 lighter tints from any base color. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Designers generating a complete shade scale from a single brand color
• Frontend developers creating hover and active state color variations
• Design system teams building consistent lightness ramps for UI tokens
• Accessibility engineers testing contrast ratios across shade variations

Tips

• Enter any base color to generate 9 darker shades and 9 lighter tints
• Use the generated scale as a complete single-hue design token set
• Copy individual shade hex values for hover states and UI depth layers

Fun Facts

• In color theory, a 'shade' is a color mixed with black while a 'tint' is mixed with white — these terms were formalized by Albert Munsell in his 1905 color system.
• Tailwind CSS generates 10-step shade scales (50-950) for each color using a perceptual lightness curve, not simple linear interpolation with black and white.
• The human eye can distinguish approximately 10 million different colors, but most design systems use only 8-12 lightness steps per hue to maintain visual consistency.

FAQ

What's a shade vs a tint?

Shade = color + black (darker). Tint = color + white (lighter). Together they form a tonal palette — a single hue at multiple lightnesses.

Why 9 steps?

Matches Tailwind's 50-900 scale (plus an A100 variant). Familiar to developers, enough range for backgrounds, text, borders, and shadows.

Does it maintain perceptual uniformity?

Uses OKLCH internally — each step is equally lighter/darker than the last. HSL doesn't have this property (step 800→900 feels much smaller than 100→200).

What's this useful for?

Design systems — a single brand color becomes an entire scale. Or quickly generating hover/disabled states from a base button color.