Color Shades

Input one color and generate 10 shades (50-950 like Tailwind). Copy hex values or export as CSS variables.

11 ShadesTailwind ScaleExport CSS/TWFree

Frequently Asked Questions

How are the shades generated?

We convert your color to HSL, keep the hue, and adjust the lightness to match Tailwind's shade scale (50 = lightest, 950 = darkest).

Can I export the palette?

Yes! Export as CSS custom properties (--color-50 through --color-950) or as a Tailwind config object.

How many shades are generated?

11 shades matching Tailwind's scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950.

Free online tools for images, PDFs, text, code, and more. All running in your browser.