Color Shades & Tints Generator
Generate a tint-and-shade palette ramp from any base color.
Each swatch keeps the base hue and saturation while stepping lightness from 95% (lightest tint) down to 5% (darkest shade) — a ready-made palette ramp for a design system. Generated in your browser.
Enter a base color to instantly generate a ramp of tints (lighter) and shades (darker), holding the hue and saturation steady while stepping lightness from 95% to 5%. Copy any swatch or the whole set — perfect for building the 50–900 scale of a design system or finding hover and disabled states. Runs in your browser.
How to use the Color Shades Generator
- Pick or type a base color.
- Read the light-to-dark ramp of tints and shades.
- Copy a single hex or the whole palette.
Frequently asked questions
What's the difference between a tint and a shade?
A tint is the color mixed toward white (lighter); a shade is mixed toward black (darker). This tool generates both as one continuous lightness ramp.
Why keep hue and saturation fixed?
Holding hue and saturation steady while only changing lightness keeps every step recognisably the same color — exactly what a design-system scale needs.