Tailwind CSS Color Exporter

The Tailwind color exporter expands one color into an eleven-step scale from 50 to 950 and writes it as a ready-to-paste tailwind.config colors block.

What is Tailwind CSS Color Exporter?

• The Tailwind color exporter takes a single colour and produces a configuration snippet.
• Pick a base colour and the tool builds a scale of eleven shades labelled from fifty to nine hundred and fifty, then writes them into a block of Tailwind config colors with the shades nested under a brand colour.
• A copy button takes the whole block.

The scale is generated rather than sampled, which is the most important thing to understand about the output. Each of the eleven steps sits at a fixed lightness — the pale steps near the top of the range, the deepest near the bottom — while the hue and saturation are taken from the colour you chose. As a result every step is recognisably a version of your colour, and the whole ramp is internally consistent, with the lighter steps reading as tints and the darker ones as shades of one hue rather than as a collection of unrelated colours.

One consequence of that design is worth anticipating, because it surprises people who expect the opposite. Your chosen colour is not placed at any particular step. There is no rule that the base lands on five hundred; the ramp is a fixed lightness ladder wearing your colour, so a mid-blue may sit closest to the five hundred and six hundred steps while a pale colour sits closest to the top. If an exact value needs to appear in the scale, it has to be checked and adjusted afterwards.

The eleven steps follow the convention Tailwind adopted when it extended its own palettes: fifty at the lightest through nine hundred, with a nine hundred and fifty at the darkest for the very deepest tone. Because the scale builds from your hue and saturation, the result slots into a project that already uses the framework's naming — utilities such as the fifty, five hundred and nine hundred variants all resolve to something sensible, and the ramp behaves the way the rest of a Tailwind palette does.

In practice the workflow is a colour pick and a paste. Choose the brand colour, copy the block, drop it into the extend section of the configuration, and every shade becomes available as a utility with no further conversion. That is the whole point of exporting rather than generating a loose list of values: the output is already in the shape the build expects, so nothing has to be renamed or restructured.

• Limits worth knowing: the block is written as a CommonJS module export, so a project using ES modules or the newer CSS-first configuration will need to adapt the wrapper even though the shades themselves are correct.
• The colour name is fixed to brand, so renaming it is a manual edit; there is no dark-mode variant, no semantic aliasing and no export of other token types; and the values are hex, with no oklch form for projects that have moved to wider-gamut palettes.
• There is also no contrast checking, so the suitability of any shade for text has to be tested separately — but within those bounds, as a tailwind color scale generator it removes the tedium of building eleven steps by hand, and for anyone who needs to generate tailwind palette shades from one brand colour or simply get tailwind brand colors into a config file, it is a single paste.

How to use Tailwind CSS Color Exporter

1. Pick the brand colour with the field at the top.
2. Read the eleven generated shades, which run from 50 at the lightest to 950 at the darkest.
3. Copy the configuration block into the extend section of your Tailwind config.
4. Rename the brand key and adjust any shade that has to match an exact value.

When to use Tailwind CSS Color Exporter vs related tools

Use this when a Tailwind project needs a full shade ramp derived from a brand colour. Use the palette generator when you want to see the shades on screen without a config block, or the design token generator when the output has to be a token document instead of framework configuration. The framework's own families are laid out in the Tailwind color reference for comparing a derived ramp against them, and the contrast checker is where the shade that will carry text gets verified.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Tailwind CSS Color Exporter