Tailwind color palette generator

Enter a brand color and get the eleven Tailwind shades, 50 to 950, built in OKLCH so every step keeps your hue. Add up to five colors for a full theme, name the token, and copy the code.

Color 1 · Blue Violet
Color 1 color picker
Color 1 hex code

Tip: paste a list of hex codes anywhere here to check them all at once.

Token name

Becomes --color-brand-500

Shade scales

Each color as a 50–950 ramp, like Tailwind's built-in palettes — ready for a design system. The ringed step is closest to the original color.

#7C3AED

Format

@theme {
  --color-brand-50: #F7F6FF;
  --color-brand-100: #ECE9FF;
  --color-brand-200: #DCD4FF;
  --color-brand-300: #C5B7FF;
  --color-brand-400: #AA8EFF;
  --color-brand-500: #9466FF;
  --color-brand-600: #7F43EE;
  --color-brand-700: #672FC7;
  --color-brand-800: #5223A2;
  --color-brand-900: #411B81;
  --color-brand-950: #2A0D58;
}

#7C3AED: step 600 and darker pass WCAG AA as text on white.

Build a palette around these colors Check their contrast

What the 50–950 steps are for

Tailwind names every color as a scale of eleven steps. The numbers are lightness, not a ranking: 50 is almost white and 950 almost black, with 500 near the middle. Design systems lean on that structure, so a scale is more useful than a single hex code. A common split is:

50–100: page and card backgrounds, selected rows, subtle fills.
200–300: borders, dividers, disabled states, hover fills.
400–500: icons, illustrations, focus rings, charts.
600–700: primary buttons and links, which usually need white text on them.
800–950: headings and body text tinted with your hue, and dark-mode surfaces.

The line under the scales above names the lightest step of each color that passes WCAG AA as text on white, because it differs by hue: yellows and greens need a darker step than blues and purples at the same number.

How the scale is built

The generator converts your color to OKLCH, a color space where equal steps in lightness look equal to the eye. Each step gets a fixed target lightness close to Tailwind v4's own palettes, from 0.977 at 50 to 0.26 at 950, and keeps your hue. Chroma (colorfulness) is highest around 500 and tapers toward both ends, so the pale steps don't turn candy-colored and the dark ones don't turn neon. Steps that fall outside the sRGB gamut are brought back by lowering chroma, never by clipping channels, which would shift the hue. The ringed step in each scale is the one closest in lightness to the color you entered, so you can see where your original sits.

Tailwind v4 and v3

Tailwind v4 is configured in CSS. Paste the Tailwind v4 output into your main stylesheet after @import "tailwindcss"; and the theme variables create utilities such as bg-brand-500 and text-brand-900 automatically. Tailwind v3 is configured in JavaScript: paste the Tailwind v3 output inside theme.extend.colors in tailwind.config.js. The CSS variables output works with any framework, or none.

Start from a palette

Every palette on Tinta has these shade scales on its page. No brand color yet? Generate one in the color palette generator, or browse palettes by color.