Tailwind color generator

Build a 50–950 shade scale from one hex color.

Runs in this tab. The file stays here.

Preview

100

200

300

400

500

600

700

800

900

950

CSS

--color-50: #f1fafe;
--color-100: #e2f5fd;
--color-200: #bce7fb;
--color-300: #8cd6f8;
--color-400: #52c2f5;
--color-500: #18aef1;
--color-600: #0d96d4;
--color-700: #0a7bad;
--color-800: #085f87;
--color-900: #064460;
--color-950: #03293a;

This runs in your browser. Nothing is uploaded.

About Tailwind color generator

Generate a 50–950 shade scale from one hex color for Tailwind-like tokens.

Everything runs in this tab. Copy the CSS when you are happy with the preview.

How to use Tailwind color generator

1Adjust the controls.
2Watch the live preview.
3Copy the generated CSS.

Common questions

Does this inject styles into my site?

No. It only shows preview CSS here. You paste the output into your own stylesheet.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation