Colour Shade Ramp Generator

Turn any colour into a full shade ramp (50 to 900), like a Tailwind colour scale, and copy it as CSS variables.

Base colour

Light → dark ramp

Ad space — always below the tool, never inside it

How to use colour shade ramp generator

1Pick a base colourEnter a hex code or use the colour picker.

2Browse the rampSee nine steps from very light to very dark, labelled 50 to 900.

3Copy what you needClick any swatch to copy its hex, or copy the whole ramp as CSS variables.

That's the convention used by Tailwind CSS and many design systems for a colour's shade scale, from lightest (50) to darkest (900).

Each step keeps the same hue and saturation as your base colour, only changing the lightness.