How are the shades built?

We keep your hue and saturation and map each step to a target lightness.

Which step matches my color?

The 500–600 range is closest to a typical base color.

Turn a base color into a 50–900 shade scale like Tailwind CSS.

Base color

#f0f6fe

100

#e2ecfe

200

#bbd4fc

300

#8ab5f9

400

#5996f7

500

#2977f5

600

#0b5ee5

700

#094cb9

800

#073a8d

900

#052861

Pick a base color and get a full 50 to 900 shade scale ready to drop into your Tailwind config. Each swatch is copyable.

How are the shades built?: We keep your hue and saturation and map each step to a target lightness.
Which step matches my color?: The 500–600 range is closest to a typical base color.