Generate a tint and shade ramp
Generate a full ramp of tints and shades from a single base color, ready to use as a palette.
Use the color picker or type a hex code. This becomes your ramp's 500 shade.
10 shades are generated by keeping the hue and saturation fixed and sweeping lightness, Tailwind-style.
Click a swatch to copy its hex code straight to your clipboard.
Frequently asked
How are the shades calculated?
Your base color is converted to HSL, then 10 lightness values (95% down to 10%) are applied while keeping hue and saturation fixed. The same idea behind Tailwind's 50–900 color scale.
Why do the numbers go from 50 to 900?
It mirrors the numbering convention used by Tailwind CSS and similar design systems: 50 is the lightest tint, 900 is the darkest shade, with 500 sitting closest to your original base color.
Will my base color exactly match one of the shades?
Not necessarily. The ramp uses fixed lightness steps (95, 90, 80…10) rather than inserting your exact lightness value, so the closest step (usually 500 or 400) will be near but not always identical to your input.