How is the 50-950 scale generated?

Your base color is placed at the 500 step. Lighter steps (50-400) are produced by raising lightness and easing off saturation, and darker steps (600-950) by deepening saturation and lowering lightness, all computed in HSL space. The result is a balanced, Tailwind-style ramp that keeps your hue recognizable across the whole scale while giving usable light tints and dark shades.

What is the difference between the Tailwind v4 and v3 exports?

Tailwind v4 configures colors in CSS: the v4 export is an @theme block with custom properties like --color-brand-500, which Tailwind turns into utilities such as bg-brand-500 automatically. Tailwind v3 configures colors in JavaScript: the v3 export is a tailwind.config.js with a nested colors object under theme.extend. Pick the one matching your Tailwind version - the actual color values are identical, only the wrapping syntax differs.

Can I generate more than one color scale at once?

Yes. Use Add color to append as many named palettes as you need - for example brand, accent, and a neutral gray - and they are all included in a single export. Tailwind v4 emits all their custom properties in one @theme block, v3 nests them all under colors, and the CSS, SCSS, and JSON formats group them the same way, so you get a complete theme in one copy.

What do the contrast labels on each swatch mean?

Each swatch shows either a white or black step number - whichever text color has the higher WCAG contrast ratio against that shade. Hovering a swatch reveals the exact ratio. This lets you judge accessibility at a glance: a dark 700 will favor white text, while a light 100 will favor black. Aim for a contrast ratio of at least 4.5:1 for normal body text (WCAG AA).

Which formats can I export besides Tailwind?

Beyond Tailwind v4 and v3, you can export plain CSS custom properties (a :root block with --name-shade variables), an SCSS map per palette (usable with map-get), and JSON (a nested object of names to shade-to-hex). These are ideal when you want the same palette in a non-Tailwind project or to feed a design-token build step like Style Dictionary.

Is my palette sent anywhere?

No. The entire scale generation, contrast calculation, and export run locally in your browser - nothing is uploaded. The only data that leaves the page is what you choose to put in the shareable URL, which encodes the palette names, base colors, and selected format so a teammate opening the link sees exactly the same result.

Tailwind Color Palette Generator

Turn any base color into a complete 50-950 Tailwind color scale, then export it for Tailwind v4 (@theme), Tailwind v3 (config), CSS variables, an SCSS map, or JSON. Build a multi-color palette, see every shade live with its WCAG contrast rating, and copy a ready-to-paste theme. Everything updates instantly and the whole palette is captured in the URL.

About this ToolHow it works, benefits & use cases

Generate a complete, production-ready Tailwind color scale from any base color, then export it in the exact format your project uses. Give a palette a name (like brand or accent) and a base color - typed as hex, picked from the native color picker, or chosen from a preset - and the tool builds the full 50 through 950 scale anchored on your color at the 500 step. Add as many named palettes as you like and see every shade rendered live, each labelled with the text color (black or white) that meets WCAG contrast best so you can tell at a glance which shades are safe for text. When you are happy, switch the export format: Tailwind v4 emits a CSS @theme block with --color-name-shade custom properties, Tailwind v3 emits a JavaScript config with a nested colors object, and you can also export plain CSS variables, an SCSS map, or JSON for a design-token pipeline. The shade values are identical across every format, everything updates instantly as you tweak, and the whole palette is captured in the URL so you can share it.

How to Use

1Name a palette and set its base color (type a hex, use the color picker, or pick a preset).
2The full 50-950 scale is generated live, anchored on your color at 500.
3Add more colors with Add color to build a multi-palette theme.
4Pick an export format: Tailwind v4 (@theme), Tailwind v3 (config), CSS variables, SCSS, or JSON.
5Copy, download, or share the output - the shade values are the same in every format.

Key Benefits

Full 50-950 Tailwind scale from a single base color
Exports for Tailwind v4 (@theme) and Tailwind v3 (config) from one palette
Also exports CSS variables, SCSS maps, and JSON design tokens
Multi-palette support for a complete brand theme
Live swatches with WCAG contrast ratings on every shade
Native color picker, hex input, and curated presets
Runs entirely in your browser and is fully shareable via URL

Common Use Cases

Creating a brand color scale for a new Tailwind project
Migrating a color theme from Tailwind v3 config to v4 @theme (or vice versa)
Exporting design tokens as CSS variables, SCSS, or JSON for a non-Tailwind stack
Checking which shades of a brand color are accessible for text
Sharing a proposed palette with a teammate via a single URL

Live scales

brand

100

200

300

400

500

600

700

800

900

950

Export format

Tailwind v4 (@theme) output

Copy, download, share, or pipe to another tool

@theme {
  --color-brand-50: #f5f6f9;
  --color-brand-100: #ebebf5;
  --color-brand-200: #d0d1ec;
  --color-brand-300: #a7a8e2;
  --color-brand-400: #6a6de1;
  --color-brand-500: #6366f1;
  --color-brand-600: #2b2ff6;
  --color-brand-700: #0005ee;
  --color-brand-800: #0004bb;
  --color-brand-900: #000388;
  --color-brand-950: #000255;
}

Palettes

Name

Base color

Presets:

Tailwind v4 and v3, both ready

Tailwind v4 reads colors from CSS via @theme, while v3 uses a JavaScript config. Pick whichever your project uses - or grab plain CSS variables, an SCSS map, or JSON to feed a design-token pipeline. The shade values are identical across every format.

Accessible by inspection

Each swatch is labelled with the text color (black or white) that meets WCAG contrast best, so you can see at a glance which shades are safe for text. Hover any swatch for its hex and exact contrast ratio.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Tailwind Color Palette Generator

How to Use

Key Benefits

Common Use Cases

Palettes

Tailwind v4 and v3, both ready

Accessible by inspection

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Tailwind Color Palette Generator