Home · Tailwind Color Palette
Tailwind Color Palette Generator — v3 & v4, Same Values
Your palette as a Tailwind v3 theme object or a v4 @theme block — generated together, value-identical, and with the semantic colours drawn only from pairings that pass.
The catch with most Tailwind palette generators: they export a pretty scale and stop. The scale is the easy half — the half that fails in production is the combinations. Here the export carries both: the full primary and neutral scales, plus semantic colours (text, action, border, focus…) whose pairings were measured first.
The palette being exported
This door exports the palette from your workflow — the one this page's link carried in, or the default brand blue. Change the brand colour here, or go back to the generator to edit roles first.
Format
One palette, two Tailwind generations
Tailwind v4 moved theming from a JavaScript config into CSS, which split the palette-tool landscape: most generators serve one generation or the other. The palette underneath did not change when the tooling did, so this door serves both from the same graded state — pick the tab that matches your project — the values will match the CSS and token export exactly. If a pairing fails, it is excluded from the semantic layer in both formats, and named in both files.
Tailwind export questions
Tailwind v3 or v4 — which do I need?
If your project has a tailwind.config.js, you want the v3 output: a theme.extend.colors object with the scales and the verified semantic colours. If you are on Tailwind v4, theming lives in CSS: the v4 output is an @theme block with --color-* variables. Both are generated from the same graded palette in the same pass, and the values are identical across the two formats — switching between them should never change a measured colour.
Why do the dark semantic colours have different names?
In the v3 object they are dark-prefixed keys (darkTextBody, darkAction, …) and in v4 they are --color-dark-* variables, because a config holds both themes side by side and the names must not collide. Wire them behind your dark variant or a [data-theme="dark"] scope; the values themselves are the dark theme’s own solved roles, not inversions of the light ones.
Can I just take the scales and skip the semantic layer?
You can — the scales are complete in every export — but understand what you are skipping. The scale steps are labelled building material: individually unverified. The semantic layer is the part where each colour is bound to a role whose pairings were measured. Teams that ship the scales alone tend to rediscover the failing combinations in production, one bug report at a time.