Free Online Color Shades Generator

1. Enter or pick a base hex color to seed the scale.
2. Browse the 10 Shades (darker), 10 Tints (lighter) and 10 Tones (less saturated) rows.
3. Click any swatch to copy its hex.
4. Use the lightest tints for backgrounds and the darkest shades for body text on light themes.

Modern design systems are built on color scales: one hue stepped through ten or eleven evenly-spaced lightness values from background-light to text-dark. Tailwind's `slate-50` through `slate-950` is the most familiar example, and Radix Colors and Material 3 use the same shape. The math is HSL-based — shades drop lightness toward 0, tints raise it toward 1, and tones drop saturation toward 0 to mute the hue.

The generator targets product designers building a new brand system, marketing-site developers theming a one-off landing page, and engineers who need a credible default palette before the design team finishes its work. The 50–950 output drops directly into a Tailwind v4 `@theme` block or a CSS custom property set.

Lightness steps are perceptually weighted so the gap between 50 and 100 feels similar to the gap between 900 and 950.