Skip to content
I Hate Online Tools

Tailwind color generator

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

Runs in this tab. The file stays here.

Preview
50
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 design tokens, offline.

Design systems often need a full shade ladder from a brand hex — 50 for backgrounds through 950 for near-black text. Doing that by eye in a color picker is inconsistent. This page derives a 50–950-style scale from one seed color and lets you copy the values.

It is inspired by how Tailwind-style palettes are structured, not a claim that these match Tailwind’s default indigo or slate ramps exactly. Treat the output as a starting palette you can tweak in code or Figma.

For converting a single color between hex/rgb/hsl, use the developer color converter. For gradients that blend several stops, use the gradient generator.

How to use Tailwind color generator

  1. 1Enter or pick a seed hex color.
  2. 2Review the generated 50–950 shades.
  3. 3Copy the scale into your CSS variables or Tailwind theme config.

What it won't do

  • Algorithmic ramp — expect to nudge a few steps for accessibility contrast.
  • Not an official Tailwind export of default palettes.

Common questions

Are these identical to Tailwind’s default colors?

No. They are a generated ramp from your seed. Default Tailwind palettes were curated separately.

Can I export a tailwind.config snippet?

Copy the hex values and paste them into your theme. The page focuses on the scale itself.

Does this upload my brand color?

No. Generation runs in the browser.

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

Install the app