Tailwind Color Palette Generator

Generate a complete Tailwind CSS color palette from any hex color — compatible with Tailwind CSS v4

Base Color

Generated Palette

What is a Tailwind Color Palette Generator?

A Tailwind color palette generator expands a single base color into a complete scale of eleven shades, from the lightest 50 to the darkest 950. Tailwind projects rely on numbered shades like blue-500 and blue-700, and a consistent scale lets you pick a lighter or darker tone of the same hue anywhere in your interface.

The tool converts your hex color into HSL, keeps the hue untouched, and rebuilds each shade with a fixed lightness value. Because the hue never changes, every shade stays recognisably part of the same color family. Saturation is scaled slightly per shade so mid tones feel vivid while the extremes do not become muddy.

The output is a ready-to-paste tailwind.config.js snippet that extends colors.primary with all eleven shades. Under each swatch you see the shade number and its hex value, and the generator also labels the color family by reading the hue and saturation, so a blue base is tagged Blue and a near-white base is tagged Almost White.

Everything runs in your browser. You can type a hex value or use the color picker, and clicking any swatch copies its hex code to your clipboard for use elsewhere.

Key Concepts

Eleven shades — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950.
Fixed lightness — each shade uses a preset lightness from 97 percent at shade 50 down to 8 percent at shade 950.
Scaled saturation — saturation is multiplied per shade so mid tones stay vivid and extremes stay natural.
Preserved hue — the original hue is unchanged, so every shade belongs to the same family.
Color family label — the tool names the family (Red, Blue, Purple, and so on) from the base hue and saturation.
Config output — a theme.extend.colors.primary block ready for your Tailwind config.

How to Use

Enter a base color — Type a three- or six-digit hex value, or pick a color with the swatch input.
Check the family label — The tool names the color family from the base hue so you can confirm it is the tone you expected.
Review the generated shades — The palette grid shows all eleven shades from 50 to 950 with their hex values.
Copy a shade if needed — Click any swatch or its copy button to copy that shade hex code to the clipboard.
Copy the Tailwind config — Paste the generated colors.primary block into theme.extend in your tailwind.config.js.

Shade Reference

Shade	Lightness	Saturation multiplier	Typical use
50	97%	1.0	Page backgrounds
100	92%	1.0	Hover backgrounds
200	82%	1.0	Borders and dividers
300	70%	1.0	Disabled states
400	55%	0.95	Dark-mode accents
500	45%	0.90	Primary buttons
600	35%	0.90	Button hover states
700	25%	0.90	Headings and text
800	18%	0.85	Dark surfaces
900	12%	0.80	Deep backgrounds
950	8%	0.75	Near-black accents

Hue range	Family label
Less than 20 or 340 and above	Red
20 to 45	Orange
45 to 70	Yellow
70 to 160	Green
160 to 200	Teal
200 to 260	Blue
260 to 300	Purple
300 to 340	Pink
Low saturation	Almost White, Almost Black, or Gray

Worked Examples

Blue base #3b82f6 — labelled Blue; shade 50 is #f0f6fe, shade 500 is #155cd1, and shade 950 is #061122.
Red base #ef4444 — labelled Red; shade 500 is #ca1c1c and shade 100 is #fcd9d9.
Green base #22c55e — labelled Green; shade 500 is #2abc60 and shade 900 is #0d301a.
Purple base #7c3aed — labelled Purple; shade 500 is #5c1dc9 and shade 50 is #f6f1fe.
Short hex #fff — expands to #ffffff, and because saturation is near zero and lightness is high it is labelled Almost White.
Invalid input — entering something that is not a 3- or 6-digit hex falls back to the default #3b82f6.

Tips and Common Mistakes

Start from a mid-tone base — a color near the 500 range balances both the light and dark halves of the scale.
Include the leading hash — hex values are validated as three or six digits, so type #3b82f6 with the hash.
Shade 500 is not your original color — the tool rebuilds every shade from fixed lightness values, so the base hue is kept but the exact tone changes.
Watch very saturated bases — a fully saturated input stays intense across most of the scale because saturation is only trimmed slightly.
The family label is a guide, not a name — it reads the hue into a rough bucket, so neighbouring hues can share the same label.
Rename the key if needed — the config extends colors.primary, so change that key to match your design token naming.

Common Use Cases

A consistent shade scale is the backbone of a tidy Tailwind theme. These are some of the ways teams put this generator to work.

Brand palettes — turn a brand hex into a full family of shades for buttons, links, and highlights.
Design tokens — define a primary scale once and reference it consistently across components.
Dark mode — use the darker shades for backgrounds and the lighter shades for accents.
Prototyping — quickly explore how a candidate color looks across an entire UI.
Theme migrations — rebuild a legacy color ramp as a Tailwind-compatible 50 to 950 scale.
Chart and data colors — pick sequential shades for charts and status indicators.

Frequently Asked Questions

What is Tailwind Color Palette Generator?

It is a free online tool that expands a single hex color into a full Tailwind color scale of eleven shades, from 50 to 950, and outputs a ready-to-paste tailwind.config.js snippet.

How do I use Tailwind Color Palette Generator?

Enter a three- or six-digit hex value or pick a color with the swatch input. The palette grid and the Tailwind config update instantly, and you can click any swatch to copy its hex code.

Is my data sent to a server or stored?

No. All processing is performed locally in your browser using JavaScript. Your color never leaves your device and is not stored, logged, or shared with any third party.

Is this compatible with Tailwind CSS v3 and v4?

The generated snippet extends theme.extend.colors, which works in both Tailwind CSS v3 and v4. Paste the primary block into your config and use classes such as bg-primary-500.

Is this tool free to use?

Yes. This tool is completely free to use with no limitations, registration, or API key required. There are no usage caps, and you can use it as often as you need.

What shades are generated?

Eleven shades are generated: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Each one uses a fixed lightness value and a slightly scaled saturation.

Why is the generated 500 shade different from my input color?

The tool keeps the hue but rebuilds lightness and saturation to fit the standard scale, so the exact tone shifts. Every shade still belongs to the same color family as your input.

How is the color family name determined?

The base color is converted to HSL and the hue is bucketed into a family such as Red, Orange, Yellow, Green, Teal, Blue, Purple, or Pink. Low-saturation colors are labelled Gray, Almost White, or Almost Black.